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