1824284 - clip-path WPT failures for antialiased edges of text, in clip-path-text-00*.svg

Status: RESOLVED FIXED

(Core :: SVG, task)

Description

[Daniel Holbert [:dholbert]]

We fail some interop-2023-cssmasking WPT tests due to antialiasing differences along the edges of text in SVG.

Filing this bug for these.

Specific tests I'm aware of at the moment:
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/clip-path-text-001.svg
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/clip-path-text-002.svg
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/clip-path-text-003.svg
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/clip-path-text-004.svg
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/clip-path-text-005.svg

In all of these, the testcase and reference case snapshots are visually identical, but the testcase has the upper-left antialiased pixels being a little bit darker than the testcase, and the reference case has the lower-right antialiased pixels being a little bit darker than the testcase.

Possibly a pixel-snapping thing? (I'm not sure it's user-visible enough to have interop relevance, so maybe it just merits a fuzzy annotation, and/or a switch to Ahem text to reduce the fuzz?)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: Bug 1824284: Use Ahem font to avoid antialiasing-related fuzzy test-failures in WPT clip-path-text-*.svg r?#layout-reviewers

These tests compare the string "CLIP" used as a green rect's clip-path, with
the reference case just being plain green text. Unfortunately, there's no
guarantee that antialiased fringes will render precisely the same way between
these two modes of rendering; so this setup can produce some spurious
test-failures, with large numbers of mismatching pixels along the edges of the
characters.

The Ahem font can help here, by reducing the amount of curves and antialiasing,
and by removing the choice-of-default-font as a source of between-browser &
between-platform variability in these tests.

This patch switches these tests to use the Ahem font, with a reduced font-size
and font-weight to keep the string approximately the same length. I've also
adjusted the text's y-position in some of the tests (the "text-over-a-polygon"
tests), so that it's easier to visually distinguish the bar of Ahem text from
the polygon/ I've used "X" as the only rendered character, since it's defined
with a square glyph, per https://web-platform-tests.org/writing-tests/ahem.html

With this patch, these tests pass with no fuzzy annotation required in Firefox.

Comment 2

[Daniel Holbert [:dholbert]]

Try run: https://treeherder.mozilla.org/jobs?repo=try&revision=9efeb3b3f1e532788fd58cc38ad9fe04238b473b

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0c3c34be4ef7
Use Ahem font to avoid antialiasing-related fuzzy test-failures in WPT clip-path-text-*.svg r=longsonr

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/39270 for changes under testing/web-platform/tests

Comment 5

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/0c3c34be4ef7

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot