Index: third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-skip.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-skip.html b/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-skip.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1aeb226a2dc060664a048279bc101aa71cafd406 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-skip.html |
@@ -0,0 +1,77 @@ |
+<!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> |