third_party/WebKit/LayoutTests/fast/media/mq-hover.html

   1 <html>
   2 <head>
   3 <title>Test the CSS4 media query "hover" 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             "(hover)",
  19             "(Hover)",
  20             "(hover:none)",
  21             "(hover:NoNe)",
  22             "(hover:on-demand)",
  23             "(hover:oN-dEmAnd)",
  24             "(hover:bogusvalue)",
  25             "(hover:hover)",
  26             "(hover:HoveR)",
  27             "(any-hover)",
  28             "(any-Hover)",
  29             "(any-hover:none)",
  30             "(any-hover:NoNe)",
  31             "(any-hover:on-demand)",
  32             "(any-hover:oN-dEmAnd)",
  33             "(any-hover:bogusvalue)",
  34             "(any-hover:hover)",
  35             "(any-hover:HoveR)"
  36             ];
  37         for (var index=0; index < queries.length; index++) {
  38             log("Query &quot;" + queries[index] + "&quot: " +
  39                 window.matchMedia(queries[index]).matches);
  40         }
  41     }
  42
  43     function runTests()
  44     {
  45         if (!window.internals)
  46             return;
  47
  48         log("------------- with 'on-demand' hover -------------");
  49         internals.settings.setPrimaryHoverType('on-demand');
  50         internals.settings.setAvailableHoverTypes('on-demand');
  51         testQueries();
  52
  53         log("------------- with 'hover' hover -------------");
  54         internals.settings.setPrimaryHoverType('hover');
  55         internals.settings.setAvailableHoverTypes('hover');
  56         testQueries();
  57
  58         log("------------- with 'on-demand' and 'hover' hover, 'hover' is primary -------------");
  59         internals.settings.setPrimaryHoverType('hover');
  60         internals.settings.setAvailableHoverTypes('on-demand,hover');
  61         testQueries();
  62
  63         log("------------- with 'on-demand' and 'hover' hover, 'on-demand' is primary -------------");
  64         internals.settings.setPrimaryHoverType('on-demand');
  65         internals.settings.setAvailableHoverTypes('on-demand,hover');
  66         testQueries();
  67
  68         log("------------- with 'none', 'on-demand' and 'hover' hover, 'none' is primary -------------");
  69         internals.settings.setPrimaryHoverType('none');
  70         internals.settings.setAvailableHoverTypes('none,on-demand,hover');
  71         testQueries();
  72
  73         log("------------- with 'none' hover -------------");
  74         internals.settings.setPrimaryHoverType('none');
  75         internals.settings.setAvailableHoverTypes('none');
  76         testQueries();
  77     }
  78
  79 </script>
  80 </head>
  81 <body onload="runTests()">
  82     <p>Test the <a href="http://www.w3.org/TR/2014/WD-mediaqueries-4-20140605/#hover">(hover)</a> media features.
  83     See <a href="http://crbug.com/136119">Bug 136119</a> for details.</p>
  84
  85     <div id="results">
  86     </div>
  87 </body>
  88 </html>