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

   1 <html>
   2 <head>
   3 <title>Test the Manifest media query "display-mode" features.</title>
   4 <style type="text/css">
   5
   6 </style>
   7 <script type="text/javascript" charset="utf-8">
   8     if (window.testRunner)
   9         testRunner.dumpAsText();
  10
  11     function log(m) {
  12         document.getElementById('results').innerHTML += m + '<br>';
  13     }
  14
  15     function testQueries()
  16     {
  17         var queries = [
  18             "(display-mode)",
  19             "(display-mode: browser)",
  20             "(display-mode: minimal-ui)",
  21             "(display-mode: standalone)",
  22             "(display-mode: fullscreen)",
  23             ];
  24         for (var index=0; index < queries.length; index++) {
  25             log("Query &quot;" + queries[index] + "&quot: " +
  26                 window.matchMedia(queries[index]).matches);
  27         }
  28     }
  29
  30     function runTests()
  31     {
  32         if (!window.internals)
  33             return;
  34
  35         log("------------- with 'browser' display mode -------------");
  36         internals.settings.setDisplayModeOverride('browser');
  37         testQueries();
  38
  39         log("------------- with 'minimal-ui' display mode -------------");
  40         internals.settings.setDisplayModeOverride('minimal-ui');
  41         testQueries();
  42
  43         log("------------- with 'standalone' display mode -------------");
  44         internals.settings.setDisplayModeOverride('standalone');
  45         testQueries();
  46
  47         log("------------- with 'fullscreen' display mode -------------");
  48         internals.settings.setDisplayModeOverride('fullscreen');
  49         testQueries();
  50     }
  51
  52 </script>
  53 </head>
  54 <body onload="runTests()">
  55     <p>Test the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">(display-mode: ...)</a> media features.
  56
  57     <div id="results">
  58     </div>
  59 </body>
  60 </html>