selection-repaint.html | Explore in Territory

<!DOCTYPE html>
<style>
    #t1::selection {
        background-color: transparent;
        color: red
    }
    .green::selection {
        color: green !important
    }
</style>
<span id="t1">This text </span><span id="t2">should be green.</span>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    function setSelection(startNode, endNode) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.setStart(startNode, 0);
        range.setEnd(endNode, endNode.data.length);
        window.getSelection().addRange(range);
    }

    setSelection(t1.firstChild, t2.firstChild);
    requestAnimationFrame(() =>
        requestAnimationFrame(() => {
            t1.className = "green";
            t2.className = "green";
            if (window.testRunner)
                testRunner.notifyDone();
        }));
</script>

chromium/third_party/blink/web_tests/paint/invalidation/selection/selection-repaint.html