diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 31b8a8e30208..725bca510433 100644 --- a/css-view-transitions-2/Overview.bs +++ b/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
@@ -205,7 +206,56 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		```
 	
 
+# Pseudo-classes # {#pseudo-classes}
 
+## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo}
+
+The :active-view-transition(<>) pseudo-class applies to the root element of the document, if it has a matching [=active view transition=].
+It has the following syntax definition:
+
+
+	:active-view-transition(<>)
+	<vt-type-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: + +* The <> is ''*'' +* |viewTransition|'s [=ViewTransition/active types=] [=list/contains=] at least one of the <> values of the <>. + +
+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) {} +``` +
# CSS rules # {#css-rules} @@ -264,6 +314,34 @@ Note: this event is fired when [=reveal document|revealing a document=]. The viewTransition [=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} + + + dictionary StartViewTransitionOptions { + UpdateCallback? update = null; + sequence<DOMString>? types = null; + }; + + partial interface Document { + + ViewTransition startViewTransition((UpdateCallback or StartViewTransitionOptions?) callbackOptionsOrNull); + }; + + +### {{Document/startViewTransition(options)}} Method Steps ### {#ViewTransition-start-with-options} + +
+ The [=method steps=] for startViewTransition(|callbackOptionsOrNull|) 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|. +
+ # Algorithms # {#algorithms} @@ -283,6 +361,9 @@ The viewTransition [=getter steps=] are
: is inbound cross-document transition :: a boolean, initially false. + + : active types + :: Null or a [=list=] of strings, initially null.
## Monkey patches to HTML ## {#monkey-patch-to-html}