From bd11f285f7eb194d4143e4d2e87f9fd880b44663 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 14 Mar 2024 16:12:30 +0000 Subject: [PATCH] [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 https://github.com/w3c/csswg-drafts/issues/9542#issuecomment-1994829341 - Separate `:active-view-transition` and `:active-view-transition-type` See https://github.com/w3c/csswg-drafts/issues/9972#issuecomment-1994889933 - Add notes about types being bound to one document See https://github.com/w3c/csswg-drafts/issues/9526#issuecomment-1994844676 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> --- css-view-transitions-2/Overview.bs | 82 ++++++++++++++++++++---------- 1 file changed, 56 insertions(+), 26 deletions(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index d018d5e2d67c..24c8997a0b98 100644 --- a/css-view-transitions-2/Overview.bs +++ b/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 :active-view-transition(<>) pseudo-class applies to the root element of the document, if it has a matching [=active view transition=]. +The :active-view-transition pseudo-class applies to the root element of the document, if it has an [=active view transition=]. It has the following syntax definition: 
-	:active-view-transition(<>)
-	<vt-type-selector> = '*' | <>#
+	:active-view-transition
-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 <> is ''*'' -* |viewTransition|'s [=ViewTransition/active types=] [=list/contains=] at least one of the <> values of the <>. +## Active View Transition Type Pseudo-class '':active-view-transition-type()'' ## {#the-active-view-transition-type-pseudo} + +The :active-view-transition-type() 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-type(<>#)
+
+ +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 <> arguments. + +## Examples ## {#active-view-transition-pseudo-examples}
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) {} ```
@@ -435,6 +447,9 @@ Note: as per default behavior, the ''@view-transition'' rule can be nested insid The 'type' 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|. @@ -529,13 +544,23 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. ### Additions to {{ViewTransition}} ### {#view-transitions-extension} + The {{ViewTransition}} interface is extended as follows: + +
+partial interface ViewTransition {
+	readonly attribute DOMTokenList typeList;
+};
+
+ + The {{ViewTransition/typeList}} [=getter steps=] are to return [=this=]'s [=ViewTransition/active types=]. + A {{ViewTransition}} additionally has:
: outbound post-capture steps :: Null or a set of steps, initially null. : active types - :: Null or a [=list=] of strings, initially null. + :: A {{DOMTokenList}}, initially a new {{DOMTokenList}}.
### 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=]. ### 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: