[css-view-transitions-2] Clarify a few nesting details (#10964)

* [css-view-transitions-2] Clarify a few nesting details

- view-transition-group is tree-scoped
- nearest/custom-ident act like contain

Closes #10780
Closes #10633

* Simplify tree-scope matching

* Make everything algorithmic

* Update Overview.bs

Co-authored-by: Khushal Sagar <[email protected]>

---------

Co-authored-by: Khushal Sagar <[email protected]>

Author: noamr

css-view-transitions-2/Overview.bs

@@ -45,6 +45,7 @@ spec:css-view-transitions-1;
 	text: view transition name; type: dfn;
 	text: group styles rule; type: dfn;
 	text: update pseudo-element styles rule; type: dfn;
+	text: document-scoped view transition name; type: dfn;
 spec:dom; type:dfn; text:document
 spec:css22; type:dfn; text:element
 spec:selectors-4; type:dfn;
@@ -884,24 +885,6 @@ and by applying ''view-transition-group'' to the internal element referencing th
 	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 [=used value=] is the element's [=nearest containing group name=].
-
-		: <dfn>nearest</dfn>
-		:: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest ancestor whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''.
-
-		: <dfn>contain</dfn>
-		:: The [=used value=] is the element's [=nearest containing group name=].
-
-			Note: Descendant elements are contained within this group by default, as it would be their element's [=nearest containing group name=].
-
-		: <dfn><<custom-ident>></dfn>
-		:: The [=used value=] is the given <<custom-ident>> if the element has an ancestor whose 'view-transition-name' [=computed value=] is that <<custom-ident>>, otherwise the element's [=nearest containing group name=]
-	</dl>
-
 # Algorithms # {#algorithms}
 
 ## Data structures ## {#cross-doc-data-structures}
@@ -1177,28 +1160,64 @@ When capturing the old or new state for an element, perform the following steps
 
 ## Capturing and applying 'view-transition-group' ## {#vt-group-algorithm}
 
-### Compute the nearest containing 'view-transition-group' ### {#vt-group-nearest-contain}
-<div algorithm="nearest containing group name">
+### Resolving the 'view-transition-group' value ### {#vt-group-value-resolve}
+
+<div algorithm="resolve the document-scoped view-transition-group">
+To get the <dfn>document-scoped view transition group</dfn> of an {{Element}} |element|, perform the following steps:
+
+	1. Let |computedGroup| be the [=computed value=] of element's 'view-transition-group' property.
+	1. If |computedGroup| is associated with |element|'s [=node document=], return |computedGroup|.
+	1. Return ''view-transition-group/normal''.
+</div>
+
+### Resolving the containing group name ### {#vt-containing-group-name-resolve}
+
+<div algorithm="resolve nearest containing group name">
+
+To resolve the <dfn>nearest containing group name</dfn> of an {{Element}} |element|, perform the following steps given a {{ViewTransition}} |viewTransition|:
+	1. Assert: |element| participates in |viewTransition|.
+	1. Let |ancestorGroup| be |element|'s nearest [=flat tree=] [=tree/ancestor=] who participates in |viewTransition| and whose [=document-scoped view transition group=] is not ''view-transition-group/normal''.
+	1. If |ancestorGroup| exists, return |ancestorGroup|'s [=document-scoped view transition name=].
+	1. Return ''view-transition-name/none''.
+</div>
+
+### Resolving the group name ### {#vt-group-name-resolve}
+
+<div algorithm="resolve used group name">
+To resolve the <dfn>used group name</dfn> of an {{Element}} |element|, perform the following steps given a {{ViewTransition}} |transition|:
 
-To get the <dfn>nearest containing group name</dfn> for an {{Element}} |element|, perform the following steps:
+	1. Assert: |element| participates in |transition|.
+	1. Let |group| be |element|'s [=document-scoped view transition group=].
+	1. Let |containingGroupName| be |element|'s [=nearest containing group name=] given |transition|.
+	1. Return the first matching statement, switching on |group|:
 
-	1. Let |nearestAncestorWithContain| be |element|'s nearest ancestor whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is ''view-transition-group/contain''.
-	1. If |nearestAncestorWithContain| is null, return ''view-transition-group/none''.
-	1. Otherwise, return |nearestAncestorWithContain|'s 'view-transition-name' [=computed value=].
+	<dl dfn-type=value dfn-for=view-transition-group>
+		: <dfn>normal</dfn>
+		: <dfn>contain</dfn>
+		:: |containingGroupName|.
+
+			Note: an element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its descendants.
+
+		: <dfn>nearest</dfn>
+		:: The [=document-scoped view transition name=] of the element's nearest [=flat tree=] ancestor which participates in the |transition|.
+
+		: <dfn><<custom-ident>></dfn>
+		:: |group| if the element has a [=flat tree=] [=tree/ancestor=] whose [=document-scoped view transition name=] is |group| and participates in |transition|; Otherwise |containingGroupName|.
+	</dl>
 </div>
 
 ### Compute the old 'view-transition-group' ### {#vt-group-capture-old}
 <div algorithm="additional old capture steps (group)">
-When  [[css-view-transitions-1#capture-old-state-algorithm|capturing the old state for an element]], perform the following steps given a [=captured element=] |capturedElement|, and an [=element=] |element|:
+When  [[css-view-transitions-1#capture-old-state-algorithm|capturing the old state for an element]], perform the following steps given a [=captured element=] |capturedElement|, a {{ViewTransition}} |transition|, and an [=element=] |element|:
 
-	1. Set |capturedElement|'s [=captured element/containing group name=] to the [=used value=] of |element|'s ''view-transition-group''.
+	1. Set |capturedElement|'s [=captured element/containing group name=] to |element|'s [=used group name=] given |transition|.
 </div>
 
 ### Compute the new 'view-transition-group' ### {#vt-group-capture-new}
 <div algorithm="additional new capture steps (group)">
-When [[css-view-transitions-1#capture-new-state-algorithm|capturing the new state for an element]], perform the following steps given a [=captured element=] |capturedElement| and an [=element=] |element|:
+When [[css-view-transitions-1#capture-new-state-algorithm|capturing the new state for an element]], perform the following steps given a [=captured element=] |capturedElement| a {{ViewTransition}} |transition|, and an [=element=] |element|:
 
-	1. Set |capturedElement|'s [=captured element/containing group name=] to the [=used value=] of |element|'s 'view-transition-group'.
+	1. Set |capturedElement|'s [=captured element/containing group name=] to |element|'s [=used group name=] given |transition|.
 </div>
 
 ### Reparent a ''::view-transition-group()'' to its specified containing group ### {#vt-group-reparent}