blob: a3085a893cdc3ffa0b8f340d0c34281984baf211 [file] [log] [blame]
<style type="text/css" id="styleElement" media="all and (color)">
div { background-color: red; }
<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)");
<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"\>
// update media query while document is parsing