third_party/WebKit/LayoutTests/fast/media/mq-js-update-media.html

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <style type="text/css" id="styleElement" media="all and (color)">
   5       div { background-color: red; }
   6     </style>
   7     <script src="../../resources/testharness.js"></script>
   8     <script src="../../resources/testharnessreport.js"></script>
   9     <script type="text/javascript">
  10       setup({ "explicit_done": true });
  11       function updateMediaQuery() {
  12           var styleElement = document.getElementById("styleElement");
  13           var divElement = document.getElementById("divElement");
  14           var divComputedStyle = window.getComputedStyle(divElement);
  15
  16           test(function() {
  17                    assert_true(divComputedStyle.backgroundColor == "rgb(255, 0, 0)",
  18                                "Div should have rgb(255, 0, 0) background color.")
  19                },
  20                "Testing that background color is red. Media query \"all and (color)\"");
  21
  22           // update media attribute, background-color should not be red
  23           styleElement.setAttribute("media", "(monochrome) and (color)");
  24
  25           test(function() {
  26                    assert_true(divComputedStyle.backgroundColor == "rgba(0, 0, 0, 0)",
  27                                "New media query doesn't match, div should not have background color.")
  28                },
  29                "Testing that updated media query doesn't match and background color is not red. Media query \"(monochrome) and (color)\"");
  30
  31            // reset media query to original
  32            styleElement.setAttribute("media", "all and (color)");
  33       }
  34     </script>
  35 </head>
  36   <body onload="updateMediaQuery(); done();">
  37     <span>This test verifies that when media query is updated, style is recalculated.</span>
  38     <div id="log"></div>
  39     <div id="divElement"\>
  40     <script>
  41       // update media query while document is parsing
  42       updateMediaQuery();
  43     </script>
  44   </body>
  45 </html>