third_party/WebKit/LayoutTests/fast/media/media-query-list-dom-events.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!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>