46 lines
2.0 KiB
HTML
46 lines
2.0 KiB
HTML
<!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>
|