| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <style> |
| .decoration { |
| font-family: Ahem, sans-serif; |
| font-size: 24px; |
| text-decoration-skip: ink; |
| text-decoration-color: green; |
| color: #0F0F0F; |
| } |
| |
| .all { |
| text-decoration-line: underline overline line-through; |
| -webkit-text-decoration-line: underline overline line-through; |
| } |
| |
| .solid { |
| text-decoration-style: solid; |
| } |
| |
| .double { |
| text-decoration-style: double; |
| } |
| |
| .dotted { |
| text-decoration-style: dotted; |
| } |
| |
| .dashed { |
| text-decoration-style: dashed; |
| } |
| |
| .wavy { |
| text-decoration-style: wavy; |
| } |
| |
| .gridcell { |
| flex: 1; |
| } |
| |
| .vert { |
| writing-mode: vertical-lr; |
| } |
| |
| .upright { |
| text-orientation: upright; |
| } |
| |
| .red { |
| text-decoration-color: red; |
| } |
| </style> |
| <!-- Green line decorations should skip glyph shapes above and below the baseline, |
| red line decoration show the upright in vertical case where this does not work yet, see crbug.com/655154 --> |
| <div style="display: flex;"> |
| <div class="gridcell"> |
| <p class="decoration all solid">Ép Ép Ép</p> |
| <p class="decoration all double">Ép Ép Ép</p> |
| <p class="decoration all dashed">Ép Ép Ép</p> |
| <p class="decoration all dotted">Ép Ép Ép</p> |
| <p class="decoration all wavy">Ép Ép Ép</p> |
| </div> |
| <div class="gridcell vert"> |
| <p class="decoration all solid">Ép Ép Ép</p> |
| <p class="decoration all double">Ép Ép Ép</p> |
| <p class="decoration all dashed">Ép Ép Ép</p> |
| <p class="decoration all dotted">Ép Ép Ép</p> |
| <p class="decoration all wavy">Ép Ép Ép</p> |
| </div> |
| <div class="gridcell vert"> |
| <p><span class="decoration all solid">Ép </span><span class="decoration all solid red upright">Ép </span><span class="decoration all solid">Ép</span></p> |
| <p><span class="decoration all double">Ép </span><span class="decoration all double red upright">Ép </span><span class="decoration all double">Ép</span></p> |
| <p><span class="decoration all dashed">Ép </span><span class="decoration all dashed red upright">Ép </span><span class="decoration all dashed">Ép</span></p> |
| <p><span class="decoration all dotted">Ép </span><span class="decoration all dotted red upright">Ép </span><span class="decoration all dotted">Ép</span></p> |
| <p><span class="decoration all wavy">Ép </span><span class="decoration all wavy red upright">Ép </span><span class="decoration all wavy">Ép</span></p> |
| </div> |
| </div> |
