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", "mediaListArgument");
  26         shouldBe("mediaList.matches", expectedValue);
  27         runNextTest();
  28     }
  29
  30     mediaList.addListener(listener);
  31
  32     shouldBe("mediaList.matches", "true");
  33
  34     // Should fire.
  35     iframe.style.width = "200px";
  36     expectedValue = "false";
  37
  38     tests.push(function() {
  39         // Should not fire.
  40         iframe.style.width = "250px";
  41         expectedValue = "false";
  42
  43         setTimeout(runNextTest, 20);
  44     });
  45
  46     tests.push(function() {
  47         // Should fire.
  48         iframe.style.width = "80px";
  49         expectedValue = "true";
  50     });
  51
  52     tests.push(function() {
  53         // Should not fire.
  54         mediaList.removeListener(listener);
  55         iframe.style.width = "200px";
  56         iframe.offsetTop;
  57         shouldBe("mediaList.matches", "false");
  58
  59         setTimeout(finishJSTest, 20);
  60     });
  61 </script>