blob: d87d4c7e1f5b344e7da977e4db24b7b554df8398 [file] [log] [blame]
<!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>