[css-view-transitions-2] Apply resolutions for view-transition types (#10072)

* [css-view-transitions-2] Apply resolutions for view-transition types

- Make types mutable using ViewTransition.typeList
#9542 (comment)

- Separate `:active-view-transition` and `:active-view-transition-type`
See #9972 (comment)

- Add notes about types being bound to one document
See #9526 (comment)

Closes #9972
Closes #9542
Closes #9526
Closes #9626

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

---------

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

Author: noamr

css-view-transitions-2/Overview.bs

@@ -290,39 +290,51 @@ for multiple view transition pseudo elements without having to replicate the cor
 
 # Pseudo-classes # {#pseudo-classes}
 
-## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo}
+## Active View Transition Pseudo-class '':active-view-transition()'' ## {#the-active-view-transition-pseudo}
 
-The <dfn id='active-view-transition-pseudo'>:active-view-transition(<<vt-type-selector>>)</dfn> pseudo-class applies to the root element of the document, if it has a matching [=active view transition=].
+The <dfn id='active-view-transition-pseudo'>:active-view-transition</dfn> pseudo-class applies to the root element of the document, if it has an [=active view transition=].
 It has the following syntax definition:
 
 <pre class=prod>
-	:active-view-transition(<<vt-type-selector>>)
-	<dfn>&lt;vt-type-selector></dfn> = '*' | <<custom-ident>>#
+	:active-view-transition
 </pre>
 
-The [=specificity=] of an '':active-view-transition()'' is one pseudo-class selector if it has value is ''*'', and two if it has any other value.
+The [=specificity=] of an '':active-view-transition'' is one pseudo-class selector.
 
-An '':active-view-transition()'' pseudo-class matches the [=document element=] when it has an non-null [=active view transition=] |viewTransition|, for which any of the following are true:
+An '':active-view-transition'' pseudo-class matches the [=document element=] when its [=node document=] has an non-null [=active view transition=].
 
-* The <<vt-type-selector>> is ''*''
-* |viewTransition|'s [=ViewTransition/active types=] [=list/contains=] at least one of the <<custom-ident>> values of the <<vt-type-selector>>.
+## Active View Transition Type Pseudo-class '':active-view-transition-type()'' ## {#the-active-view-transition-type-pseudo}
+
+The <dfn id='active-view-transition-type-pseudo'>:active-view-transition-type()</dfn> pseudo-class applies to the root element of the document, if it has a matching [=active view transition=].
+It has the following syntax definition:
+
+<pre class=prod>
+	:active-view-transition-type(<<custom-ident>>#)
+</pre>
+
+The [=specificity=] of an '':active-view-transition-type()'' is two pseudo-class selectors.
+
+An '':active-view-transition-type()'' pseudo-class matches the [=document element=] when its [=node document=] has an non-null [=active view transition=],
+whose [=ViewTransition/active types=] [=list/contains=] at least one of the <<custom-ident>> arguments.
+
+## Examples ## {#active-view-transition-pseudo-examples}
 
 <div class=example>
 For example, the developer might start a transition in the following manner:
 ```js
-document.startViewTransition({update: updateTheDOMSomehow, types: ["slide-in", "reverse"]});
+document.startViewTransition({update: updateTheDOMSomehow, type: ["slide-in", "reverse"]});
 ```
 
-This will activate any of the following ':active-view-transition()'' selectors:
+This will activate any of the following ':active-view-transition-type()'' selectors:
 ```css
-:root:active-view-transition(slide-in) {}
-:root:active-view-transition(reverse) {}
-:root:active-view-transition(slide-in, reverse) {}
-:root:active-view-transition(slide-in, something-else) {}
-:root:active-view-transition(*) {}
+:root:active-view-transition-type(slide-in) {}
+:root:active-view-transition-type(reverse) {}
+:root:active-view-transition-type(slide-in, reverse) {}
+:root:active-view-transition-type(slide-in, something-else) {}
+:root:active-view-transition {}
 ```
 
-While starting a transition without selecting transition types, would only activate ':active-view-transition()'' with ''*'':
+While starting a transition without providing transition types, would only activate ':active-view-transition'':
 
 ```js
 document.startViewTransition(updateTheDOMSomehow);
@@ -333,11 +345,11 @@ document.startViewTransition({update: updateTheDOMSomehow});
 ```css
 /* This would be active */
 :root { }
-:root:active-view-transition(*) {}
+:root:active-view-transition {}
 
 /* This would not be active */
-:root:active-view-transition(slide-in) {}
-:root:active-view-transition(any-type-at-all-except-star) {}
+:root:active-view-transition-type(slide-in) {}
+:root:active-view-transition-type(any-type-at-all-except-star) {}
 ```
 </div>
 
@@ -435,6 +447,9 @@ Note: as per default behavior, the ''@view-transition'' rule can be nested insid
 	The '<dfn for="@view-transition">type</dfn>' descriptor sets the [=ViewTransition/active types=] for the transition
 	when capturing and performing the transition, equivalent to calling {{Document/startViewTransition(callbackOptions)}} with that {{StartViewTransitionOptions/type}}.
 
+	Note: the [=@view-transition/type=] descriptor only applies to the {{Document}} in which it is defined.
+	The author is responsible for using their chosen set of types in both documents.
+
 # API # {#api}
 
 ## Additions to {{Document}} ## {#additions-to-document-api}
@@ -473,7 +488,7 @@ Note: as per default behavior, the ''@view-transition'' rule can be nested insid
 
 		1. Let |viewTransition| be the result of running the [=method steps=] for {{Document/startViewTransition(updateCallback)}} given |updateCallback|.
 
-		1. If |callbackOptions| is a {{StartViewTransitionOptions}}, then set |viewTransition|'s [=ViewTransition/active types=] to |callbackOptions|'s {{StartViewTransitionOptions/type}}.
+		1. If |callbackOptions| is a {{StartViewTransitionOptions}}, set |viewTransition|'s [=ViewTransition/active types=]'s [=DOMTokenList/token set=] to a [=list/clone=] of {{StartViewTransitionOptions/type}} as a [=/set=].
 
 		1. Return |viewTransition|.
 	</div>
@@ -529,13 +544,23 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
 
 ### Additions to {{ViewTransition}} ### {#view-transitions-extension}
 
+	The {{ViewTransition}} interface is extended as follows:
+
+<pre class='idl'>
+partial interface ViewTransition {
+	readonly attribute DOMTokenList typeList;
+};
+</pre>
+
+	The {{ViewTransition/typeList}} [=getter steps=] are to return [=this=]'s [=ViewTransition/active types=].
+
 	A {{ViewTransition}} additionally has:
 	<dl dfn-for=ViewTransition>
 		: <dfn>outbound post-capture steps</dfn>
 		:: Null or a set of steps, initially null.
 
 		: <dfn>active types</dfn>
-		:: Null or a [=list=] of strings, initially null.
+		:: A {{DOMTokenList}}, initially a new {{DOMTokenList}}.
 	</dl>
 
 ### Additions to [=captured element=] struct ### {#additions-to-captured-element-struct}
@@ -626,9 +651,9 @@ Prepend this to the [=Perform pending transition operations=] algorithm given a
 
 		1. Let |typesDescriptor| be |matchingRule|'s [=@view-transition/type=] descriptor.
 
-		1. If |typesDescriptor|'s [=computed value=] is ''@view-transition/type/none'', then return a [=/list=] « ».
+		1. If |typesDescriptor|'s [=computed value=] is ''@view-transition/type/none'', then return a [=/set=] « ».
 
-		1. Return a [=list=] of strings corresponding to |typesDescriptor|'s [=computed value=].
+		1. Return a [=/set=] of strings corresponding to |typesDescriptor|'s [=computed value=].
 	</div>
 
 ### Setting up the view-transition in the old {{Document}} ###  {#setup-old-document-vt}
@@ -674,8 +699,13 @@ Prepend this to the [=Perform pending transition operations=] algorithm given a
 			Note: this means that any running transition would be skipped when the document is ready
 			to unload.
 
-		1. Let |outboundTransition| be a new {{ViewTransition}} object in |oldDocument|'s [=relevant Realm=],
-			whose [=ViewTransition/active types=] is |resolvedRule|.
+		1. Let |outboundTransition| be a new {{ViewTransition}} object in |oldDocument|'s [=relevant Realm=].
+
+		1. Set |outboundTransition|'s [=ViewTransition/active types=]'s [=DOMTokenList/token set=] to |resolvedRule|.
+
+			Note: the [=ViewTransition/active types=] are not shared between documents.
+			Manipulating the {{ViewTransition/typeList}} in the new document does not affect the types in the new document,
+			which would be read from the [=@view-transition/type=] descriptor once the document is revealed.
 
 			Note: the {{ViewTransition}} is skipped once the old document is hidden.
 
@@ -730,7 +760,7 @@ Prepend this to the [=Perform pending transition operations=] algorithm given a
 
 		1. Set |transition|’s [=ViewTransition/phase=] to "`update-callback-called`".
 
-		1. Set |transition|'s [=ViewTransition/active types=] to |resolvedRule|.
+		1. Set |transition|'s [=ViewTransition/active types=]'s [=DOMTokenList/token set=] to |resolvedRule|.
 
 		1. At any given time, the UA may decide to skip the inbound transition, e.g. after an [=implementation-defined=] timeout.
 			To do so, the UA should [=queue a global task=] on the [=DOM manipulation task source=] given |document|'s [=relevant global object=] to perform the following step: