80 lines
2.4 KiB
HTML
80 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
* {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
:nth-last-child(n of foo, bar, *, .target) {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
:root {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-case">
|
|
<parent id="parent1">
|
|
<target></target>
|
|
<target id="target1"></target>
|
|
</parent>
|
|
</div>
|
|
<div class="test-case" style="display:none;">
|
|
<parent id="parent2">
|
|
<target></target>
|
|
<target id="target2"></target>
|
|
</parent>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Verify that style invalidation of elements affected by :nth-last-child() no not cause an invalidation storm.');
|
|
|
|
// Force a layout.
|
|
document.documentElement.offsetTop;
|
|
|
|
// Nothing should need a style recalc.
|
|
var allContent = document.querySelectorAll("*");
|
|
for (var i = 0; i < allContent.length; ++i) {
|
|
if (internals.nodeNeedsStyleRecalc(allContent[i])) {
|
|
testFailed("Invalid initial state, node " + i + " has dirty style.");
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Change the class of target1, this could change the order of rules and need to cause a style recalc.
|
|
var target1 = document.getElementById('target1');
|
|
target1.className = 'target';
|
|
|
|
var allContent = document.querySelectorAll("*");
|
|
for (var i = 0; i < allContent.length; ++i) {
|
|
var node = allContent[i];
|
|
if (internals.nodeNeedsStyleRecalc(node)) {
|
|
if (node !== target1 && node !== target1.previousElementSibling) {
|
|
testFailed("Invalidating the style of target1 should never invalidate more than target1 and its siblings.");
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
document.documentElement.offsetTop;
|
|
|
|
// Change the class of target1, this could change the order of rules and need to cause a style recalc.
|
|
var target2 = document.getElementById('target2');
|
|
target2.className = 'target';
|
|
|
|
var allContent = document.querySelectorAll("*");
|
|
for (var i = 0; i < allContent.length; ++i) {
|
|
var node = allContent[i];
|
|
if (internals.nodeNeedsStyleRecalc(node)) {
|
|
if (node !== target2 && node !== target2.previousElementSibling) {
|
|
testFailed("Invalidating the style of target2 should never invalidate more than target1 and its siblings.");
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|