Stretch, Style, Weight Matching Tests

This directory contains a set of tests for the font style matching algorithm, section 5.2 of the CSS Fonts Module Level 4 specification.

In Level 4 of the spec, the font style matching algorithm has been extended to support OpenType Variations. 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 in this directory are created as follows:

1. Define @font-faces 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-faces 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.