57 lines
1.8 KiB
HTML
57 lines
1.8 KiB
HTML
<!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>
|