[css-view-transitions-2] Add transition types (#9385)

* Transition types

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

css-view-transitions-2/Overview.bs

@@ -41,6 +41,7 @@ spec:html
 	text: run the animation frame callbacks; type: dfn;
 	text: unload; type: dfn;
 	text: update the rendering; type: dfn;
+spec:infra; type:dfn; text:list
 </pre>
 
 <pre class=anchors>
@@ -205,7 +206,56 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		```
 	</div>
 
+# Pseudo-classes # {#pseudo-classes}
 
+## 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=].
+It has the following syntax definition:
+
+<pre class=prod>
+	:active-view-transition(<<vt-type-selector>>)
+	<dfn>&lt;vt-type-selector></dfn> = '*' | <<custom-ident>>#
+</pre>
+
+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:
+
+* 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>>.
+
+<div class=example>
+For example, the developer might start a transition in the following manner:
+```js
+document.startViewTransition({update: updateTheDOMSomehow, types: ["slide-in", "reverse"]});
+```
+
+This will activate any of the following '::active-view-transition()'' 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(*) {}
+```
+
+While starting a transition without selecting transition types, would only activate '::active-view-transition()'' with ''*'':
+
+```js
+document.startViewTransition(updateTheDOMSomehow);
+// or
+document.startViewTransition({update: updateTheDOMSomehow});
+```
+
+```css
+/* This would be active */
+:root { }
+: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) {}
+```
+</div>
 
 # CSS rules # {#css-rules}
 
@@ -264,6 +314,34 @@ Note: this event is fired when [=reveal document|revealing a document=].
 The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are to return the
 [=inbound cross-document view-transition=] for [=this's=] [=relevant global object's=] [=associated document=].
 
+## Additions to {{Document}} ## {#additions-to-document-api}
+
+	<xmp class=idl>
+		dictionary StartViewTransitionOptions {
+			UpdateCallback? update = null;
+			sequence<DOMString>? types = null;
+		};
+
+		partial interface Document {
+
+			ViewTransition startViewTransition((UpdateCallback or StartViewTransitionOptions?) callbackOptionsOrNull);
+		};
+	</xmp>
+
+### {{Document/startViewTransition(options)}} Method Steps ### {#ViewTransition-start-with-options}
+
+	<div algorithm="start-vt-with-options">
+		The [=method steps=] for <dfn method for=Document>startViewTransition(|callbackOptionsOrNull|)</dfn> are as follows:
+
+		1. If |callbackOptionsOrNull| is an {{UpdateCallback}} or null, then run the [=method steps=] for {{Document/startViewTransition(updateCallback)}} given |callbackOptionsOrNull| and return the result.
+
+		1. Let |viewTransition| be the result of running [=method steps=] for {{Document/startViewTransition(updateCallback)}} given |callbackOptionsOrNull|'s {{StartViewTransitionOptions/update}}.
+
+		1. Set |transition|'s [=ViewTransition/active types=] to |callbackOptionsOrNull|'s {{StartViewTransitionOptions/types}}.
+
+		1. Return |viewTransition|.
+	</div>
+
 
 
 # Algorithms # {#algorithms}
@@ -283,6 +361,9 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
 	<dl dfn-for=ViewTransition>
 		: <dfn>is inbound cross-document transition</dfn>
 		:: a boolean, initially false.
+
+		: <dfn>active types</dfn>
+		:: Null or a [=list=] of strings, initially null.
 	</dl>
 
 ## Monkey patches to HTML ## {#monkey-patch-to-html}