<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
/* Rule to set childrenAffectedByDirectAdjacentRules() on #parent */
div + #x { color: orange }
/* Rule to cause subtree recalc on #c1 when className set to c1. */
.c1 * { background-color: green }
/* Rule to cause subtree recalc on div sibling of #c2 when className set to c2. */
.c2 + div * { background-color: green }
</style>
<div id="parent">
<div id="c1">
<span>This text should be green</span>
<span>This text should be green</span>
</div>
<div>
<span></span>
<span></span>
</div>
<div id="c2">
<span></span>
<span></span>
</div>
<div>
<span>This text should be green</span>
<span>This text should be green</span>
</div>
<div>
<span></span>
<span></span>
</div>
<div id="x"></div>
</div>
<script>
description("A subtree invalidation should not invalidation sibling forest");
var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";
var c1Spans = c1.querySelectorAll("span");
shouldBe("getComputedStyle(c1Spans[0]).backgroundColor", "transparent");
shouldBe("getComputedStyle(c1Spans[1]).backgroundColor", "transparent");
var c2Spans = document.querySelectorAll("#c2 + div span");
shouldBe("getComputedStyle(c2Spans[0]).backgroundColor", "transparent");
shouldBe("getComputedStyle(c2Spans[1]).backgroundColor", "transparent");
document.body.offsetTop; // force recalc
c1.className = "c1";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
shouldBe("getComputedStyle(c1Spans[0]).backgroundColor", "green");
shouldBe("getComputedStyle(c1Spans[1]).backgroundColor", "green");
document.body.offsetTop; // force recalc
c2.className = "c2";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
shouldBe("getComputedStyle(c2Spans[0]).backgroundColor", "green");
shouldBe("getComputedStyle(c2Spans[1]).backgroundColor", "green");
</script>