<!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() {
var styleElement = document.getElementById("styleElement");
var divElement = document.getElementById("divElement");
var divComputedStyle = window.getComputedStyle(divElement);
test(function() {
assert_true(divComputedStyle.backgroundColor == "rgb(255, 0, 0)",
"Div should have rgb(255, 0, 0) background color.")
},
"Testing that background color is red. Media query \"all and (color)\"");
// update media attribute, background-color should not be red
styleElement.setAttribute("media", "(monochrome) and (color)");
test(function() {
assert_true(divComputedStyle.backgroundColor == "rgba(0, 0, 0, 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)\"");
// reset media query to original
styleElement.setAttribute("media", "all and (color)");
}
</script>
</head>
<body onload="updateMediaQuery(); 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();
</script>
</body>
</html>
Codebase Browser
chromium