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

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3
   4 <div id="sandbox"></div>
   5
   6 <script>
   7     description("Media query DOM events should fire (grouped by the MediaQueryList.)");
   8     var jsTestIsAsync = true;
   9
  10     var sandbox = document.getElementById("sandbox");
  11     var iframe = document.createElement("iframe");
  12     sandbox.appendChild(iframe);
  13
  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)");
  18
  19     var listenersCalled = [];
  20
  21     function makeListener(label) {
  22         return function() { listenersCalled.push(label); };
  23     }
  24
  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);
  30
  31     iframe.style.width = "200px";
  32
  33     var expectedResult = ["mediaList1_1", "mediaList2_1", "mediaList2_2", "mediaList3_1"];
  34     function verifyResult() {
  35         shouldBe("listenersCalled", "expectedResult");
  36         finishJSTest();
  37     }
  38 </script>