mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
@ -0,0 +1,4 @@
|
|||
@drott
|
||||
@fantasai
|
||||
@litherum
|
||||
@nattokirai
|
|
@ -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](http://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.
|
||||
|
||||
| Bar Length in FUnits | 200 | 400 | 600 | 800 | 1000 | 1200 | 1400 | 1600 | 1800
|
||||
| :---: | :---: |:---: |:---: |:---: |:---: |:---: |:---: |:---: |:---: |
|
||||
| Glyph **N**, Style, `slnt` | -90.00% | -67.50% | -45.00% | -20.00% | 0.00% | 20.00% | 45.00% | 67.50% | 90.00%
|
||||
| Glyph **M**, Stretch Axis `wdth` | 50% | 62.50% | 75% | 87.50% | 100% | 112.50% | 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 | ,
|
|
@ -0,0 +1,27 @@
|
|||
<!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>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>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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>
|
|
@ -0,0 +1,59 @@
|
|||
body {
|
||||
font-family: variable_axes, sans-serif;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
Binary file not shown.
|
@ -0,0 +1,27 @@
|
|||
<!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>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>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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>
|
|
@ -0,0 +1,27 @@
|
|||
<!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>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>
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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>
|
Loading…
Add table
Add a link
Reference in a new issue