selection-pseudo.html | Explore in Territory

<!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()", "4");
shouldBe("getComputedStyle(select[0], '::selection').backgroundColor", "green");

shouldBeDefined(window.testRunner);
testRunner.setWindowFocus(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()", "4");
shouldBe("getComputedStyle(select[1], '::selection').backgroundColor", "green");
</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/selection-pseudo.html
