<!DOCTYPE html>
<html>
<head>
<!-- Bugzilla link: http://webkit.org/b/94094 -->
<title>CSS Test: CSS3 text-decoration-style</title>
<link rel="help" href="http://http://dev.w3.org/csswg/css3-text/#text-decoration-style"/>
<meta name="flags" content="ahem"/>
<style>
div { padding: 10px; diplay: inline; text-decoration-skip-ink: none; }
div.solid { border: 5px solid; }
div.double { border: 5px double; }
div.dashed { border: 5px dashed; }
div.dotted { border: 5px dotted; }
span.underline { text-decoration-line: underline; }
span.overline { text-decoration-line: overline; }
span.line-through { text-decoration-line: line-through; }
span.solid { text-decoration-style: solid; }
span.double { text-decoration-style: double; }
span.dashed { text-decoration-style: dashed; }
span.dotted { text-decoration-style: dotted; }
span.wavy { text-decoration-style: wavy; }
</style>
</head>
<body style="font: 20px Ahem; -webkit-font-smoothing: none; -webkit-text-stroke: 1px black; -webkit-text-fill-color: white;">
<div class="solid"><span class="underline solid">lorem ipsum</span> <span class="overline solid">lorem ipsum</span> <span class="line-through solid">lorem ipsum</span></div><br/>
<div class="double"><span class="underline double">lorem ipsum</span> <span class="overline double">lorem ipsum</span> <span class="line-through double">lorem ipsum</span></div><br/>
<div class="dashed"><span class="underline dashed">lorem ipsum</span> <span class="overline dashed">lorem ipsum</span> <span class="line-through dashed">lorem ipsum</span></div><br/>
<div class="dotted"><span class="underline dotted">lorem ipsum</span> <span class="overline dotted">lorem ipsum</span> <span class="line-through dotted">lorem ipsum</span></div><br/>
<div><span class="underline wavy">lorem ipsum</span> <span class="overline wavy">lorem ipsum</span> <span class="line-through wavy">lorem ipsum</span></div>
</body>
</html>
Codebase Browser
chromium