text-decoration-style-inherit-not-propagated-by-out-of-flow.html

<!DOCTYPE html>
<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>

chromium/third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-style-inherit-not-propagated-by-out-of-flow.html