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