layout/style/test/test_bug887741_at-rules_in_declaration_lists.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=887741
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 887741: at-rules in declaration lists</title>
   9       <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
  10   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  11   <style>
  12     #foo {
  13         color: red;
  14         @invalid-rule {
  15             ignored: ignored;
  16         }
  17         /* No semicolon */
  18         color: green;
  19     }
  20     @page {
  21         margin-top: 0;
  22         @bottom-center {
  23             content: counter(page);
  24         }
  25         /* No semicolon */
  26         margin-top: 5cm;
  27     }
  28     @keyframes dummy-animation {
  29       12% {
  30         color: red;
  31         @invalid-rule {}
  32         /* No semicolon */
  33         color: green;
  34       }
  35     }
  36     /* TODO: other at-rules that use declaration syntax? */
  37   </style>
  38   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  39 </head>
  40 <body>
  41 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887741">Mozilla Bug 887741</a>
  42 <p id="display"></p>
  43 <div id="content" style="display: none; color: red;
  44                          @invalid-rule{} /* No semicolon */ color: green;">
  45
  46 </div>
  47 <pre id="test">
  48   <script type="application/javascript">
  49
  50   /** Test for Bug 887741 **/
  51
  52   var style = document.getElementById('content').style;
  53   is(style.display, 'none', 'Sanity check: we have the right element');
  54   is(style.color, 'green', 'Support at-rules in style attributes');
  55
  56   style.cssText = 'display: none; color: red; @invalid-rule{} /* No semicolon */ color: lime;';
  57   is(style.color, 'lime', 'Support at-rules in CSSStyleDeclaration.cssText');
  58
  59   var rules = document.styleSheets[0].cssRules;
  60   var style_rule = rules[0];
  61   is(style_rule.selectorText, '#foo', 'Sanity check: we have the right style rule');
  62   is(style_rule.style.color, 'green', 'Support at-rules in style rules');
  63
  64   var page_rule = rules[1];
  65   is(page_rule.type, page_rule.PAGE_RULE, 'Sanity check: we have the right style rule');
  66   is(page_rule.style.marginTop, '5cm', 'Support at-rules in @page rules');
  67
  68   var keyframe_rule = rules[2].cssRules[0];
  69   is(keyframe_rule.keyText, '12%', 'Sanity check: we have the right keyframe rule');
  70   is(keyframe_rule.style.color, 'green', 'Support at-rules in keyframe rules')
  71
  72   </script>
  73 </pre>
  74 </body>
  75 </html>