third_party/WebKit/LayoutTests/fast/media/mq-js-media-except-02.html

   1 <html>
   2 <head>
   3 <title>CSS3 media query test: @media css rule media.mediaText property parsing, media query syntax error should be handled correctly.</title>
   4 <link rel="help" href="http://www.w3.org/TR/CSS21/media.html" />
   5
   6 <style type="text/css">
   7 p#result {color: green}
   8
   9 @media not screen {
  10 /* query will be modified from javascript */
  11 /* the manipulation contains syntax error, and should fail */
  12 p#result {color: red}
  13 }
  14
  15 @media screen and resolution > 40dpi {
  16 /* media query with syntax error should fail */
  17 /* corresponding DOM manipulation will fail */
  18 p#result {color: red}
  19 }
  20 </style>
  21 <script language="javascript">
  22 function test() {
  23     // The following is valid according to the CSS 2.1 note: "Media Queries
  24     // supercedes this error handling.", as it is malformed and should be
  25     // represented as "not all".
  26     try {
  27         document.styleSheets[0].cssRules[1].media.mediaText = "screen and resolution > 40dpi";
  28         document.getElementById("result").innerHTML = "This text should be green.";
  29         document.getElementById("details").innerHTML = "New media: " + document.styleSheets[0].cssRules[1].media.mediaText;
  30     } catch(e) {
  31         document.getElementById("details").innerHTML = "An exception was caught: " + e
  32     }
  33 }
  34 </script>
  35
  36 </head>
  37 <body onload="test()">
  38 <p id="result">Failure: test not run</p>
  39 <p id="details"></p>
  40 </body>
  41 </html>