wpt / css / css-text-decor / text-decoration-color.html

Status: FAIL | Duration: 19ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-text-decor/text-decoration-color.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: CSS3 text-decoration-color</title>
        <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">
        <link rel="match" href="reference/text-decoration-color-ref.html">
        <style>
            .underline {
                text-decoration: underline;
            }
            .overline {
                text-decoration: overline;
            }
            .line-through {
                text-decoration: line-through;
            }
            #blue-underline {
                text-decoration: underline;
                text-decoration-color: blue;
            }
            #gray-overline {
                text-decoration: overline;
                text-decoration-color: gray;
            }
            #green-line-through {
                text-decoration: line-through;
                text-decoration-color: green;
            }
            #transparent-fill {
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1px;
                -webkit-text-stroke-color: black;
            }
            #sys-color {
                -webkit-text-stroke-width: thin;
                -webkit-text-stroke-color: LinkText;
            }
        </style>
    </head>
    <body>
        <h3>Each line of this test should match its text decoration color description:</h3>

        <!-- Valid values for underline, overline and line-through text decoration lines -->
        <div class="underline" style="color: gray; text-decoration-color: blue;">Gray text with blue underline</div><br/>
        <div class="overline" style="color: green; text-decoration-color: black;">Green text with black overline</div><br/>
        <div class="line-through" style="text-decoration-color: gold;">Black text with gold line-through</div><br/>

        <!-- Mix of underline, overline and line-through with different colors for each -->
        <div>
            <span id="blue-underline">
                <span id="gray-overline">
                    <span id="green-line-through">Black text with blue underline, gray overline and green line-through</span>
                </span>
            </span>
        </div><br/>

        <!-- Test behavior on subscript and superscript text -->
        <div>
            <span id="green-line-through">
                <sub id="gray-overline">subscript text</sub>
                <sup id="blue-underline">superscript text</sup>
            </span>
        </div><br/>

        <!-- Test with text-fill-color and text-stroke-color values set -->
        <div class="underline" id="transparent-fill" style="text-decoration-color: green;">Transparent fill with black stroke text and green underline</div><br/>
        <div class="underline" id="sys-color">LinkText stroke and underline with black fill</div><br/>
    </body>
</html>

/css/css-text-decor/reference/text-decoration-color-ref.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Test: CSS3 text-decoration-color</title>
        <style>
            .underline {
                text-decoration: underline;
            }
            .overline {
                text-decoration: overline;
            }
            .line-through {
                text-decoration: line-through;
            }
            .black-fill {
                -webkit-text-fill-color: black;
            }
            .transparent-fill {
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1px;
                -webkit-text-stroke-color: black;
            }
            .sys-color {
                -webkit-text-stroke-width: thin;
                -webkit-text-stroke-color: LinkText;
            }
        </style>
    </head>
    <body>
        <h3>Each line of this test should match its text decoration color description:</h3>
        <div class="underline" style="color: blue;"><span style="-webkit-text-fill-color: gray;">Gray text with blue underline</span></div><br/>
        <div class="overline" style="color: black;"><span style="-webkit-text-fill-color: green;">Green text with black overline</span></div><br/>
        <div class="line-through" style="color: gold;"><span style="-webkit-text-fill-color: black;">Black text with gold line-through</span></div><br/>
        <div class="underline" style="color: blue;">
            <span class="overline" style="color: gray;">
                <span class="line-through" style="color: green;">
                    <span class="black-fill">Black text with blue underline, gray overline and green line-through</span>
                </span>
            </span>
        </div><br/>
        <div class="line-through" style="color: green;">
            <sub class="overline" style="color: gray;"><span class="black-fill">subscript text</span></sub>
            <sup class="underline" style="color: blue;"><span class="black-fill">superscript text</span></sup>
        </div><br/>
        <div class="underline" style="color: green;"><span class="transparent-fill">Transparent fill with black stroke text and green underline</span></div><br/>
        <div class="underline" style="text-decoration-color: LinkText;"><span class="sys-color">LinkText stroke and underline with black fill</span></div><br/>
    </body>
</html>