diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-fonts/matching')
12 files changed, 414 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/matching/META.yml b/testing/web-platform/tests/css/css-fonts/matching/META.yml new file mode 100644 index 0000000000..53487a6d85 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/META.yml @@ -0,0 +1,5 @@ +suggested_reviewers: + - drott + - fantasai + - litherum + - svgeesus diff --git a/testing/web-platform/tests/css/css-fonts/matching/README.md b/testing/web-platform/tests/css/css-fonts/matching/README.md new file mode 100644 index 0000000000..7d333c5bca --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/README.md @@ -0,0 +1,50 @@ +# Stretch, Style, Weight Matching Tests +This directory contains a set of tests for [the font style matching algorithm, section 5.2](https://drafts.csswg.org/css-fonts-4/#font-style-matching) of the [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts-4/) specification. + +In Level 4 of the spec, the font style matching algorithm has been extended to +support [OpenType Variations](https://www.microsoft.com/typography/otspec/otvaroverview.htm). This means, the +`@font-face` property descriptors accept ranges for `font-style`, `font-stretch` and `font-weight` and the matching +algorithm has been modified to take these into account, and to set variable fonts axis parameters accordingly. + +## Test Font + +For testing font matching with Variations support a test font called **Variable Test Axis Matching** was created (`variabletest_matching.ttf`). + +The design goal for this font is to match variable glyphs against non-variable, static reference glyphs. The variable glyphs are +scaled according to variation axes for stretch, style, weight. The reference glyphs are not subject to variation interpolation. + +### Test Glyphs +The test font contains glyphs M, N, O, P which scale according to the `wdth`, `slnt`, `ital`, and `wght` registered axes respectively. Glyphs M, N, O have zero advance width. When they are combined with the last, the P glyph, which has a width of 2000 FUnits, they form a full "test grapheme". The glyphs M, N, O, P line up vertically to form something resembling a bar chart of the applied axis parameters. For example, when the `wdth` design space coordinate is set to 100, the M bar glyph is 200 FUnits wide, when it is set to 500, the M bar glyph is 1000 FUnits wide. + +### Reference Glyphs + +The **Variable Test Axis Matching** font contains reference glyphs 0-9 to match different stops in the design coordinates space of the `wdth` axis, from 0 matching 200 FUnits to 9 matching 2000 FUnits. Analogously, glyphs p, q, w, e, r, t, y, u (the row between the numbers on a QWERTY keyboard) line up to match the N glyph at various stops for `slnt`. Glyphs ;, a, s, d, e, f, g, h, j, k, l match the O glyph for `ital`, and finally /, z, x, c, v, b, n, m match the P glyph for `wdth`. + + +### Building reference tests + +Using the **Variable Test Axis Matching** font, [reference tests](https://web-platform-tests.org/writing-tests/reftests.html) in this directory are created as follows: + + 1. Define `@font-face`s with range expressions, which trigger variation axes to be applied to the variable font. + 2. Use CSS style definitions to request font faces from the set of declared `@font-face`s and use blocks of the glyph sequence MNOP. + 3. To avoid flakiness, add reftest-wait to the html root element and use JS to remove it once font loading is complete. + 4. When the test is run, a screenshot is generated from the resulting output rendering. + 5. Define a reference rendering in a *-ref.html file, using only the non-variable reference glyphs q-p, a-;, z-/. + 6. When the test is run, a screenshot for the reference rendering is generated. + 7. For the test to pass the screenshot from 4. using OpenType Variations is compared to the reference screenshot from 6. (which is no using OpenType variations). + +## Font Glyphs Reference + +The following table explains the relationship between the M, N, O, P variation axis controlled glyphs and the non-scaled glyphs used as references. The values are specified as OpenType axis parameter values. CSS values are mapped to to those values, for example from CSS font-weight values straight to `wght`, for width from percentages straight to `wdth`. For `slnt` the CSS values are positive clockwise, but the OpenType values are positive turning counterclockwise. Here the mapping is inverted, i.e. the CSS value is multiple by -1. Compare the note in [the CSS font style property](https://drafts.csswg.org/css-fonts/#font-style-prop). + +| Bar Length in FUnits | 200 | 400 | 600 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 +| :---: | :---: |:---: |:---: |:---: |:---: |:---: |:---: |:---: |:---: | +| Glyph **N**, Style, `slnt` | 90 | 67.5 | 45 | 20 | 0.00 | -20 | -45 | -67.5 | -90 +| Glyph **M**, Stretch Axis `wdth` | 50 | 62.5 | 75 | 87.5 | 100 | 112.5 | 125 | 150 | 200 +| Glyph **O**, Style, `ital` | 0 | 0.125 | 0.25 | 0.375 | 0.5 | 0.625 | 0.75 | 0.875 | 1 +| Glyph **P**, Weight, `wght` | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 +| **Ref Glyphs for:** | | | | | | | | | +| **M** | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 +| **N** | p | q | w | e | r | t | y | u | i +| **O** | ; | a | s | d | f | g | h | j | k +| **P** | / | z | x | c | v | b | n | m | , diff --git a/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight-ref.html b/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight-ref.html new file mode 100644 index 0000000000..16826307c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + } + + body { + font-family: variable_axes, sans-serif; + font-size: 80px; + } +</style> +<span>4q;n</span> + <span>4q;n</span> + <span>4w;n</span> + <span>4w;n</span> + <span>4y;x</span> + <span>4y;x</span> + <span>4y;x</span> + <span>4u;x</span> + <span>4u;x</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight.html b/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight.html new file mode 100644 index 0000000000..c2b27be120 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/fixed-stretch-style-over-weight.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<link rel="stylesheet" href="font-matching.css"> +<!-- Tests CSS Fonts Level 4, section 5.2. font matching algorithm. Precedence + of properties (stretch over style, style over weight) and style over weight + priority. --> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 100%; + font-style: oblique -67.5deg -45deg; + font-weight: 700 800; + } + + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 100%; + font-style: oblique 45deg 67.5deg; + font-weight: 200 300; + } +</style> +<link rel="match" href="fixed-stretch-style-over-weight-ref.html"> +<span id="stretch_style_weight_1">MNOP</span> + <span id="stretch_style_weight_2">MNOP</span> + <span id="stretch_style_weight_3">MNOP</span> + <span id="stretch_style_weight_4">MNOP</span> + <span id="stretch_style_weight_5">MNOP</span> + <span id="stretch_style_weight_6">MNOP</span> + <span id="stretch_style_weight_7">MNOP</span> + <span id="stretch_style_weight_8">MNOP</span> + <span id="stretch_style_weight_9">MNOP</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/font-matching.css b/testing/web-platform/tests/css/css-fonts/matching/font-matching.css new file mode 100644 index 0000000000..ebbef02f62 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/font-matching.css @@ -0,0 +1,60 @@ +body { + font-family: variable_axes, sans-serif; + font-size: 80px; + font-synthesis: none; +} + +#stretch_style_weight_1 { + font-stretch: 50%; + font-style: oblique -90deg; + font-weight: 100; +} + +#stretch_style_weight_2 { + font-stretch: 62.50%; + font-style: oblique -67.5deg; + font-weight: 200; +} + +#stretch_style_weight_3 { + font-stretch: 75%; + font-style: oblique -45deg; + font-weight: 300; +} + +#stretch_style_weight_4 { + font-stretch: 87.50%; + font-style: oblique -20deg; + font-weight: 400; +} + +#stretch_style_weight_5 { + font-stretch: 100%; + font-style: oblique 0deg; + font-weight: 500; +} + +#stretch_style_weight_6 { + font-stretch: 112.50%; + font-style: oblique 20deg; + font-weight: 600; +} + +#stretch_style_weight_7 { + font-stretch: 125%; + font-style: oblique 45deg; + font-weight: 700; +} + +#stretch_style_weight_8 { + font-stretch: 150%; + font-style: oblique 67.5deg; + font-weight: 800; +} + +#stretch_style_weight_9 { + font-stretch: 200%; + font-style: oblique 90deg; + font-weight: 900; +} + diff --git a/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed-ref.html b/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed-ref.html new file mode 100644 index 0000000000..e59dc50dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + } + + body { + font-family: variable_axes, sans-serif; + font-size: 80px; + } +</style> +<span>0p;/</span> +<span>8i;,</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed.html b/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed.html new file mode 100644 index 0000000000..71b424d5fe --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/range-descriptor-reversed.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>CSS Fonts Module Level 3: Property descriptor ranges</title> +<link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org"/> +<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-prop-desc"> +<link rel="match" href="range-descriptor-reversed-ref.html"> +<meta name="assert" content="User agents must swap the computed value of the startpoint and endpoint of the range in order to forbid decreasing ranges."> +</head> +<link rel="stylesheet" href="font-matching.css"> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 200% 50%; + font-style: oblique 90deg -90deg; + font-weight: 900 100; + } +</style> +<link rel="match" href="stretch-distance-over-weight-distance-ref.html"> +<span id="stretch_style_weight_1">MNOP</span> +<span id="stretch_style_weight_9">MNOP</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/resources/variabletest_matching.ttf b/testing/web-platform/tests/css/css-fonts/matching/resources/variabletest_matching.ttf Binary files differnew file mode 100644 index 0000000000..89ed12a2c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/resources/variabletest_matching.ttf diff --git a/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance-ref.html b/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance-ref.html new file mode 100644 index 0000000000..7589a15f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + } + + body { + font-family: variable_axes, sans-serif; + font-size: 80px; + } +</style> +<span>1y;n</span> + <span>1y;n</span> + <span>2y;n</span> + <span>2y;n</span> + <span>2y;n</span> + <span>6w;x</span> + <span>6w;x</span> + <span>7w;x</span> + <span>7w;x</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance.html b/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance.html new file mode 100644 index 0000000000..e899c8b4d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/stretch-distance-over-weight-distance.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<link rel="stylesheet" href="font-matching.css"> +<!-- Tests CSS Fonts Level 4, section 5.2. font matching algorithm. Precedence + of properties (stretch over style, style over weight) and distance of stretch . --> +<style> + /* Matches 2 & 3 in stretch, but style and weight at the other end of the + spectrum, choosen for 1-5. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 62.5% 75%; + font-style: oblique 45deg 67.5deg; + font-weight: 700 800; + } + + /* Same stretch as above, and better weight match for 2 & 3, but must not + get choosen since worse style distance. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 62.5% 75%; + font-style: oblique 90deg; + font-weight: 200 300; + } + + /* Matches 7 & 8 in stretch, but style and weight at the opposite end of the + spectrum, choosen for 6-9. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 125% 150%; + font-style: oblique -67.5deg -45deg; + font-weight: 200 300; + } + + + /* Same stretch as previous, and better weight match for 7 & 8 but most not + get choosen because of worse style distance. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 125% 150%; + font-style: oblique -90deg; + font-weight: 700 800; + } +</style> +<link rel="match" href="stretch-distance-over-weight-distance-ref.html"> +<span id="stretch_style_weight_1">MNOP</span> + <span id="stretch_style_weight_2">MNOP</span> + <span id="stretch_style_weight_3">MNOP</span> + <span id="stretch_style_weight_4">MNOP</span> + <span id="stretch_style_weight_5">MNOP</span> + <span id="stretch_style_weight_6">MNOP</span> + <span id="stretch_style_weight_7">MNOP</span> + <span id="stretch_style_weight_8">MNOP</span> + <span id="stretch_style_weight_9">MNOP</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction-ref.html b/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction-ref.html new file mode 100644 index 0000000000..5a7c13959a --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<style> + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + } + + body { + font-family: variable_axes, sans-serif; + font-size: 80px; + } +</style> +<span>1p;c</span> + <span>1p;c</span> + <span>2p;c</span> + <span>2e;x</span> + <span>2e;x</span> + <span>6t;n</span> + <span>6i;v</span> + <span>7i;v</span> + <span>7i;v</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction.html b/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction.html new file mode 100644 index 0000000000..f263a11127 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/matching/style-ranges-over-weight-direction.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<link rel="stylesheet" href="font-matching.css"> +<!-- Tests CSS Fonts Level 4, section 5.2. font matching algorithm. Precedence + of properties (stretch over style, style over weight) and search + direction for style. --> +<style> + /* Matches, 2 & 3 in stretch, has wrong style, but in the right search + direction, so weight 400 gets chosen for 1-3. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 62.5% 75%; + font-style: oblique -90deg; + font-weight: 400; + } + + /* Matches 2 & 3 in stretch and weight but has wrong style and in the wrong + search direction, chosen for 4 and 5. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 62.5% 75%; + font-style: oblique -20deg; + font-weight: 200 300; + } + + + /* Matches 7 & 8 in stretch, has wrong style, but in the right search + direction from 7 and above, so weight 600 gets chosen for 7-9. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 125% 150%; + font-style: oblique 90deg; + font-weight: 500; + } + + + /* Matches 7 & 8 in stretch and weight, but has wrong style and in the wrong + search direction for 7 and above, gets chosen for 6. */ + @font-face { + font-family: variable_axes; + src: url("resources/variabletest_matching.ttf"); + font-stretch: 125% 150%; + font-style: oblique 20deg; + font-weight: 700 800; + } +</style> +<link rel="match" href="style-ranges-over-weight-direction-ref.html"> +<span id="stretch_style_weight_1">MNOP</span> + <span id="stretch_style_weight_2">MNOP</span> + <span id="stretch_style_weight_3">MNOP</span> + <span id="stretch_style_weight_4">MNOP</span> + <span id="stretch_style_weight_5">MNOP</span> + <span id="stretch_style_weight_6">MNOP</span> + <span id="stretch_style_weight_7">MNOP</span> + <span id="stretch_style_weight_8">MNOP</span> + <span id="stretch_style_weight_9">MNOP</span> +<script> + document.fonts.ready.then( + () => { document.documentElement.classList.remove("reftest-wait"); }); +</script> +</html> |