<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
<link rel="match" href="selection-decoration-p1-ref.html">
<meta name="assert" value="originating underlines and overlines are never painted over text, even when some of the text is selected">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
    /*
        The idea behind this test is that the underline should be
        completely obscured by both the selected and unselected text.

        Note that the former is not yet actually tested here, because
        originating decoration recoloring essentially makes it
        impossible to tell whether the text or underline is on top
        (this can be fixed by highlighting the unselected text with
        some other highlight pseudo, so recoloring doesn’t apply).

        Chromium fails in /c/2902289 and passes in /c/2903387.
    */
    * {
        text-decoration-skip-ink: none;
        text-decoration-skip: none;
    }
    main {
        font: 7em Ahem;
        margin: 0.5em;
        width: min-content;
        text-decoration: 0.25em red solid underline;
        /* try to keep decoration between ascent and descent */
        text-underline-offset: -0.5em;
    }
    main::selection {
        background: transparent;
    }
</style>
<p>Test passes if there is no red below.
<main class="highlight_reftest">XX</main>
<script>
    const target = document.querySelector("main");
    selectRangeWith(range => {
        range.selectNodeContents(target);
        range.setStart(target.childNodes[0], 0);
        range.setEnd(target.childNodes[0], 1);
    });
</script>