Implement text-underline-position

[email protected] Bug: 854091, 313888 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I3e1b37ab4e27a91ce30a004d4faf8ab98152f9ed Reviewed-on: https://chromium-review.googlesource.com/1187726 Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: Emil A Eklund <[email protected]> Commit-Queue: Koji Ishii <[email protected]> Commit-Queue: Emil A Eklund <[email protected]> Cr-Commit-Position: refs/heads/master@{#590743}
web-platform-tests · Sep 12, 2018 · 632a3f5 · 632a3f5
1 parent a5ecf95
commit 632a3f5
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 0 deletions.
diff --git a/css/css-text-decor/reference/text-decoration-underline-position-horizontal-ref.html b/css/css-text-decor/reference/text-decoration-underline-position-horizontal-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+            .underline { text-decoration: underline; }
+            .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="en">
+    <div class="overline">サンプル</div>
+    <div class="overline">サンプル</div>
+    <div class="underline">"text-underline-position: right" alone should be same as "auto right"</div>
+    <div class="underline">"text-underline-position: left" alone should be same as "auto left"</div>
+</body>
+</html>
+
+
diff --git a/css/css-text-decor/reference/text-decoration-underline-position-vertical-ja-ref.html b/css/css-text-decor/reference/text-decoration-underline-position-vertical-ja-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+            body { writing-mode: vertical-rl; }
+            .underline { text-decoration: underline; }
+            .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="en">
+    <div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
+    <div class="underline">サンプル</div>
+    <div class="underline">サンプル</div>
+</body>
+</html>
diff --git a/css/css-text-decor/reference/text-decoration-underline-position-vertical-ref.html b/css/css-text-decor/reference/text-decoration-underline-position-vertical-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+            body { writing-mode: vertical-rl; }
+            .underline { text-decoration: underline; }
+            .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="en">
+    <div class="underline">サンプル</div>
+    <div class="underline">サンプル</div>
+</body>
+</html>
+
diff --git a/css/css-text-decor/text-decoration-underline-position-horizontal.html b/css/css-text-decor/text-decoration-underline-position-horizontal.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
+    <link rel="match" href="reference/text-decoration-underline-position-horizontal-ref.html">
+    <style>
+        .underline { text-decoration: underline; }
+        .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="en">
+    <div class="overline" style="text-underline-position: under right">サンプル</div>
+    <div class="overline" style="text-underline-position: under left">サンプル</div>
+    <div class="underline" style="text-underline-position: right">"text-underline-position: right" alone should be same as "auto right"</div>
+    <div class="underline" style="text-underline-position: left">"text-underline-position: left" alone should be same as "auto left"</div>
+</body>
+</html>
+
diff --git a/css/css-text-decor/text-decoration-underline-position-vertical-ja.html b/css/css-text-decor/text-decoration-underline-position-vertical-ja.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
+    <link rel="match" href="reference/text-decoration-underline-position-vertical-ja-ref.html">
+    <style>
+        body { writing-mode: vertical-rl; }
+        .underline { text-decoration: underline; }
+        .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="ja">
+    <div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
+    <div class="underline" style="text-underline-position: under left">サンプル</div>
+    <div class="overline">サンプル</div>
+</body>
+</html>
diff --git a/css/css-text-decor/text-decoration-underline-position-vertical.html b/css/css-text-decor/text-decoration-underline-position-vertical.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
+    <link rel="match" href="reference/text-decoration-underline-position-vertical-ref.html">
+    <style>
+        body { writing-mode: vertical-rl; }
+        .underline { text-decoration: underline; }
+        .overline { text-decoration: overline; }
+    </style>
+</head>
+<body lang="en">
+    <div class="overline" style="text-underline-position: right">サンプル</div>
+    <div class="underline" style="text-underline-position: left">サンプル</div>
+</body>
+</html>
+