src/third_party/WebKit/LayoutTests/fast/media/media-query-list-listener.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 listeners should fire on changes to matches status.");
   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 mediaList = matchMedia("(max-width: 100px)");
  16     var expectedValue = "";
  17
  18     var tests = [];
  19     var currentTest = 0;
  20     function runNextTest() {
  21         tests[currentTest++]();
  22     }
  23     function listener(list) {
  24         window.mediaListArgument = list;
  25         shouldBe("mediaList.matches", "mediaListArgument.matches");
  26         shouldBe("mediaList.media", "mediaListArgument.media");
  27         shouldBe("mediaList.matches", expectedValue);
  28         runNextTest();
  29     }
  30
  31     mediaList.addListener(listener);
  32
  33     shouldBe("mediaList.matches", "true");
  34
  35     // Should fire.
  36     iframe.style.width = "200px";
  37     expectedValue = "false";
  38
  39     tests.push(function() {
  40         // Should not fire.
  41         iframe.style.width = "250px";
  42         expectedValue = "false";
  43
  44         setTimeout(runNextTest, 20);
  45     });
  46
  47     tests.push(function() {
  48         // Should fire.
  49         iframe.style.width = "80px";
  50         expectedValue = "true";
  51     });
  52
  53     tests.push(function() {
  54         // Should not fire.
  55         mediaList.removeListener(listener);
  56         iframe.style.width = "200px";
  57         iframe.offsetTop;
  58         shouldBe("mediaList.matches", "false");
  59
  60         setTimeout(finishJSTest, 20);
  61     });
  62 </script>