[css-view-transitions-2] Initial spec for nested view transitions

This specifies the new 'view-transition-group' CSS property and how it used,
with some overview and an initial example.

Based on [this resolution](w3c#10334 (comment)).

There are still a lot of open issues but we will open them separately to avoid inflating the initial issue.

Closes w3c#10334

Author: noamr

css-view-transitions-2/Overview.bs

@@ -38,6 +38,8 @@ spec:css-view-transitions-1;
 	text: setup view transition; type: dfn;
 	text: named view transition pseudo-element; type: dfn;
 	text: rendering suppression for view transitions; type: dfn;
+	text: view transition tree; type: dfn;
+	text: view transition name; type: dfn;
 spec:dom; type:dfn; text:document
 spec:css22; type:dfn; text:element
 spec:selectors-4; type:dfn;
@@ -52,6 +54,7 @@ spec:html
 	text: has been revealed; type: dfn;
 	text: render-blocking mechanism; type: dfn;
 spec:infra; type:dfn; text:list
+spec:css-borders-4; type: property; text:border-radius;
 </pre>
 
 <style>
@@ -732,6 +735,95 @@ div.box {
 		1. Return |viewTransition|.
 	</div>
 
+# Nested view-transitions # {#nested-view-transitions}
+
+## Overview ## {#nested-overview}
+
+*This section is non-normative.*
+
+By default, setting `view-transition-name` on multiple elements generates a flat [=view transition tree=], where all the ''::view-transition-group()'' pseudo-elements are children of the ''::view-transition'' pseudo-element.
+This is sufficient for many simple use-cases, but there are some styling use-cases that cannot be achieved with a flat tree.
+The most prominent use-case is clipping: with a flat tree, all pseudo-elements are clipped to the root element, so clipping elements in the normal tree would lose their clipping during the view-transition, resulting in a broken visual effect.
+The effects that have can have an unexpected visual effect in a flat tree:
+* Clipping ('overflow', 'clip-path', 'border-radius'): clipping affects the children of the element.
+* 'opacity', 'mask-image'' and 'filter': These effects that are designed to work on a fully rasterized image of a tree, rather than on each item individually.
+* 3D transforms ('transform-style', 'transform', 'perspective'): to display the full range of 3D transform animations, some hierarchy needs to be kept.
+
+To enable these use case, this specification introduces the concept of nesting view-transition pseudo-elements. By using the 'view-transition-group' CSS property,
+the author can assign a "parent group" for a generated ''::view-transition-group()'' pseudo-element, creating a hierarchy in the view-transition [=view transition tree=].
+
+## Examples ## {#nested-vt-example}
+
+<div class="example">
+This example creates a transition where the [=view transition tree=] is nested instead of flat:
+
+```html
+<section class="container">
+	<article>Content</article>
+</section>
+```
+
+```css
+.container {
+	view-transition-name: container;
+}
+
+.container,
+::view-transition-group(container) {
+	clip-path: circle();
+}
+
+article {
+	view-transition-name: article;
+	view-transition-group: section;
+}
+```
+
+By applying the ''clip-path'' to both the containing element and its generated pseudo-element, we preserve the clip during the transition,
+and by applying ''view-transition-group'' to the internal element referencing the container, we make the tree "nested" in a way that would apply this clipping.
+</main>
+
+## The 'view-transition-group' property ## {#view-transition-group-prop}
+
+	<pre class=propdef>
+	Name: view-transition-group
+	Value: normal | contain | nearest | <<custom-ident>>
+	Initial: normal
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
+	</pre>
+
+	The 'view-transition-group' property can be used in conjuction with 'view-transition-name' to generate a hierarchy of [=named view transition pseudo-element=].
+
+	The [=used value=] for 'view-transition-group' resolves to a 'view-transition-name' in its ancestor chain, or to ''view-transition-name/none''. When generating the [=named view transition pseudo-element=], the ''::view-transition-group()'' with that name
+	would be the parent of the ''::view-transition-group()'' generated for this element's 'view-transition-name'.
+
+	When the [=computed value=] of 'view-transition-name' for an element is ''view-transition-name/none'', its 'view-transition-group' [=used value=] is always resolved to ''view-transition-name/none'' as well.
+
+	<dl dfn-type=value dfn-for=view-transition-group>
+		: <dfn>normal</dfn>
+		:: The '':view-transition-group()'' generated by this element's 'view-transition-name' should be a child of the ''::view-transition'' pseudo-element,
+			or of the nearest ancestor with a 'view-transition-group' [=computed value=] of ''view-transition-group/contain''.
+
+		: <dfn>nearest</dfn>
+		:: The '':view-transition-group()'' generated by this element's 'view-transition-name' should be a child of the ''::view-transition-group()'' pseudo-element
+			generated by the nearest ancestor with a 'view-transition-name'.
+
+		: <dfn>contain</dfn>
+		:: This is equivalent to ''view-transition-group/normal'', except descendants with a [=computed value=] of ''view-transition-group/normal'' resolve this element's 'view-transition-name'.
+
+		: <dfn><<custom-ident>></dfn>
+		:: The '':view-transition-group()'' generated by this element's 'view-transition-name' should be a child of the ''::view-transition-group()'' pseudo-element
+			that matches the given <<custom-ident>>.
+	</dl>
+
+## Changes to '':view-transition-group()'' ## {#pseudo-element-hierarchy-nested}
+
+When the view [=view transition tree=] is generated, every generated ''::view-transition-group()'' becomes a child of an existing ''::view-transition-group()'' with the same name as its generating element's 'view-transition-group'.
+
+
 # Algorithms # {#algorithms}
 
 ## Data structures ## {#cross-doc-data-structures}
@@ -778,6 +870,9 @@ The [=captured element=] struct should contain these fields, in addition to the
 	<dl>
 		: <dfn for="captured element">class list</dfn>
 		:: a [=/list=] of strings, initially empty.
+
+		: <dfn for="captured element">containing group</dfn>
+		:: Null or a string, initially null.
 	</dl>
 
 ## Resolving the ''@view-transition'' rule ## {#vt-rule-algo}
@@ -983,6 +1078,30 @@ When capturing the old or new state for an element, perform the following steps
 	Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.
 </div>
 
+## Capturing and applying 'view-transition-group' ## {#vt-group-algorithm}
+
+<div algorithm="additional capture steps (group)">
+When capturing the old or new state for an element, perform the following steps given a [=captured element=] |capturedElement| and an [=element=] |element|:
+
+	1. Set |capturedElement|'s [=captured element/containing group=] to the [=used value=] of |element|'s 'view-transition-group'.
+</div>
+
+<div algorithm="additional pseudo-element setup steps (group)">
+When setting up the transition pseudo-element for a [=captured element=] |capturedElement|, given a |transitionName|:
+
+	1. If |capturedElement|'s [=containing group=] is not null, then:
+
+		1. Let |group| be the ''::view-transition-group()'',
+			with its [=view transition =name=] set to |transitionName|.
+
+		1. Let |parentGroup| be the ''::view-transition-group()'',
+			with its [=view transition name=] set to |capturedElement|'s [=containing group=].
+
+		1. Append |group| to |parentGroup|.
+</div>
+
+
+
 <h2 id="priv" class="no-num">Privacy Considerations</h2>
 
 This specification introduces no new privacy considerations.