| <html> |
| <head> |
| <title>CSS3 media query test: @media css rule media.mediaText property parsing, media query syntax error should be handled correctly.</title> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/media.html" /> |
| |
| <style type="text/css"> |
| p#result {color: green} |
| |
| @media not screen { |
| /* query will be modified from javascript */ |
| /* the manipulation contains syntax error, and should fail */ |
| p#result {color: red} |
| } |
| |
| @media screen and resolution > 40dpi { |
| /* media query with syntax error should fail */ |
| /* corresponding DOM manipulation will fail */ |
| p#result {color: red} |
| } |
| </style> |
| <script language="javascript"> |
| function test() { |
| // The following is valid according to the CSS 2.1 note: "Media Queries |
| // supercedes this error handling.", as it is malformed and should be |
| // represented as "not all". |
| try { |
| document.styleSheets[0].cssRules[1].media.mediaText = "screen and resolution > 40dpi"; |
| document.getElementById("result").innerHTML = "This text should be green."; |
| document.getElementById("details").innerHTML = "New media: " + document.styleSheets[0].cssRules[1].media.mediaText; |
| } catch(e) { |
| document.getElementById("details").innerHTML = "An exception was caught: " + e |
| } |
| } |
| </script> |
| |
| </head> |
| <body onload="test()"> |
| <p id="result">Failure: test not run</p> |
| <p id="details"></p> |
| </body> |
| </html> |
