72 lines
3.6 KiB
HTML
72 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
target { display:block; background-color: rgb(1, 2, 3); }
|
|
target:first-child { }
|
|
target:last-child { }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="display:none">
|
|
<target id=target1></target>
|
|
<target id=target2></target>
|
|
<target id=target3></target>
|
|
<target id=target4></target>
|
|
</div>
|
|
|
|
<script>
|
|
function findRuleWithSelector(selector)
|
|
{
|
|
var styleSheets = document.styleSheets;
|
|
for (var styleSheetIndex = 0, styleSheetCount = styleSheets.length; styleSheetIndex < styleSheetCount; ++styleSheetIndex) {
|
|
var styleSheet = styleSheets[styleSheetIndex];
|
|
var rules = styleSheet.cssRules;
|
|
for (var ruleIndex = 0, ruleCount = rules.length; ruleIndex < ruleCount; ++ruleIndex) {
|
|
var rule = rules[ruleIndex];
|
|
if (rule.selectorText === selector)
|
|
return rule;
|
|
}
|
|
}
|
|
}
|
|
|
|
description("Test that changing an empty rule with CSSOM updates the elements correctly.");
|
|
debug('Before changing the rules');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target1")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target2")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target3")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target4")).backgroundColor','"rgb(1, 2, 3)"');
|
|
|
|
debug('Changing the first-child rule');
|
|
findRuleWithSelector('target:first-child').style.backgroundColor = 'rgb(4, 5, 6)';
|
|
shouldBe('window.getComputedStyle(document.getElementById("target1")).backgroundColor','"rgb(4, 5, 6)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target2")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target3")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target4")).backgroundColor','"rgb(1, 2, 3)"');
|
|
|
|
debug('Changing the last-child rule');
|
|
findRuleWithSelector('target:last-child').style.backgroundColor = 'rgb(7, 8, 9)';
|
|
shouldBe('window.getComputedStyle(document.getElementById("target1")).backgroundColor','"rgb(4, 5, 6)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target2")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target3")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target4")).backgroundColor','"rgb(7, 8, 9)"');
|
|
|
|
debug('Emptying the first-child rule');
|
|
findRuleWithSelector('target:first-child').style.backgroundColor = '';
|
|
shouldBe('window.getComputedStyle(document.getElementById("target1")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target2")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target3")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target4")).backgroundColor','"rgb(7, 8, 9)"');
|
|
|
|
debug('Emptying the last-child rule');
|
|
findRuleWithSelector('target:last-child').style.backgroundColor = '';
|
|
shouldBe('window.getComputedStyle(document.getElementById("target1")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target2")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target3")).backgroundColor','"rgb(1, 2, 3)"');
|
|
shouldBe('window.getComputedStyle(document.getElementById("target4")).backgroundColor','"rgb(1, 2, 3)"');
|
|
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|