Open Bug 803950 Opened 12 years ago Updated 2 years ago

matchMedia addListener event can not be triggered every time by width be change over the condition .

Categories

(Core :: DOM: Navigation, defect)

Product:
Core
Component:
DOM: Navigation
Version:
15 Branch
Platform:
x86
macOS
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: xiaoxiaozhanglin, Unassigned)

Details

(Whiteboard: DUPEME)

Attachments

(1 file)

Check for the correct number of event triggers
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
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
Component: DOM: CSS Object Model → Style System (CSS)
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
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: