1821793 - Various fuzzy WPT failures in mask-image interop2023 bucket

Status: RESOLVED FIXED

(Core :: Layout, task)

Description

[Daniel Holbert [:dholbert]]

Looking in this directory...
https://wpt.fyi/results/css/css-masking/mask-image?label=experimental&label=master&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2023-cssmasking

... it looks like many of our failures are non-visually-perceptible fuzzy failures with testcases that draw a gradient and have bands of slightly-mismatching pixels along the gradient.

e.g. https://wpt.fyi/results/css/css-masking/mask-image/mask-image-2.html

We should just add a fuzzy annotation to these tests, probably.

Comment 1

[Daniel Holbert [:dholbert]]

That particular one (mask-image-2.html) has
Found 2400 pixels different, maximum difference per channel 1

And as an example, one of the mismatching stripes has rgb(173,91,173) in the testcase vs. rgb(174,91,174) in the reference case. (off by 1 in the r & b channels)

Comment 2

[Daniel Holbert [:dholbert]]

https://wpt.fyi/results/css/css-masking/mask-image/mask-image-3h.html has:

Found 49 pixels different, maximum difference per channel 6

...with the mismatching pixels being antialiasing fringe around the perimeter of a solid-color circle.

https://wpt.fyi/results/css/css-masking/clip-path/clip-path-borderBox-1a.html has:

Firefox: Found 355 pixels different, maximum difference per channel 52
Safari:   totalPixels: 356, maxDifference: 96
Chrome: [fails, renders a square]

again, antialiasing fringe around a circle.

And these ones:
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-borderBox-1c.html and
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-contentBox-1c.html
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-fillBox-1a.html
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-paddingBox-1c.html
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-strokeBox-1a.html
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-viewBox-1c.html
...all fail with that same reason & fuzzy threshold (355,52) in Firefox, with Safari/Chrome failing by rendering the wrong shape.

This one looks the same but has a slightly different threshold and passes in Safari:
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-strokeBox-1b.html

Firefox: Found 194 pixels different, maximum difference per channel 64
Safari: totalPixels: 76, maxDifference: 63
Chrome: [fails, renders wrong shape]

This one looks the same but has another slightly different threshold (with Safari/Chrome rendering the wrong shape):
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-viewBox-1b.html

Found 150 pixels different, maximum difference per channel 7

This one fails in all browsers, due to one or two of the green stripes being slightly longer than its neighboring blue stripe:
https://wpt.fyi/results/css/css-masking/clip-path/clip-path-polygon-013.html
(Looking at the test, it looks like it's comparing clip-path against width, using percentages and calc values; not surprising that there's a 1px discrepancy. Maybe possible to adjust the test to avoid that but maybe not worth it?)

This one fails in Firefox with antialiasing fringe around the circle and the oval:

Found 608 pixels different, maximum difference per channel 62

https://wpt.fyi/results/css/css-masking/clip-path/svg-clip-path-fixed-values.html

Comment 3

[Daniel Holbert [:dholbert]]

We probably want to fix clip-path-polygon-013.html by making sure it ends up with whole numbers of pixels in the various sizes. It looks like it is ending up with fractional pixel values right now, which produces a different antialiasing/clipping behavior for width: [fractional pixel] vs. clip-path: [polygon with fractional pixel value]. So that's why there's fuzziness there, and it's possible & probably-better to avoid the fuzziness altogether rather than papering over it.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: Bug 1821793 part 1: Add fuzzy annotations for various mask-image WPT test-failures whose mismatching pixels are all antialiasing differences along curves. r?#layout-reviewers

See https://bugzilla.mozilla.org/show_bug.cgi?id=1821793#c2 for more info on
these failures.

In most cases here, I'm taking the fuzzy annotations from the exact values that
wpt.fyi reports for Firefox/Gecko. The only exception is for
clip-path-borderBox-1a.html, where I use a (higher) threshold taken from the
values that wpt.fyi reports for Safari/WebKit (which has a similar fuzzy
failure).

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: Bug 1821793 part 2: Use 0 margin and Ahem font in WPT clip-path-polygon-013.html, to make its computations less likely to produce fractional-pixel sizes with fuzzy failures. r?#layout-reviewers

The standard WPT viewport is 800px wide, which (as a multiple of 100) can
conveniently resolve whole-number percentages without creating a fractional
size. But the default body-margins reduce it by 16px, to 784, which is less of
a round-number percent basis.

This was producing some fractional-pixel sizes in this test, which were causing
a fuzzy failure, due to antialiasing differences between how "width" and
"clip-path" handle fractional pixel sizes.

So, this patch just removes those margins, to give us 800px as our percent
basis, which avoids fractional-pixel sizes in this test.

Depends on D172916

Comment 6

[Daniel Holbert [:dholbert]]

Try: https://treeherder.mozilla.org/jobs?repo=try&revision=82393107be7f35a85e58c654beca9895d448d5bc

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5a3009c31596
part 1: Add fuzzy annotations for various mask-image WPT test-failures whose mismatching pixels are all antialiasing differences along curves. r=emilio
https://hg.mozilla.org/integration/autoland/rev/ba75fe8fb8c0
part 2: Use 0 margin and Ahem font in WPT clip-path-polygon-013.html, to make its computations less likely to produce fractional-pixel sizes with fuzzy failures. r=emilio

Comment 8

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

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

Comment 9

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/5a3009c31596
https://hg.mozilla.org/mozilla-central/rev/ba75fe8fb8c0

Comment 10

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

Upstream PR merged by moz-wptsync-bot

Comment 11

[Daniel Holbert [:dholbert]]

Er, my patches that landed neglected to update the test that I linked in comment 0, mask-image-2.html :)

I'll spin off a new bug for that one.