[css-view-transitions-1] Where is “effects” defined?

[fantasai]

In https://drafts.csswg.org/css-view-transitions-1/#capture-rendering-characteristics-algorithm

Effects applied on the element and its descendants, such as opacity and filter, are applied to the capture. Effects applied to the element from its ancestors are ignored.

Where is “Effects” as used in this step defined? Are transforms “effects”? What about relative positioning? What about clipping? What about text decoration?

[khushalsagar]

Where is “Effects” as used in this step defined? Are transforms “effects”? What about relative positioning? What about clipping? What about text decoration?

This is about visual effects which apply to the content of an element and its descendants. The exact effects are: transform, filter, backdrop-filter, clip-path, mask / mask-image / mask-border, opacity.

• If the effect is on the element being captured, it will appear in the image.
• If the effect is on an ancestor (but would've affected the visual state of the element being captured), it won't appear in the image.

transform is an exception as specified here.

But maybe including these effects in the snapshot is perhaps implied by the statement here : "Render element and its descendants, at the same size it appears in its node document, over an infinite transparent canvas, following the capture rendering characteristics."?

So I can either make this a non-normative note. Or update the spec text to mention this exact list of effects.

[dbaron]

So I think this is trying to hook into a process that's unfortunately not fully written down clearly. It's sort of specified vaguely across a few places that spell out pieces of it:

https://drafts.fxtf.org/filter-effects-1/#placement https://drafts.fxtf.org/filter-effects-1/#FilterProperty https://drafts.fxtf.org/css-masking-1/#placement https://drafts.fxtf.org/compositing-1/#compositingandblendingorder https://www.w3.org/TR/SVG2/render.html#Grouping

In essence this model describes a sequence of operations that happen in a particular order whenever an element that establishes an isolated group (which is at least somewhat defined in https://drafts.fxtf.org/compositing-1/ ) is being drawn:

1. drawing of descendants into the element's canvas
2. filter
3. clip / clip-path / mask / opacity
4. transform
5. draw into parent/ancestor group while applying mix-blend-mode and compositing

(At least, I think that's what the spec is saying, and I hope it's correct!)

I think this should be specified more clearly in a painting model spec (see #4965). Also note that https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS does specify that anything that establishes a stacking context establishes an isolated group.

I think maybe the essence of what the view transitions spec should be saying is that the capture gets inserted between steps 3 and 4 above in the process of rendering the element itself (into an isolated group). This implies that all of the descendants are rendered normally (with the caveat that the view transition element is a backdrop root, as the spec already notes). I think this logic would also imply that mix-blend-mode on the element itself would be ignored in a way similar to the way transform is when computing the capture. (I think it's worth checking whether that's already what the Chromium implementation does.)

If that makes conceptual sense, I think another question is then how to write it in spec language between the above cited section and perhaps also fitting some of it in https://drafts.csswg.org/css-view-transitions/#named-and-transitioning , to which it is closely related.

I'd also note that I think @chrishtr knows these property interactions better than I do, and may have ideas here.

[chrishtr]

(At least, I think that's what the spec is saying, and I hope it's correct!)

This sounds correct to me also.

[khushalsagar]

I think maybe the essence of what the view transitions spec should be saying is that the capture gets inserted between steps 3 and 4 above in the process of rendering the element itself (into an isolated group).

That sounds correct. Ideal would be if the steps you mentioned above were defined in a painting spec, as a general algorithm for how an element is rendered. And VT could refer to it.