text-decoration-style-inherit.html | Explore in Territory

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

<!-- Adding new text decorations paint over previous ones-->
<div style="text-decoration: underline red;">
  <div style="text-decoration: underline wavy green;">
     Solid red underline, wavy green underline on top.
  </div>
</div>

<div style="text-decoration: overline line-through red;">
  <div style="text-decoration: line-through underline wavy green;">
     Solid red overline, solid red line-through, wavy green line-through on top, wavy green underline.
  </div>
</div>

<div style="text-decoration: underline wavy green;">
  <div style="text-decoration: underline red;">
     Wavy green underline, solid red underline on top.
  </div>
</div>

<div style="text-decoration: underline red;">
  <div style="text-decoration: underline wavy green;">
     Solid red underline, wavy green underline on top.
  </div>
</div>

<div style="text-decoration: underline red;">
  <div>
    <div style="text-decoration: underline wavy green;">
       Solid red underline, wavy green underline on top.
    </div>
  </div>
</div>

<div style="text-decoration: underline;">
  <div style="color: red;">
   Solid black underline with red text.
  </div>
</div>

<div style="color: red;">
  <div style="text-decoration: underline;">
    Solid red underline with red text.
  </div>
</div>

<div style="text-decoration: underline;">
  <div style="text-decoration: red wavy underline;">
    Solid black underline, red wavy underline on top.
  </div>
</div>

<div style="text-decoration: red wavy underline;">
  <div style="text-decoration: underline;">
    Solid red wavy underline, black underline on top.
  </div>
</div>

<div style="text-decoration: green wavy underline;">
  <div style="text-decoration: underline;">
    <div style="text-decoration: red dashed underline;">
      Wavy green underline, with a solid black underline on top, with a red dashed underline on top.
    </div>
  </div>
</div>

<div style="text-decoration: underline;">
  <div style="color: red;">
    <div style="text-decoration: underline dotted;">
      <div style="color: blue;">
        <div style="text-decoration: underline wavy green;">
          <div style="text-decoration: underline dashed;">
            Solid black underline, with a red dotted underline on top, with a wavy green underline on top, with a blue dashed underline on top.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="text-decoration: underline;">
  <div style="text-decoration: underline wavy blue;">
     Solid black underline, wavy blue underline on top.
  </div>
</div>

<div style="text-decoration: underline; color: green;">
  <div style="text-decoration: underline wavy blue;">
     Solid green underline, wavy blue underline on top, green text.
  </div>
</div>

<div style="text-decoration: underline; color: green;">
  <div style="text-decoration: underline wavy;">
     Solid green underline, wavy green underline on top, green text.
  </div>
</div>

<div style="color: green;">
  <div style="text-decoration: underline overline wavy;">
     Wavy green underline and overline, green text.
  </div>
</div>

<div style="text-decoration: underline overline wavy;">
  <div style="color: green;">
     Wavy black underline and overline, green text.
  </div>
</div>

<div style="text-decoration: underline overline wavy;">
  <div style="color: green; text-decoration: underline;">
     Wavy black underline and overline, solid green underline on top, green text.
  </div>
</div>

<div style="text-decoration: underline overline wavy;">
  <div style="color: green; text-decoration: underline blue;">
     Wavy black underline and overline, solid blue underline on top, green text.
  </div>
</div>
chromium/third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-style-inherit.html
