LayoutTests/fast/media/media-query-list-01.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     {
  13         var results = document.getElementById('results');
  14         results.innerHTML += m + '<br>';
  15     }
  16
  17     function testQuery(query, expected)
  18     {
  19         var isTrue = window.matchMedia(query).matches;
  20         var message = '\"' + query + '\" evaluates to ' + (isTrue ? 'true' : 'false');
  21         message += (isTrue == expected) ? ': PASS' : ': FAIL';
  22         log(message);
  23     }
  24
  25     function runTests()
  26     {
  27         testQuery('screen', true);
  28         testQuery('projection', false);
  29
  30         testQuery('all and (color)', true);
  31         testQuery('not projection and (color)', true);
  32         testQuery('(color)', true);
  33         testQuery('(color', false);
  34         testQuery('color', false);
  35
  36         testQuery('garbage', false);
  37
  38         testQuery('(min-device-width: 100px)', true);
  39         testQuery('(min-device-width: 50000px)', false);
  40
  41         testQuery('(-webkit-animation: 1)', true);
  42         testQuery('(-webkit-transform-2d)', true);
  43     }
  44
  45 </script>
  46 </head>
  47 <body onload="runTests()">
  48     <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>
  49     <div id="results">
  50     </div>
  51 </body>
  52 </html>