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