1824804 - WPT failure in css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Daniel Holbert [:dholbert]]

Firefox fails this WPT:
https://wpt.fyi/results/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg
http://wpt.live/css/css-masking/clip-path-svg-content/mask-nested-clip-path-001.svg

The test expects there to be a 2x2 grid of white squares over the green square. Firefox is failing to render the bottom-right white square.

That square seems to be defined by #clip0, which in turn is used by a clipping path inside the definition for another clipping path, #clip2. (i.e. if I adjust the height of #clip0 in Chrome, then I see that bottom-right white square changing its height accordingly)

Something's going wrong at some point in the chain of applying that clipping path, I guess.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Here's a somewhat reduced testcase, where I've snipped out a version of the clipPath here and I'm varying the transform that's applied to it.

We render this testcase with quite noticeably different sizes & positions for the colorful bars, as compared to Chromium & WebKit.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox vs. WebKit (epiphany) & Chrome on reduced testcase

Here's a screenshot comparing our rendering (left) vs. other browser engines. Red arrows show the most visibly-different sections.

Comment 3

[Daniel Holbert [:dholbert]]

The rendering difference goes back a long ways; Chrome 15 (the oldest version I can test on BrowserStack, on Win7 / XP) looks like it matches current Chrome on my attached reduced-testcase; and Firefox 6 (just the oldest version I tested) matches current Firefox.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 2

Here's a simpler reduced testcase, comparing a clipped rect vs. what-that-clipped-rect-looks-like-when-used-itself-as-a-clip-path-for-another-rect.

The Blue/Teal pair have a 1x scale on the rect, while the Brown/Orange pair have a 2x horizontal scale.

Firefox renders the orange rect skinnier than other browsers. It looks like we're applying the "clip-to-#inner" operation after applying the 2x scale in that case, instead of beforehand; or something to that effect.

Comment 5

[Daniel Holbert [:dholbert]]

CC'ing longsonr in case he's interested to poke at this SVG interop issue (though no pressure if you don't have cycles).

Comment 6

[Robert Longson [:longsonr]]

Attachment: Bug 1824804 - apply transform for clipPaths that are children of clipPaths r=dholbert

Comment 7

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=fa56742fd12c69096c5eccd9100e91376e8749b6

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e29e3f98d069
apply transform for clipPaths that are children of clipPaths r=dholbert

Comment 9

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/e29e3f98d069