<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#t1 div + .test { background-color: green }
#t2 div ~ .test { background-color: green }
#t3 :not(.nomatch) .test { background-color: green }
</style>
<div id="t1">
<div></div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="t2">
<div></div>
<span></span>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="t3">
<div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
description("Class selectors in rightmost compound selector should cause LocalStyleChange even if we cannot use invalidation sets.");
var tests = [
[ "#t1 > div + div", 1 ],
[ "#t2 > div ~ div", 1 ],
[ "#t3 > div > div", 1 ]
];
var green = 'rgb(0, 128, 0)';
for (var i=0; i<tests.length; i++) {
var test = tests[i];
var elm = document.querySelector(test[0]);
document.body.offsetLeft;
elm.className = "test";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "" + test[1]);
shouldBe("getComputedStyle(elm, null).backgroundColor", "green");
}
</script>
