OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>CSS3 media query test: stylesheet media.mediaText = parsing, media descri
ptor fallback in document.StyleSheet.media.mediaText</title> | 3 <title>CSS3 media query test: stylesheet media.mediaText = parsing, media descri
ptors not accepted</title> |
4 <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/" /> | 4 <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/" /> |
5 | 5 |
6 <!-- the media property of stylesheet below will be manipulated, and | 6 <!-- the media property of stylesheet below will be manipulated, and |
7 manipulation should respect html media descriptor forward-compatible syntax. | 7 manipulation should respect media queries error handling. |
8 This means the manipulation should succeed. --> | 8 This means the manipulation should succeed and set media to 'not all'. --> |
9 <style type="text/css"> | 9 <style type="text/css"> |
10 | |
11 p#result { color: green;} | |
12 | |
13 @media screen and resolution > 40dpi { | |
14 /* media query with syntax error should fail */ | |
15 /* corresponding DOM manipulation to the mediaText of the stylesheet will succee
d */ | |
16 p#result { color: red;} | 10 p#result { color: red;} |
17 | |
18 } | |
19 </style> | 11 </style> |
20 <script language="javascript"> | 12 <script language="javascript"> |
21 function test() { | 13 function test() { |
22 // this should not throw, because StyleSheet should respect Media Description
forward-compatible syntax | 14 // Setting mediaText should not throw according to the CSSOM spec and yield |
| 15 // 'not all' according to the Media Queries spec. |
23 document.styleSheets[0].media.mediaText = "screen and resolution > 40dpi"; | 16 document.styleSheets[0].media.mediaText = "screen and resolution > 40dpi"; |
24 document.getElementById("result").innerHTML = "This text should be green."; | 17 document.getElementById("result").innerHTML = "This text should not be red."; |
25 } | 18 } |
26 </script> | 19 </script> |
27 | |
28 | |
29 </head> | 20 </head> |
30 <body onload="test()"> | 21 <body onload="test()"> |
31 <p id="result">Failure: test not run</p> | 22 <p id="result">Failure: test not run</p> |
32 </body> | 23 </body> |
33 </html> | 24 </html> |
OLD | NEW |