<!DOCTYPE html>
<html>
<head>
<title>CSS Test: CSS3 text-decoration-color repaint</title>
<meta name="flags" content="ahem"/>
<script>
if (window.testRunner)
testRunner.dumpAsText();
</script>
<script>
function runRepaintTest() {
document.getElementById("test-underline").style.textDecorationColor = 'gray';
document.getElementById("test-overline").style.textDecorationColor = 'yellow';
document.getElementById("test-line-through").style.textDecorationColor = 'white';
document.getElementById("test-parent").style.textDecorationColor = 'green';
document.getElementById("test-ancestor-1").style.textDecorationColor = 'black';
document.getElementById("test-ancestor-2").style.textDecorationColor = 'inherit';
document.getElementById("test-mixed-1").style.textDecorationColor = 'black';
document.getElementById("test-mixed-2").style.textDecorationColor = 'green';
document.getElementById("test-mixed-3").style.textDecorationColor = 'blue';
}
</script>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
</style>
</head>
<body onload="runRepaintTest();" style="font: 10px Ahem; -webkit-font-smoothing: none;">
<!-- Green text with gray underline on repaint -->
<p><span class="underline" id="test-underline" style="color: green;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>
<!-- Navy text with yellow overline on repaint -->
<p><span class="overline" id="test-overline" style="color: navy;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>
<!-- Black text with white line-through on repaint -->
<p><span class="line-through" id="test-line-through" style="color: black;">lorem ipsum <sub>ipsum</sub> <sup>ipsum</sup></span></p>
<!-- Parent color is grey, with green underline, first ancestor has black overline and latter has inherited text decoration color from parent on repaint -->
<p><span class="underline" id="test-parent" style="color: rgb(100, 100, 100);">lorem <span class="overline" id="test-ancestor-1">ipsum</span> <span class="line-through" id="test-ancestor-2">ipsum</span> ipsum</span></p>
<!-- Transparent text with green overline, blue line-through and black underline on repaint -->
<p style="color: transparent;"><span id="test-mixed-1" class="underline"><span id="test-mixed-2" class="overline"><span id="test-mixed-3" class="line-through">lorem ipsum</span></span></span></p>
</body>
</html>
Codebase Browser
chromium