<!doctype html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<style>
rightmost .target {
    color:rgb(0,0,0);
    background-color:rgb(0, 0, 0);
}
rightmost .target:last-child {
    color:rgb(1,2,3);
}
rightmost .target:not(:last-child) {
    background-color:rgb(4, 5, 6);
}

ancestor .target {
    color:rgb(255, 255, 255);
    background-color:rgb(255, 255, 255);
}
ancestor .parent:last-child .target {
    color:rgb(7, 8, 9);
}
ancestor .parent:not(:last-child) .target {
    background-color:rgb(10, 11, 12);
}
</style>
</head>
<body>
<div style="display:none">
    <rightmost>
        <span id="target1" class="target"></span>
        <span id="target2" class="target"></span>
        <span id="target3" class="target"></span>
    </rightmost>
    <ancestor>
        <span class="parent">
            <span id="target4" class="target"></span>
        </span>
        <span class="parent">
            <span id="target5" class="target"></span>
        </span>
        <span class="parent">
            <span id="target6" class="target"></span>
        </span>
    </ancestor>
</div>
</body>
<script>
description("When updating the tree, the style needs to be invalidated when the :last-child changes, even if there is no renderer.");

debug("Base case for rightmost element with :last-child");
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(0, 0, 0)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(1, 2, 3)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(4, 5, 6)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(0, 0, 0)');


var target3 = document.getElementById("target3");
var parentElement = target1.parentElement;
parentElement.removeChild(target3);

debug("Removed first child (target3)");
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)');

parentElement.insertBefore(target3, parentElement.firstChild);

debug("Add back target3 at the start");
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(0, 0, 0)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)');

debug("Base case for a styled element with an ancestor affected by :last-child");
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(7, 8, 9)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(10, 11, 12)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(255, 255, 255)');

var target6Parent = document.getElementById("target6").parentElement;
var parentElement = target6Parent.parentElement;
parentElement.removeChild(target6Parent);

debug("Removed last child (target6's parent)");
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)');
debug("Add back target6's parent at the end");
parentElement.insertBefore(target6Parent, parentElement.firstChild);
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(255, 255, 255)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)');
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)');
</script>
<script src="../../../resources/js-test-post.js"></script>
</html>