<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.select::selection {
background-color: red;
}
.t1 .select::selection,
.t2 .select::selection:window-inactive {
background-color: green;
}
</style>
<div id="t1">
<div>
<div class="select">
1
<span></span>
<span></span>
</div>
<div></div>
</div>
</div>
<div id="t2">
<div>
<div class="select">
2
<span></span>
<span></span>
</div>
<div></div>
</div>
</div>
<script>
description("Style invalidation for ::selection");
var red = "rgb(255, 0, 0)";
var green = "rgb(0, 128, 0)";
function setSelection(textNode) {
var range = document.createRange();
range.setStart(textNode, 0);
range.setEnd(textNode, 1);
window.getSelection().addRange(range);
}
var select = document.querySelectorAll(".select");
setSelection(select[0].firstChild);
shouldBe("getComputedStyle(select[0], '::selection').backgroundColor", "red");
document.body.offsetTop; // Force recalc.
t1.className = "t1";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(select[0], '::selection').backgroundColor", "green");
shouldBeDefined(window.testRunner);
testRunner.setWindowIsKey(false);
setSelection(select[1].firstChild);
shouldBe("getComputedStyle(select[1], '::selection').backgroundColor", "red");
document.body.offsetTop; // Force recalc.
t2.className = "t2";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(select[1], '::selection').backgroundColor", "green");
</script>