Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

14 files changed, 463 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/font-unicode-PUA-ref.html b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-ref.html
new file mode 100644
index 0000000000..01b95e8e72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">
+<style>
+.target {
+    font-family: serif, sans-serif, cursive, fantasy, monospace, system-ui, emoji, math, fangsong, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, 'Times';
+}
+p {
+    font-size: 22px;
+}
+.times {
+    font-family: 'Times';
+}
+</style>
+</head>
+<body>
+"If a given character is a Private-Use Area Unicode codepoint, user agents must only match font families named in the font-family list that are not generic families. If none of the families named in the font-family list contain a glyph for that codepoint, user agents must display some form of missing glyph symbol for that character rather than attempting installed font fallback for that codepoint." - <a href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">css-fonts-4</a>
+<h3>The first line should render as the second. This means that no generic font was used during fallback and the first non generic font was used. </h3>
+<p class="times">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+<p class="times">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA.html b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA.html
new file mode 100644
index 0000000000..9ed897aa00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">
+<link rel="match" href="./font-unicode-PUA-ref.html">
+<style>
+.target {
+    font-family: serif, sans-serif, cursive, fantasy, monospace, system-ui, emoji, math, fangsong, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, 'Times';
+}
+p {
+    font-size: 22px;
+}
+.times {
+    font-family: 'Times';
+}
+</style>
+</head>
+<body>
+"If a given character is a Private-Use Area Unicode codepoint, user agents must only match font families named in the font-family list that are not generic families. If none of the families named in the font-family list contain a glyph for that codepoint, user agents must display some form of missing glyph symbol for that character rather than attempting installed font fallback for that codepoint." - <a href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">css-fonts-4</a>
+<h3>The first line should render as the second. This means that no generic font was used during fallback and the first non generic font was used. </h3>
+<p class="target">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+<p class="times">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+</body>
+</html>
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
new 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>