<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css" id="styleElement" media="all and (color)">
      div { background-color: red; }
    </style>
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <script type="text/javascript">
      setup({ "explicit_done": true });
      function updateMediaQuery(id) {
          var styleElement = document.getElementById("styleElement");
          var divElement = document.getElementById("divElement");
          var divComputedStyle = window.getComputedStyle(divElement);

          test(function() {
                   assert_true(divComputedStyle.getPropertyCSSValue('background-color').getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) == 255,
                               "Div should have rgb(255, 0, 0) background color.")
               },
               "Testing that background color is red. Media query \"all and (color)\" " + id);

          // update media attribute, background-color should not be red
          styleElement.setAttribute("media", "(monochrome) and (color)");

          test(function() {
                   assert_true(divComputedStyle.getPropertyCSSValue('background-color').getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) == 0,
                               "New media query doesn't match, div should not have background color.")
               },
               "Testing that updated media query doesn't match and background color is not red. Media query \"(monochrome) and (color)\" " + id);

           // reset media query to original
           styleElement.setAttribute("media", "all and (color)");
      }
    </script>
</head>
  <body onload="updateMediaQuery(2); done();">
    <span>This test verifies that when media query is updated, style is recalculated.</span>
    <div id="log"></div>
    <div id="divElement"\>
    <script>
      // update media query while document is parsing
      updateMediaQuery(1);
    </script>
  </body>
</html>