83 lines
3.3 KiB
HTML
83 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
* {
|
|
background-color: rgb(255, 254, 253);
|
|
}
|
|
foo.property+padding+padding+padding+bar {
|
|
background-color: rgb(1, 2, 3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-case">
|
|
<foo class="foo property bar"></foo>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<bar id="bar-with-renderer"></bar>
|
|
</div>
|
|
<div class="test-case" style="display:none;">
|
|
<foo class="foo property bar"></foo>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<padding></padding>
|
|
<bar id="bar-without-renderer"></bar>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Selectors\' sibling combinators ("+" or "~") create style update relation between elements. This test the case were such relation exists and is removed. This test relies on WebCore\'s internals.');
|
|
|
|
function testUnrelatedElementsAreUnchanged()
|
|
{
|
|
var others = document.querySelectorAll("foo, padding");
|
|
for (var i = 0; i < others.length; ++i)
|
|
shouldBeEqualToString('getComputedStyle(document.querySelectorAll("foo, padding")[' + i + ']).backgroundColor', 'rgb(255, 254, 253)');
|
|
}
|
|
|
|
debug("Initially, the direct adjacent relation is satisfied and we have a match.");
|
|
testUnrelatedElementsAreUnchanged();
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', 'rgb(1, 2, 3)');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', 'rgb(1, 2, 3)');
|
|
|
|
|
|
debug("We remove <bar>, there is nothing matching the rightmost compound selector.");
|
|
var barWithRenderer = document.getElementById("bar-with-renderer");
|
|
barWithRenderer.parentElement.removeChild(barWithRenderer);
|
|
var barWithoutRenderer = document.getElementById("bar-without-renderer");
|
|
barWithoutRenderer.parentElement.removeChild(barWithoutRenderer);
|
|
|
|
// No element should be dirty after the removal. This is testing the invalidation optimization, not correctness.
|
|
if (window.internals) {
|
|
var allContent = document.querySelectorAll(".test-case, .test-case *");
|
|
for (var i = 0; i < allContent.length; ++i)
|
|
shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case *")[' + i + '])');
|
|
}
|
|
|
|
shouldBeNull('document.getElementById("bar-with-renderer")');
|
|
shouldBeNull('document.getElementById("bar-without-renderer")');
|
|
testUnrelatedElementsAreUnchanged();
|
|
|
|
|
|
debug("Now we change a property of <foo>. Doing that can invalidate foo, but not the other elements.");
|
|
|
|
var allFoos = document.querySelectorAll("foo");
|
|
for (var i = 0; i < allFoos.length; ++i)
|
|
allFoos[i].classList.remove("property");
|
|
|
|
// No element should be dirty after the removal. This is testing the invalidation optimization, not correctness.
|
|
if (window.internals) {
|
|
var allContent = document.querySelectorAll(".test-case, .test-case :not(foo)");
|
|
for (var i = 0; i < allContent.length; ++i)
|
|
shouldBeFalse('internals.nodeNeedsStyleRecalc(document.querySelectorAll(".test-case, .test-case :not(foo)")[' + i + '])');
|
|
}
|
|
|
|
shouldBeNull('document.getElementById("bar-with-renderer")');
|
|
shouldBeNull('document.getElementById("bar-without-renderer")');
|
|
testUnrelatedElementsAreUnchanged();
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|