| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css" id="styleElement" media="all and (color)"> | 4 <style type="text/css" id="styleElement" media="all and (color)"> |
| 5 div { background-color: red; } | 5 div { background-color: red; } |
| 6 </style> | 6 </style> |
| 7 <script src="../../resources/testharness.js"></script> | 7 <script src="../../resources/testharness.js"></script> |
| 8 <script src="../../resources/testharnessreport.js"></script> | 8 <script src="../../resources/testharnessreport.js"></script> |
| 9 <script type="text/javascript"> | 9 <script type="text/javascript"> |
| 10 setup({ "explicit_done": true }); | 10 setup({ "explicit_done": true }); |
| 11 function updateMediaQuery() { | 11 function updateMediaQuery() { |
| 12 var styleElement = document.getElementById("styleElement"); | 12 var styleElement = document.getElementById("styleElement"); |
| 13 var divElement = document.getElementById("divElement"); | 13 var divElement = document.getElementById("divElement"); |
| 14 var divComputedStyle = window.getComputedStyle(divElement); | 14 var divComputedStyle = window.getComputedStyle(divElement); |
| 15 | 15 |
| 16 test(function() { | 16 test(function() { |
| 17 assert_true(divComputedStyle.getPropertyCSSValue('background-
color').getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) == 25
5, | 17 assert_true(divComputedStyle.backgroundColor == "rgb(255, 0,
0)", |
| 18 "Div should have rgb(255, 0, 0) background color.
") | 18 "Div should have rgb(255, 0, 0) background color.
") |
| 19 }, | 19 }, |
| 20 "Testing that background color is red. Media query \"all and (col
or)\""); | 20 "Testing that background color is red. Media query \"all and (col
or)\""); |
| 21 | 21 |
| 22 // update media attribute, background-color should not be red | 22 // update media attribute, background-color should not be red |
| 23 styleElement.setAttribute("media", "(monochrome) and (color)"); | 23 styleElement.setAttribute("media", "(monochrome) and (color)"); |
| 24 | 24 |
| 25 test(function() { | 25 test(function() { |
| 26 assert_true(divComputedStyle.getPropertyCSSValue('background-
color').getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) == 0, | 26 assert_true(divComputedStyle.backgroundColor == "rgba(0, 0, 0
, 0)", |
| 27 "New media query doesn't match, div should not ha
ve background color.") | 27 "New media query doesn't match, div should not ha
ve background color.") |
| 28 }, | 28 }, |
| 29 "Testing that updated media query doesn't match and background co
lor is not red. Media query \"(monochrome) and (color)\""); | 29 "Testing that updated media query doesn't match and background co
lor is not red. Media query \"(monochrome) and (color)\""); |
| 30 | 30 |
| 31 // reset media query to original | 31 // reset media query to original |
| 32 styleElement.setAttribute("media", "all and (color)"); | 32 styleElement.setAttribute("media", "all and (color)"); |
| 33 } | 33 } |
| 34 </script> | 34 </script> |
| 35 </head> | 35 </head> |
| 36 <body onload="updateMediaQuery(); done();"> | 36 <body onload="updateMediaQuery(); done();"> |
| 37 <span>This test verifies that when media query is updated, style is recalcul
ated.</span> | 37 <span>This test verifies that when media query is updated, style is recalcul
ated.</span> |
| 38 <div id="log"></div> | 38 <div id="log"></div> |
| 39 <div id="divElement"\> | 39 <div id="divElement"\> |
| 40 <script> | 40 <script> |
| 41 // update media query while document is parsing | 41 // update media query while document is parsing |
| 42 updateMediaQuery(); | 42 updateMediaQuery(); |
| 43 </script> | 43 </script> |
| 44 </body> | 44 </body> |
| 45 </html> | 45 </html> |
| OLD | NEW |