44 lines
2.0 KiB
HTML
44 lines
2.0 KiB
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;
|
|
}
|
|
</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/>
|
|
</body>
|
|
</html>
|