Add and update font-size-adjust tests to examine the from-font value.
The CSS Font Module Level 5 defines a new value, from-font for font-size-adjust,
which allows the browser to automatically decides an aspect value based on
the primary font [1].
This change updates existing parsing tests for from-value and adds a new reference
test to examine the rendering results as expected. font-size-adjust-013.html is
inspired by font-size-adjust-012.html.
The tests originated from a WebKit implementation of from-font for font-size-adjust [2].
[1] https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop
[2] https://github.com/WebKit/WebKit/pull/12303
diff --git a/css/css-fonts/font-size-adjust-013-ref.html b/css/css-fonts/font-size-adjust-013-ref.html
new file mode 100644
index 0000000..6dd5b10
--- /dev/null
+++ b/css/css-fonts/font-size-adjust-013-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: font-size-adjust property</title>
+ <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop">
+ <meta name="assert" content="Test whether from-font automatically determines a font-size-adjust value based on the primary font.">
+ <style>
+ @font-face {
+ font-family: 'primary-font-ahem-ex-500';
+ src: url('./resources/ahem-ex-500.otf');
+ }
+ @font-face {
+ font-family: 'secondary-font-ahem-ex-250';
+ src: url('./resources/ahem-ex-250.otf');
+ }
+ .test {
+ font-family: 'primary-font-ahem-ex-500', 'secondary-font-ahem-ex-250';
+ font-size: 50px;
+ color: peru;
+ height: 50px;
+ margin-bottom: 24px;
+ }
+ .tall-inline-block {
+ display: inline-block;
+ height: 100px;
+ }
+ .description {
+ font-family: serif;
+ font-size: 16px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div class="description">
+ 1. Same glyphs, two 'x' in different spans with two different fonts. The primary font (AhemEx500) has a double aspect value (i.e., x-height/size = 0.5) of the secondary font (AhemEx250). The right glyph is adjusted with font-size-adjust: from-font, so it should be the same size as the left one.
+ </div>
+ <div class="test">
+ <span>xx</span>
+ </div>
+ </div>
+ <div>
+ <div class="description">
+ 2. Different glyphs 'x' and 'A' in the same span, with two fonts <em>without</em> font-size-adjust. As the primary font does not contain 'A' (U+0041), so the right glyph 'A' falls back to the secondary font. The right glyph should be smaller than the left one.
+ </div>
+ <div class="test"><span>xA</span></div>
+ </div>
+ <div>
+ <div class="description">
+ 3. Different glyphs 'x' and 'A' in the same span, with two fonts and font-size-adjust: from-font. The right glyph 'A' cannot be rendered by the primary font, so it individually falls back to the secondary font. However, it should be the same size as the left glyph due to font-size-adjust: from-font.
+ </div>
+ <div class="test">
+ <!-- We are inserting a tall inline-block here to make the position of the baseline independent of the adjusted glyph since on the ref test we don't use font-size-adjust but font-size -->
+ <span>xx<span class="tall-inline-block"></span></span>
+ </div>
+ </div>
+</html>
diff --git a/css/css-fonts/font-size-adjust-013.html b/css/css-fonts/font-size-adjust-013.html
new file mode 100644
index 0000000..e9f9140
--- /dev/null
+++ b/css/css-fonts/font-size-adjust-013.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: font-size-adjust property</title>
+ <link rel="match" href="font-size-adjust-013-ref.html">
+ <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop">
+ <meta name="assert" content="Test whether from-font automatically determines a font-size-adjust value based on the primary font.">
+ <style>
+ @font-face {
+ font-family: 'primary-font-ahem-ex-500';
+ src: url('./resources/ahem-ex-500.otf');
+ }
+ @font-face {
+ font-family: 'secondary-font-ahem-ex-250';
+ src: url('./resources/ahem-ex-250.otf');
+ }
+ .adjusted {
+ font-size-adjust: from-font;
+ }
+ .test {
+ font-family: 'primary-font-ahem-ex-500', 'secondary-font-ahem-ex-250';
+ font-size: 50px;
+ color: peru;
+ height: 50px;
+ margin-bottom: 24px;
+ }
+ .tall-inline-block {
+ display: inline-block;
+ height: 100px;
+ }
+ .description {
+ font-family: serif;
+ font-size: 16px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <div class="description">
+ 1. Same glyphs, two 'x' in different spans with two different fonts. The primary font (AhemEx500) has a double aspect value (i.e., x-height/size = 0.5) of the secondary font (AhemEx250). The right glyph is adjusted with font-size-adjust: from-font, so it should be the same size as the left one.
+ </div>
+ <div class="test">
+ <span>x</span><span class="adjusted">x</span>
+ </div>
+ </div>
+ <div>
+ <div class="description">
+ 2. Different glyphs 'x' and 'A' in the same span, with two fonts <em>without</em> font-size-adjust. As the primary font does not contain 'A' (U+0041), so the right glyph 'A' falls back to the secondary font. The right glyph should be smaller than the left one.
+ </div>
+ <div class="test"><span>xA</span></div>
+ </div>
+ <div>
+ <div class="description">
+ 3. Different glyphs 'x' and 'A' in the same span, with two fonts and font-size-adjust: from-font. The right glyph 'A' cannot be rendered by the primary font, so it individually falls back to the secondary font. However, it should be the same size as the left glyph due to font-size-adjust: from-font.
+ </div>
+ <div class="test">
+ <!-- We are inserting a tall inline-block here to make the position of the baseline independent of the adjusted glyph since on the ref test we don't use font-size-adjust but font-size -->
+ <span class="adjusted">xA<span class="tall-inline-block"></span></span>
+ </div>
+ </div>
+</html>
diff --git a/css/css-fonts/parsing/font-size-adjust-computed.html b/css/css-fonts/parsing/font-size-adjust-computed.html
index a4c8212..cec5a0d 100644
--- a/css/css-fonts/parsing/font-size-adjust-computed.html
+++ b/css/css-fonts/parsing/font-size-adjust-computed.html
@@ -2,8 +2,8 @@
<html>
<head>
<meta charset="utf-8">
-<title>CSS Fonts Module Level 3: getComputedStyle().fontSizeAdjust</title>
-<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop">
+<title>CSS Fonts Module Level 5: getComputedStyle().fontSizeAdjust</title>
+<link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop">
<meta name="assert" content="font-size-adjust computed value is as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@@ -13,12 +13,20 @@
<div id="target"></div>
<script>
test_computed_value('font-size-adjust', 'none');
+
test_computed_value('font-size-adjust', '0.5');
test_computed_value('font-size-adjust', 'ex-height 0.5', '0.5'); // default basis 'ex-height' omitted from serialization
test_computed_value('font-size-adjust', 'cap-height 0.8');
test_computed_value('font-size-adjust', 'ch-width 0.4');
test_computed_value('font-size-adjust', 'ic-width 0.9');
test_computed_value('font-size-adjust', 'ic-height 1.1');
+
+test_computed_value('font-size-adjust', 'from-font');
+test_computed_value('font-size-adjust', 'ex-height from-font', 'from-font'); // default basis 'ex-height' omitted from serialization
+test_computed_value('font-size-adjust', 'cap-height from-font');
+test_computed_value('font-size-adjust', 'ch-width from-font');
+test_computed_value('font-size-adjust', 'ic-width from-font');
+test_computed_value('font-size-adjust', 'ic-height from-font');
</script>
</body>
</html>
diff --git a/css/css-fonts/parsing/font-size-adjust-valid.html b/css/css-fonts/parsing/font-size-adjust-valid.html
index bb46daf..cb3c367 100644
--- a/css/css-fonts/parsing/font-size-adjust-valid.html
+++ b/css/css-fonts/parsing/font-size-adjust-valid.html
@@ -2,9 +2,9 @@
<html>
<head>
<meta charset="utf-8">
-<title>CSS Fonts Module Level 3: parsing font-size-adjust with valid values</title>
-<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop">
-<meta name="assert" content="font-size-adjust supports the full grammar 'none | [basis] <number>'.">
+<title>CSS Fonts Module Level 5: parsing font-size-adjust with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop">
+<meta name="assert" content="font-size-adjust supports the full grammar 'none | [metric]? [from-font | <number>]'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
@@ -12,12 +12,20 @@
<body>
<script>
test_valid_value('font-size-adjust', 'none');
+
test_valid_value('font-size-adjust', '0.5');
test_valid_value('font-size-adjust', 'ex-height 0.5', '0.5'); // default basis 'ex' omitted from serialization
test_valid_value('font-size-adjust', 'cap-height 0.8');
test_valid_value('font-size-adjust', 'ch-width 0.4');
test_valid_value('font-size-adjust', 'ic-width 0.9');
test_valid_value('font-size-adjust', 'ic-height 0.9');
+
+test_valid_value('font-size-adjust', 'from-font');
+test_valid_value('font-size-adjust', 'ex-height from-font', 'from-font'); // default basis 'ex' omitted from serialization
+test_valid_value('font-size-adjust', 'cap-height from-font');
+test_valid_value('font-size-adjust', 'ch-width from-font');
+test_valid_value('font-size-adjust', 'ic-width from-font');
+test_valid_value('font-size-adjust', 'ic-height from-font');
</script>
</body>
</html>
diff --git a/lint.ignore b/lint.ignore
index ab06848..056bbd0 100644
--- a/lint.ignore
+++ b/lint.ignore
@@ -783,6 +783,8 @@
AHEM SYSTEM FONT: css/css-fonts/ascent-descent-override.html
AHEM SYSTEM FONT: css/css-fonts/font-size-adjust-012.html
AHEM SYSTEM FONT: css/css-fonts/font-size-adjust-012-ref.html
+AHEM SYSTEM FONT: css/css-fonts/font-size-adjust-013.html
+AHEM SYSTEM FONT: css/css-fonts/font-size-adjust-013-ref.html
AHEM SYSTEM FONT: css/css-fonts/line-gap-override.html
AHEM SYSTEM FONT: html/dom/render-blocking/remove-attr-unblocks-rendering.optional.html
AHEM SYSTEM FONT: html/dom/render-blocking/remove-element-unblocks-rendering.optional.html
