Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions

View file

@ -0,0 +1,4 @@
@drott
@fantasai
@litherum
@nattokirai

View file

@ -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 | ,

View file

@ -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>

View file

@ -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>

View file

@ -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;
}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>