Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text-decor/text-decoration-color.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: CSS3 text-decoration-color</title>
<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>