[css-view-transitions-2] Spec view-transition-scope (#13390)

* Spec view-transition-scope

Author: vmpstr

css-view-transitions-2/Overview.bs

@@ -639,7 +639,7 @@ Note: An <code>element.startViewTransition()</code> call does not update
 			[=Skip the view transition|skip=] |viewTransition| with an "{{InvalidStateError}}" {{DOMException}}.
 
 		1. If [=this=] is not the [=/root element|document root element=],
-			force [=this=] to have [=layout containment=] for the duration of the transition.
+			force [=this=] to have both [=layout containment=] and [=view transition scoping=] for the duration of the transition.
 
 		1. If |document|'s [=active view transition=] is not null and its [=outbound post-capture steps=] is not null,
 			then:
@@ -935,29 +935,94 @@ the active view transition of an element is exposed to script via a property on
 	- Are [[css-transforms-2#grouping-property-values|flattened in 3D transforms]].
 	- Form a [=backdrop root=].
 
-## Isolating Scoped View Transition Names: the ''contain/view-transition'' containment value ## {#contain-view-transition}
+## Isolating Scoped View Transition Names: the 'view-transition-scope' property ## {#view-transition-scope-prop}
 
-	ISSUE: This property is subject to change, see https://github.com/w3c/csswg-drafts/issues/13123.
-		The behavior described here is likely to remain, but the property is likely to change.
-
-	<pre class="propdef partial">
-	Name: contain
-	New Values: view-transition
+	<pre class="propdef">
+	Name: view-transition-scope
+	Value: none | auto
+	Initial: none
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
 	</pre>
 
-	The ''contain: view-transition'' value establishes <dfn export>view transition name containment</dfn> on an element.
-	This causes any [=document-scoped view transition names=] to only be visible
-	for [=view transitions=] scoped to this element or its descendants.
+	Note: Although 'view-transition-scope' is [=discrete|discretely animatable=],
+	it only has an effect during 'view-transition-name' discovery
 
-	Note: Most elements running a [=scoped view transition=]
-	should use [=view transition name containment=],
-	to ensure that their [=document-scoped view transition names=]
-	don't accidentally interfere with other [=scoped view transitions=].
-	Otherwise, two similar elements running the same [=scoped view transition=],
-	expecting the same-named descendants,
-	will see each other's names and abort
-	(since [=view transitions=] don't allow multiple elements to have the same 'view-transition-name').
+	<dl dfn=type=value dfn-for=view-transition-scope>
+		: <dfn>none</dfn>
+		:: This property has no effect on 'view-transition-name' discoverability.
 
+		: <dfn>auto</dfn>
+		:: Discoverability of 'view-transition-name' is limited to the subtree of this element.
+			This is done by applying <dfn>view transition scoping</dfn>.
+			Such scoping means that any transitions that originate outside of the element
+			will not discover a non-none 'view-transition-name' either on this element
+			or in its flat-tree descedants.
+
+			<div class=example>
+				```html
+				<style>
+				.scope { view-transition-scope: auto; }
+				#a { view-transition-name: a; }
+				#b { view-transition-name: b; }
+				#c { view-transition-name: c; }
+				#d { view-transition-name: d; }
+				</style>
+
+				<div id=a>
+					<div id=b class=scope>
+						<div id=c></div>
+					</div>
+					<div id=d></div>
+				</div>
+
+				<script>
+				...
+				a.startViewTransition(); // Will discover "a" and "d" view-transition-names
+				b.startViewTransition(); // Will discover "b" and "c" view-transition-names
+				...
+				</script>
+				```
+			</div>
+
+			Note: Starting a transition implies that [=this=] element has ''view-transition-scope: auto''
+			for the duration of the transition.
+
+			<div class=example>
+				```html
+				<style>
+				#a { view-transition-name: a; }
+				#b { view-transition-name: b; }
+				#c { view-transition-name: c; }
+				#d { view-transition-name: d; }
+				</style>
+
+				<div id=a>
+					<div id=b>
+						<div id=c></div>
+					</div>
+					<div id=d></div>
+				</div>
+
+				<script>
+				...
+				b.startViewTransition(); // Will discover "b" and "d" view-transition-names
+
+				// While b's transition is active and running, the following will only discover
+				// "a" and "d" view transition names, since b has a forced view-transition-scope: auto.
+				b.startViewTransition()
+				...
+				</script>
+				```
+			</div>
+	</dl>
+
+	Note: Most elements running or planning to run a [=scoped view transition=]
+	should use ''view-transition-scope: auto'', to ensure that their
+	[=document-scoped view transition names=] don't accidentally interfere with
+	other [=scoped view transitions=] in the ancestor chain.
 
 # Nested View Transition Groups # {#nested-vt}
 
@@ -3184,6 +3249,7 @@ To <dfn>adjust nested view transition group transform</dfn> given a |transform|
 				1. Decrement [=this=]'s [=wait until promise count=].
 
 				Note: If [=this=]'s [=wait until promise count=] is 0, the transition will finish at the next [=rendering opportunity=].
+	</div>
 
 ## [=Handle transition frame=] ## {#handle-transition-frame-algorithm}
 
@@ -3397,6 +3463,7 @@ This appendix is <em>informative</em>.
 Changes from <a href="https://www.w3.org/TR/2024/WD-css-view-transitions-2-20240516/">2024-05-16 Working Draft</a>
 </h3>
 
+* Replace `contain: view-transition` with `view-transition-scope` property (<a href="https://github.com/w3c/csswg-drafts/issues/13123">pending #13123</a>)
 * Reorder sections, editorial changes, added several issues, updated scoped view transition wording.
 * Add waitUntil() (<a href="https://github.com/w3c/csswg-drafts/issues/9901">#9901</a>)
 * First pass at layered capture (<a href="https://github.com/w3c/csswg-drafts/issues/10585">#10585</a>)