111 lines
5.4 KiB
HTML
111 lines
5.4 KiB
HTML
<!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:first-child {
|
|
color:rgb(1,2,3);
|
|
}
|
|
rightmost .target:not(:first-child) {
|
|
background-color:rgb(4, 5, 6);
|
|
}
|
|
|
|
ancestor .target {
|
|
color:rgb(255, 255, 255);
|
|
background-color:rgb(255, 255, 255);
|
|
}
|
|
ancestor .parent:first-child .target {
|
|
color:rgb(7, 8, 9);
|
|
}
|
|
ancestor .parent:not(:first-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 :first-child changes, even if there is no renderer.");
|
|
|
|
debug("Base case for rightmost element with :first-child");
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(1, 2, 3)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(4, 5, 6)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)');
|
|
|
|
|
|
var target1 = document.getElementById("target1");
|
|
var parentElement = target1.parentElement;
|
|
parentElement.removeChild(target1);
|
|
|
|
debug("Removed first child (target1)");
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)');
|
|
|
|
parentElement.appendChild(target1);
|
|
|
|
debug("Add back target1 at the end");
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(1, 2, 3)');
|
|
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")).backgroundColor', 'rgb(0, 0, 0)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(4, 5, 6)');
|
|
|
|
|
|
debug("Base case for a styled element with an ancestor affected by :first-child");
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(7, 8, 9)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(10, 11, 12)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)');
|
|
|
|
var target4Parent = document.getElementById("target4").parentElement;
|
|
var parentElement = target4Parent.parentElement;
|
|
parentElement.removeChild(target4Parent);
|
|
|
|
debug("Removed first child (target4's parent)");
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)');
|
|
|
|
debug("Add back target4's parent at the end");
|
|
parentElement.appendChild(target4Parent);
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(7, 8, 9)');
|
|
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")).backgroundColor', 'rgb(255, 255, 255)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(10, 11, 12)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(10, 11, 12)');
|
|
</script>
|
|
<script src="../../../resources/js-test-post.js"></script>
|
|
</html>
|