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? 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}