1455886 - Blending across SVG elements doesn't work with WebRender

Status: NEW

(Core :: Graphics: WebRender, enhancement, P2)

Description

[Jeff Muizelaar [:jrmuizel]]

This is tested by: https://searchfox.org/mozilla-central/source/layout/reftests/svg/blend-difference-stacking.html

We marked this test as failing with webrender in the initial <svg> grouping patch.

I currently have no good ideas for how we'd make this work.

Comment 1

[Jeff Muizelaar [:jrmuizel]]

It seems like we can fix this by having a separate group when ever we have a blend item that needs to blend outside of the svg

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Also, it seems like our current behaviour is not inconsistent with other browsers and the spec.

i.e. Firefox, Chrome, and the spec all have different behaviour.

Comment 3

[Markus Stange [:mstange]]

Isolation support seems to be very spotty across the different browsers. For example, Chrome and Safari fail that reftest, but for a different reason: They don't isolate enough. There is a second box in that reftest which is wrapped in a position:absolute;z-index:1; element, which is a CSS stacking context, which should make it an isolated group.
Edge does not support mix-blend-mode.

Here's a different page which renders incorrectly in Chrome due to too much isolation: https://www.chenhuijing.com/demos/colour-diagrams/ Here, Chrome has an implicit isolated group around the page contents which does not include the page background color. Firefox correctly blends with the background color.