third_party/WebKit/LayoutTests/fast/media/mq-display-mode-fullscreen.html

   1 <html>
   2 <head>
   3 <title>Test the media query "display-mode" features.</title>
   4 <script src="../../fullscreen/trusted-event.js"></script>
   5 <script>
   6     if (window.testRunner) {
   7         testRunner.dumpAsText();
   8         testRunner.waitUntilDone();
   9     }
  10
  11     function log(m) {
  12         document.getElementById('results').innerHTML += m + '<br>';
  13     }
  14
  15     function testQueries() {
  16         var queries = [
  17             "(display-mode)",
  18             "(display-mode: browser)",
  19             "(display-mode: minimal-ui)",
  20             "(display-mode: standalone)",
  21             "(display-mode: fullscreen)",
  22             ];
  23         for (var index=0; index < queries.length; index++) {
  24             log("Query &quot;" + queries[index] + "&quot: " +
  25                 window.matchMedia(queries[index]).matches);
  26         }
  27     }
  28
  29     function runTests() {
  30         var div = document.querySelector("div");
  31         document.onwebkitfullscreenchange = function() {
  32             log("------------- entered fullscreen -------------");
  33             testQueries();
  34
  35             document.onwebkitfullscreenchange = function() {
  36                 log("------------- left fullscreen -------------");
  37                 testQueries();
  38                 if (window.testRunner)
  39                     testRunner.notifyDone();
  40             }
  41             document.exitFullscreen();
  42         }
  43         trusted_event(function() {
  44             log("------------- before entering fullscreen -------------");
  45             testQueries();
  46             div.webkitRequestFullscreen();
  47         }, document.body);
  48     }
  49 </script>
  50 </head>
  51 <body onload="runTests()">
  52     <p>Test the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">(display-mode: ...)</a>
  53     media features while the browser window entering/leaving fullscreen mode.</p>
  54     <div id="results"></div>
  55 </body>
  56 </html>