| <!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> |
