[advance-override] Implement the second percentage parameter

For upright characters in vertical text layout, the advance of a glyph is its height instead of width, and therefore we may want a different scale factor for overriding the advance height instead of width. Hence, following the spec revision [1], this patch implements the second parameter for use in upright glyphs in vertical text layout. [1] w3c/csswg-drafts#6020 Bug: 1137633 Change-Id: I277d84711b9478f21ba3bd1b3aa987196fb0499e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2706243 Commit-Queue: Xiaocheng Hu <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/master@{#856529}
web-platform-tests · Feb 23, 2021 · f70aca5 · f70aca5
1 parent 1c875e7
commit f70aca5
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 0 deletions.
diff --git a/css/css-fonts/advance-override-serialization.html b/css/css-fonts/advance-override-serialization.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-5/#descdef-font-face-advance-override">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<title>Serialization of advance-override</title>
+
+<style id="target">
+@font-face {
+  font-family: one-parameter;
+  src: local(Ahem), url(/fonts/Ahem.ttf);
+  advance-override: 50%;
+}
+
+@font-face {
+  font-family: two-parameters;
+  src: local(Ahem), url(/fonts/Ahem.ttf);
+  advance-override: 50% 100%;
+}
+
+@font-face {
+  font-family: two-identical-parameters;
+  src: local(Ahem), url(/fonts/Ahem.ttf);
+  advance-override: 100% 100%;
+}
+</style>
+
+<script>
+const sheet = document.getElementById("target").sheet;
+
+test(() => assert_equals(sheet.cssRules[0].style.advanceOverride, "50%"),
+     "One parameter should be serialized as one parameter");
+
+test(() => assert_equals(sheet.cssRules[1].style.advanceOverride, "50% 100%"),
+     "Two different parameters should be serialized as two parameters");
+
+test(() => assert_equals(sheet.cssRules[2].style.advanceOverride, "100%"),
+     "Two identical parameters should be simplified into one parameter");
+
+</script>
diff --git a/css/css-fonts/advance-override-vertical-upright-ref.html b/css/css-fonts/advance-override-vertical-upright-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Tests the second parameter of the advance-override descriptor of @font-face</title>
+<style>
+@font-face {
+  font-family: custom-font;
+  src: local(Ahem), url(/fonts/Ahem.ttf);
+  unicode-range: U+0-7F; /* ASCII only */
+}
+
+.test {
+  font: 20px custom-font, sans-serif;
+  border: 1px solid red;
+  width: max-content;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+.upright {
+  text-orientation: upright;
+}
+</style>
+
+<p>advance-override uses the second parameter to override advance of upright characters in vertical text.</p>
+
+<div class="test">X&nbsp;X&nbsp;X&nbsp;</div>
+
+<div class="test vertical">X&nbsp;X&nbsp;X&nbsp;</div>
+
+<div class="test vertical upright">X&nbsp;&nbsp;X&nbsp;&nbsp;X&nbsp;&nbsp;</div>
diff --git a/css/css-fonts/advance-override-vertical-upright.html b/css/css-fonts/advance-override-vertical-upright.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-5/#descdef-font-face-advance-override">
+<link rel="match" href="advance-override-vertical-upright-ref.html">
+<link rel="assert" title="Tests that advance-override uses the second parameter to override advance of upright characters in vertical text">
+<title>Tests the second parameter of the advance-override descriptor of @font-face</title>
+<style>
+@font-face {
+  font-family: custom-font;
+  src: local(Ahem), url(/fonts/Ahem.ttf);
+  advance-override: 200% 300%;
+  unicode-range: U+0-7F; /* ASCII only */
+}
+
+.test {
+  font: 20px custom-font, sans-serif;
+  border: 1px solid red;
+  width: max-content;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+.upright {
+  text-orientation: upright;
+}
+</style>
+
+<p>advance-override uses the second parameter to override advance of upright characters in vertical text.</p>
+
+<div class="test">
+  XXX
+</div>
+
+<div class="test vertical">
+  XXX
+</div>
+
+<div class="test vertical upright">
+  XXX
+</div>