LayoutTests/fast/media/media-query-list-02.html

   1 <html>
   2 <head>
   3 <title>Test CSSOM View module: MediaQueryList interface</title>
   4 <style type="text/css">
   5
   6 </style>
   7 <script type="text/javascript" charset="utf-8">
   8     if (window.layoutTestController)
   9         layoutTestController.dumpAsText();
  10
  11     function log(m) {
  12         document.getElementById('results').innerHTML += m + '<br>';
  13     }
  14
  15     function callback1(query) {
  16         log("[1] - query " + query.media + " changed to " + (query.matches ? "true" : "false"));
  17     }
  18
  19     function callback2(query) {
  20         log("[2] - query " + query.media + " changed to " + (query.matches ? "true" : "false"));
  21     }
  22
  23     function runTests()
  24     {
  25         if (!window.layoutTestController)
  26             return;
  27
  28         layoutTestController.setViewModeMediaFeature("windowed");
  29
  30         windowedQuery = window.matchMedia("(-webkit-view-mode: windowed)");
  31         floatingQuery = window.matchMedia("(-webkit-view-mode: floating)");
  32         minimizedQuery = window.matchMedia("(-webkit-view-mode: minimized)");
  33         maximizedQuery = window.matchMedia("(-webkit-view-mode: maximized)");
  34
  35         windowedQuery.addListener(callback1);
  36         floatingQuery.addListener(callback1);
  37         minimizedQuery.addListener(callback1);
  38         maximizedQuery.addListener(callback1);
  39
  40         windowedQuery.addListener(callback2);
  41         floatingQuery.addListener(callback2);
  42         minimizedQuery.addListener(callback2);
  43         maximizedQuery.addListener(callback2);
  44
  45         log("------------- minimized -------------");
  46         layoutTestController.setViewModeMediaFeature("minimized");
  47         log("------------- maximized -------------");
  48         layoutTestController.setViewModeMediaFeature("maximized");
  49         log("------------- windowed -------------");
  50         layoutTestController.setViewModeMediaFeature("windowed");
  51         log("------------- floating -------------");
  52         layoutTestController.setViewModeMediaFeature("floating");
  53     }
  54
  55 </script>
  56 </head>
  57 <body onload="runTests()">
  58     <p>Test the MediaQueryList interface: <a href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="CSSOM View Module">http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface</a>.</p>
  59     <p>Testing addListener in different MediaQueryList objects and the callback call sequence</p>
  60     <div id="results">
  61     </div>
  62 </body>
  63 </html>