<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
.t1 .sibling + *,
.t2 .sibling ~ *,
.t3 .sibling + :hover,
.t4 + .sibling,
.t5 + *,
.t6 ~ .sibling,
.t7 + * + * .child,
.t8 + :-webkit-any(.sibling) * { background-color: rgb(0, 128, 0); }
#r3 { width: 10px; height: 10px }
</style>
<div>
<div id="t1">
<div class="sibling"></div>
<div id="r1"></div>
</div>
</div>
<div>
<div id="t2">
<div class="sibling"></div>
<div></div>
<div id="r2"></div>
</div>
</div>
<div>
<div id="t3">
<div class="sibling"></div>
<div id="r3"></div>
</div>
</div>
<div>
<div id="t4"></div>
<div id="r4" class="sibling">
<div></div>
<div></div>
</div>
<div class="sibling"></div>
</div>
<div>
<div id="t5"></div>
<div id="r5">
<div></div>
<div></div>
</div>
<div></div>
</div>
<div>
<div id="t6"></div>
<div></div>
<div id="r6" class="sibling">
<div></div>
<div></div>
</div>
<div></div>
</div>
<div>
<div id="t7">
<div class="child"></div>
</div>
<div>
<div class="child"></div>
<div></div>
</div>
<div>
<div id="r7" class="child"></div>
<div></div>
</div>
<div>
<div class="child"></div>
</div>
</div>
<div>
<div id="t8"></div>
<div class="sibling">
<div id="r8"></div>
</div>
</div>
<script>
document.body.offsetTop;
test(function() {
assert_true(!!window.internals, "This test only works with internals exposed present");
}, "internals are exposed");
test(function() {
assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t1.className = "t1";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Adjacent with universal selector");
test(function() {
assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t2.className = "t2";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc");
assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Indirect adjacent with universal selector");
test(function() {
assert_true(!!window.eventSender, "This test only works with eventSender present");
eventSender.mouseMoveTo(r3.offsetLeft + 1, r3.offsetTop + 1);
assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t3.className = "t3";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Adjacent with universal :hover selector");
test(function() {
assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t4.className = "t4";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Class change affecting selector for sibling class");
test(function() {
assert_equals(getComputedStyle(r5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t5.className = "t5";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Class change affecting all sibling subtrees through a universal selector");
test(function() {
assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t6.className = "t6";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Class change affecting all sibling subtrees through an indirect adjacent combinator");
test(function() {
assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t7.className = "t7";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Class change affecting sibling descendants through a universal selector");
test(function() {
assert_equals(getComputedStyle(r8).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
t8.className = "t8";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Class change affecting universal descendants of webkit-any sibling");
</script>
