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 |