third_party/WebKit/LayoutTests/fast/dom/css-rule-functions.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2         "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <style id="style1">
   6     div.div1 { color:red }
   7 </style>
   8
   9 <style id="style2">
  10     div.div3 {color: yellow }
  11 </style>
  12
  13 <style id="style3">
  14     div.div5 {color: purple }
  15 </style>
  16
  17 <script>
  18 function debug(str) {
  19     var c = document.getElementById('console')
  20     c.appendChild(document.createTextNode(str + '\n'));
  21 }
  22
  23 function runTests() {
  24     var s1 = document.getElementById('style1').sheet;
  25
  26     // First append a style rule
  27     s1.insertRule('div.div2 {color: blue}', s1.cssRules.length)
  28
  29     // Next, remove the first style rule
  30     s1.deleteRule(0)
  31
  32     var s1 = document.getElementById('style2').sheet;
  33
  34     // Append a rule using the IE method
  35     s1.addRule('div.div4', 'color: green');
  36
  37     // Remove a rule using the IE method;
  38     s1.removeRule(0)
  39
  40     var s3 = document.getElementById('style3').sheet;
  41     s3.disabled = true;
  42 }
  43
  44 </script>
  45 </head>
  46 <body onload="runTests();">
  47 <pre id="console">
  48 </pre>
  49 This tests that insertRule, deleteRule, and the IE extensions addRule and removeRule update the style when rules are added and removed. It also tests that disabling a stylesheet updates the style.
  50 <div class="div1">This is div1. This text should not be red because that rule has been removed.</div>
  51 <div class="div2">This is div2. This text should be blue because a matching rule with that property has been added.</div>
  52 <div class="div3">This is div3. This text should not be yellow because that rule has been removed.</div>
  53 <div class="div4">This is div4. This text should be green because a matching rule with that property has been added.</div>
  54 <div class="div5">This is div3. This text should not be purple because the stylesheet with that rule has been disabled.</div>
  55 </body>
  56 </html>