<!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>