<!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 &lt;bar&gt;, 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 &lt;foo&gt;. 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>