blob: b4cbcba5ce07c0e6831eb94ec6b2de3cff2dad28 [file] [log] [blame]
<!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>