Open
Bug 803950
Opened 13 years ago
Updated 3 years ago
matchMedia addListener event can not be triggered every time by width be change over the condition .
Categories
(Core :: DOM: Navigation, defect)
Tracking
()
UNCONFIRMED
People
(Reporter: xiaoxiaozhanglin, Unassigned)
Details
(Whiteboard: DUPEME)
Attachments
(1 file)
|
2.33 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Steps to reproduce:
see code:
<iframe width="200" height="100" id="iframe1" ></iframe>
<script>
function reflow(doc) {
doc.body.offsetWidth;
}
var iframe = document.querySelector("iframe");
var iframe_window = window.frames[0];
var iframe1 = document.getElementById("iframe1");
reflow(iframe_window.document);
var i = 0;
var totalCount = 10;
var count = 0;
var divineCount = 10;
var width_list = [201,199];
var mq1 = iframe_window.matchMedia("(max-width:200px)");
mq1.addListener(function(mql){
count = count + 1;
});
var equalAssert = async_test("Check for the correct number of event triggers");
var changeFrameWidth = function(iWidth) {
iframe1.style.width = iWidth + "px";
i = (i === 0) ? 1 : 0;
totalCount = totalCount - 1;
if(totalCount > 0)
{
setTimeout(function(){
changeFrameWidth(width_list[i]);
}, 100);
}
else
{
setTimeout(function(){
alert(divineCount === count)
}, 100);
}
};
Actual results:
alert false
Expected results:
alert true in chrome
|
||
Updated•13 years ago
|
Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core
Comment on attachment 673673 [details]
Check for the correct number of event triggers
><!DOCTYPE html>
> <html>
> <head>
> <title>CSS Test: CSSOM View matchMedia's addListener</title>
> <link rel="author" title="zhanglin" href="mailto:xiaoxiaozhanglin@gmail.com" />
> <link rel="help" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" />
> <meta name="flags" content="dom" />
> <script src='http://w3c-test.org/resources/testharness.js'></script>
> <script src='http://w3c-test.org/resources/testharnessreport.js'></script>
> <style type="text/css">
> iframe { border: none; }
> </style>
> </head>
> <body>
> <div id="log"></div>
> <iframe width="200" height="100" id="iframe1" ></iframe>
> <script>
> function reflow(doc) {
> doc.body.offsetWidth;
> }
>
> var iframe = document.querySelector("iframe");
> var iframe_window = window.frames[0];
> var iframe1 = document.getElementById("iframe1");
> reflow(iframe_window.document);
>
> var i = 0;
> var totalCount = 10;
> var count = 0;
> var divineCount = 10;
> var width_list = [201,199];
> var mq1 = iframe_window.matchMedia("(max-width:200px)");
> mq1.addListener(function(mql){
>
> count = count + 1;
>
> });
>
>
> var changeFrameWidth = function(iWidth) {
> iframe1.style.width = iWidth + "px";
> i = (i === 0) ? 1 : 0;
> totalCount = totalCount - 1;
> if(totalCount > 0)
> {
> setTimeout(function(){
> changeFrameWidth(width_list[i]);
> }, 100);
> }
> else
> {
> setTimeout(function(){
> equalAssert.step(function(){
> assert_equals(divineCount, count, "this will be 10 times of event triggers by change width");
> });
> equalAssert.done();
> }, 100);
> // console.log("**" + count + "**");
> }
> };
>
> changeFrameWidth(width_list[0]);
>
>
> </script>
> </body>
></html>
Attachment #673673 -
Attachment mime type: text/plain → text/html
|
||
Updated•13 years ago
|
Component: DOM: CSS Object Model → Style System (CSS)
|
|
||
Comment 3•13 years ago
|
||
The testcase is adding a media query listener to the temporary about:blank, but then the real about:blank loads, and wipes out the listener (since it's a new document and such).
The right fix on our end is to not have the temporary about:blank. The right fix for the page is to use a load listener on the iframe to attach stuff to the window inside (which would be absolutely needed if the iframe had an src other than about:blank).
Whiteboard: DUPEME
Component: Style System (CSS) → Document Navigation
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•