2 <script src=
"../../resources/js-test.js"></script>
4 <div id=
"sandbox"></div>
7 description("Media query DOM events should fire (grouped by the MediaQueryList.)");
8 var jsTestIsAsync
= true;
10 var sandbox
= document
.getElementById("sandbox");
11 var iframe
= document
.createElement("iframe");
12 sandbox
.appendChild(iframe
);
14 var matchMedia
= iframe
.contentWindow
.matchMedia
;
15 var mediaList1
= matchMedia("(max-width: 100px)");
16 var mediaList2
= matchMedia("(max-width: 100px)");
17 var mediaList3
= matchMedia("(max-width: 100px)");
19 var listenersCalled
= [];
21 function makeListener(label
) {
22 return function() { listenersCalled
.push(label
); };
25 mediaList3
.addEventListener("change", makeListener("mediaList3_1"), false);
26 mediaList2
.addEventListener("change", makeListener("mediaList2_1"), false);
27 mediaList1
.addEventListener("change", makeListener("mediaList1_1"), false);
28 mediaList2
.onchange
= makeListener("mediaList2_2");
29 mediaList3
.addEventListener("change", verifyResult
, false);
31 iframe
.style
.width
= "200px";
33 var expectedResult
= ["mediaList1_1", "mediaList2_1", "mediaList2_2", "mediaList3_1"];
34 function verifyResult() {
35 shouldBe("listenersCalled", "expectedResult");