| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <style id="style1"> |
| div.div1 { color:red } |
| </style> |
| |
| <style id="style2"> |
| div.div3 {color: yellow } |
| </style> |
| |
| <style id="style3"> |
| div.div5 {color: purple } |
| </style> |
| |
| <script> |
| function debug(str) { |
| var c = document.getElementById('console') |
| c.appendChild(document.createTextNode(str + '\n')); |
| } |
| |
| function runTests() { |
| var s1 = document.getElementById('style1').sheet; |
| |
| // First append a style rule |
| s1.insertRule('div.div2 {color: blue}', s1.cssRules.length) |
| |
| // Next, remove the first style rule |
| s1.deleteRule(0) |
| |
| var s1 = document.getElementById('style2').sheet; |
| |
| // Append a rule using the IE method |
| s1.addRule('div.div4', 'color: green'); |
| |
| // Remove a rule using the IE method; |
| s1.removeRule(0) |
| |
| var s3 = document.getElementById('style3').sheet; |
| s3.disabled = true; |
| } |
| |
| </script> |
| </head> |
| <body onload="runTests();"> |
| <pre id="console"> |
| </pre> |
| 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. |
| <div class="div1">This is div1. This text should not be red because that rule has been removed.</div> |
| <div class="div2">This is div2. This text should be blue because a matching rule with that property has been added.</div> |
| <div class="div3">This is div3. This text should not be yellow because that rule has been removed.</div> |
| <div class="div4">This is div4. This text should be green because a matching rule with that property has been added.</div> |
| <div class="div5">This is div3. This text should not be purple because the stylesheet with that rule has been disabled.</div> |
| </body> |
| </html> |
