| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| |
| <div id="sandbox"></div> |
| |
| <script> |
| description("Media query DOM events should fire (grouped by the MediaQueryList.)"); |
| var jsTestIsAsync = true; |
| |
| var sandbox = document.getElementById("sandbox"); |
| var iframe = document.createElement("iframe"); |
| sandbox.appendChild(iframe); |
| |
| var matchMedia = iframe.contentWindow.matchMedia; |
| var mediaList1 = matchMedia("(max-width: 100px)"); |
| var mediaList2 = matchMedia("(max-width: 100px)"); |
| var mediaList3 = matchMedia("(max-width: 100px)"); |
| |
| var listenersCalled = []; |
| |
| function makeListener(label) { |
| return function() { listenersCalled.push(label); }; |
| } |
| |
| mediaList3.addEventListener("change", makeListener("mediaList3_1"), false); |
| mediaList2.addEventListener("change", makeListener("mediaList2_1"), false); |
| mediaList1.addEventListener("change", makeListener("mediaList1_1"), false); |
| mediaList2.onchange = makeListener("mediaList2_2"); |
| mediaList3.addEventListener("change", verifyResult, false); |
| |
| iframe.style.width = "200px"; |
| |
| var expectedResult = ["mediaList1_1", "mediaList2_1", "mediaList2_2", "mediaList3_1"]; |
| function verifyResult() { |
| shouldBe("listenersCalled", "expectedResult"); |
| finishJSTest(); |
| } |
| </script> |
