[LBSE] Implement SVG2 rules to establish a stacking context

• Component: SVG
• Status: RESOLVED FIXED

[Nikolas Zimmermann]

Prepare RenderLayer/RenderLayerBacking for RenderSVGModelObject support:

Follow the rules specified in https://www.w3.org/TR/SVG2/render.html#RenderingOrder, when to create a stacking context. This is necessary to enforce layer creation.

[Nikolas Zimmermann]

Created attachment 451034 [details]
Patch, v1

[Radar WebKit Bug Importer]

<rdar://problem/88860916>

[Rob Buis]

Comment on attachment 451034 [details]
Patch, v1

Does this mean we get same behaviour for SVG 1.1? Are the SVG 2 rules for this just what was already happening in SVG1.1 or are there differences?

[Nikolas Zimmermann]

(In reply to Rob Buis from comment #3)
> Comment on attachment 451034 [details]
> Patch, v1
> 
> Does this mean we get same behaviour for SVG 1.1? Are the SVG 2 rules for
> this just what was already happening in SVG1.1 or are there differences?

Thanks for asking, unfortunately I'll have to expand a bit on that to give a proper answer: Neither SVG 1.1, nor SVG 1.1 Second Edition define/use the term "stacking context" -- however it is an essential concept at the core of CSS, used throughout many CSS specifications. Specifying CSS masks or clipping operations result in the creation of a "stacking context".

SVG 1.1 on the other hand, when defining clipping/masking operations talks about "offscreen RGBA images", initialized to 'transparent black' where e.g. the <mask> content is painted to and a set of rules how to "blend" those transparent offscreen images to final accumulated buffer representing the whole document.
SVG 1.1 group opacity description: https://www.w3.org/TR/SVG11/masking.html#ObjectAndGroupOpacityProperties)
SVG 1.1 masking: https://www.w3.org/TR/SVG11/masking.html#Masking

So how does SVG2 improve the situation? SVG2 defines that SVG elements establish stacking contexts, re-using the definitions from CSS. The whole rendering model for SVG was re-written in accordance with both SVG 1.1 SE (with minor differences only in previously un-spec'ed territory) and CSS Compositing and Blending https://www.w3.org/TR/compositing-1/ (Nikos from Canon was behind the SVG integration parts in 2012).
This naturally defines how CSS/SVG interoperate, in terms of stacking context, mix-blend mode support. It also describes under which circumstances 3D transformations are flattened for SVG content, etc. bridging the gap between SVG/CSS worlds.
Now back to SVG clipping/masking: SVG2 no longer talks about offscreen RGBA images, but directly redirects to CSS Masking Module Level 1: "Both, clipping and masking, are specified in the module CSS Masking [css-masking-1]."

From https://www.w3.org/TR/css-masking-1/#the-clip-path:
"A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.".

Tada, a stacking context is created for masks within SVG elements :-)
The whole concepts of SVG2 were properly integrated within the CSS cousins, merged and defined in interoperable ways.

SVG 1.1 was it's own animal, SVG2 is a first-class citizen in CSS world -- that was and is the original motivation for the whole LBSE work: the same unification that was done in the specs, applied to WebKit.

I could go on for all the other criteria in that list, but you'll get the picture :-)
Exciting no, how all the terminology changed? :-) And how the spec efforts really now paint a coherent picture of HTML5/SVG2 integration -- only stuff we could dream of when you began the initial 'CDF' support in 2004 :-)

[Nikolas Zimmermann]

Created attachment 452343 [details]
Patch, v2

[Nikolas Zimmermann]

I've removed the non-ASCII quotes from the comments and expanded the ChangeLog a bit, based on your question and my answer here on the ticket.

[Nikolas Zimmermann]

Committed r290254 (?): <https://commits.webkit.org/r290254>

[Nikolas Zimmermann]

Thanks Rob!