<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: CSS3 text-decoration-color when |::selection| exists</title>
        <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">
        <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
        <link rel="match" href="reference/text-decoration-color-selection-001-ref.html">
        <style>
            #transparent-fill {
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1px;
                -webkit-text-stroke-color: black;
            }

            .underline {
                text-decoration: underline;
                color: gray;
                text-decoration-color: blue;
            }
            .overline {
                text-decoration: overline;
                color: green;
                text-decoration-color: black;
            }
            .line-through {
                text-decoration: line-through;
                color: violet;
                text-decoration-color: gold;
            }
            .underline::selection {
                color: brown;
                text-decoration-color: pink;
            }
            .overline::selection {
                color: purple;
                text-decoration-color: skyblue;
            }
            .line-through::selection {
                color: orange;
                text-decoration-color: magenta;
            }

            .empty-selection-underline {
                text-decoration: underline;
                color: red;
                text-decoration-color: blue;
            }

            .margin-bottom {
                margin-bottom: 20px;
            }
        </style>
        <script>
            function startTest() {
                var targetRange = document.createRange();
                /* We first create an empty range */
                targetRange.selectNodeContents(document.getElementById("wrapper"));
                /* Then we set the range boundaries to the children of div#wrapper */
                window.getSelection().addRange(targetRange);
                /* Finally, we now select such range of content */
            }
        </script>
    </head>
    <body onload="startTest();">
        <h3>Each line of this test should match its text decoration color description:</h3>

        <div id="wrapper">
            <!-- Test with text-fill-color and text-stroke-color values set -->
            <div class="underline margin-bottom" id="transparent-fill" >Transparent fill with black stroke text and pink underline</div>

            <!-- Valid values for underline, overline and line-through text decoration lines when selected-->
            <div class="underline margin-bottom">Brown text with pink underline</div>
            <div class="overline margin-bottom">Purple text with skyblue overline</div>
            <div class="line-through margin-bottom">Orange text with magenta line-through</div>

            <!-- When there is a selection but no |::selection| style exists. It should preserve the
                 style as it is. -->
            <div class="empty-selection-underline margin-bottom">Red text with blue underline</div>
        </div>
    </body>
</html>