OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../resources/js-test.js"></script> | 2 <script src="../../resources/js-test.js"></script> |
3 | 3 |
4 <div id="sandbox"></div> | 4 <div id="sandbox"></div> |
5 | 5 |
6 <script> | 6 <script> |
7 description("Media query listeners should fire grouped by the MediaQueryList
."); | 7 description("Media query listeners should fire grouped by the MediaQueryList
."); |
8 var jsTestIsAsync = true; | |
9 | 8 |
10 var sandbox = document.getElementById("sandbox"); | 9 var sandbox = document.getElementById("sandbox"); |
11 var iframe = document.createElement("iframe"); | 10 var iframe = document.createElement("iframe"); |
12 sandbox.appendChild(iframe); | 11 sandbox.appendChild(iframe); |
13 | 12 |
14 var matchMedia = iframe.contentWindow.matchMedia; | 13 var matchMedia = iframe.contentWindow.matchMedia; |
15 var mediaList1 = matchMedia("(max-width: 100px)"); | 14 var mediaList1 = matchMedia("(max-width: 100px)"); |
16 var mediaList2 = matchMedia("(max-width: 100px)"); | 15 var mediaList2 = matchMedia("(max-width: 100px)"); |
17 var mediaList3 = matchMedia("(max-width: 100px)"); | 16 var mediaList3 = matchMedia("(max-width: 100px)"); |
18 | 17 |
19 var listenersCalled = []; | 18 var listenersCalled = []; |
20 | 19 |
21 function makeListener(label) { | 20 function makeListener(label) { |
22 return function() { listenersCalled.push(label); }; | 21 return function() { listenersCalled.push(label); }; |
23 } | 22 } |
24 | 23 |
25 mediaList3.addListener(makeListener("mediaList3_1")); | 24 mediaList3.addListener(makeListener("mediaList3_1")); |
26 mediaList2.addListener(makeListener("mediaList2_1")); | 25 mediaList2.addListener(makeListener("mediaList2_1")); |
27 mediaList1.addListener(makeListener("mediaList1_1")); | 26 mediaList1.addListener(makeListener("mediaList1_1")); |
28 mediaList2.addListener(makeListener("mediaList2_2")); | 27 mediaList2.addListener(makeListener("mediaList2_2")); |
29 mediaList3.addListener(verifyResult); | 28 |
| 29 // FIXME: You shouldn't need to touch offsetTop to force these updates. |
30 | 30 |
31 iframe.style.width = "200px"; | 31 iframe.style.width = "200px"; |
| 32 iframe.offsetTop; |
32 | 33 |
33 var expectedResult = ["mediaList1_1", "mediaList2_1", "mediaList2_2", "media
List3_1"]; | 34 var expectedResult = ["mediaList1_1", "mediaList2_1", "mediaList2_2", "media
List3_1"]; |
34 function verifyResult() { | 35 shouldBe("listenersCalled", "expectedResult"); |
35 shouldBe("listenersCalled", "expectedResult"); | |
36 finishJSTest(); | |
37 } | |
38 </script> | 36 </script> |
OLD | NEW |