css-rule-functions.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/dom/css-rule-functions.html
