blob: 2bba9608ea4ef95dc9453af03b698c6725f07697 [file] [log] [blame]
<!DOCTYPE html>
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
</script>
<style>
/* Make decorations bigger so they are easier to see */
body {
font-size: 15px;
text-decoration-skip-ink: none;
}
body > div {
margin-bottom: 15px;
}
</style>
<!-- From the spec: "Text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables." -->
<div style="text-decoration: underline red;">
<div style="text-decoration: underline wavy green; display: inline;">
Display inline: Wavy green underline.
</div>
</div>
<div style="text-decoration: underline red;">
<div style="text-decoration: underline wavy green; float: right;">
Float: Wavy green underline.
</div>
</div>
<div style="clear: both;"></div>
<div style="text-decoration: underline red;">
<div style="text-decoration: underline wavy green; position: absolute; right: 10px;">
Position absolute: Wavy green underline.
</div>
</div>
<!-- From the spec: "[Text decorations] are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes." -->
<div style="display: block;">
<div style="text-decoration: underline red; display: inline;">
<div style="text-decoration: underline wavy green; display: inline;">
Nested display inline: Wavy green underline.
</div>
</div>
</div>