From d49b54adfdcda414d308096a8e067ea7cc9caeaf Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Mon, 8 Jan 2024 12:39:21 +0000 Subject: [PATCH 1/7] [css-view-transitions-2] Add 'view-transition-class' A `view-transition-class` property allows specifying view-transition pseudo-elements that apply to multiple participating elements without having to replicate them. In this PR: - Specifying `view-transition-class` - Extending the pseudo-element syntax to support `::view-transition-foo(name.class)` - Extending the capture algorithms and data structure to capture the classes - Added a simple example for using classes Based on [this resolution](https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1876155920). Closes #8319 --- css-view-transitions-1/Overview.bs | 2 +- css-view-transitions-2/Overview.bs | 129 +++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 1 deletion(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 1756dc9b0ad..d989555055a 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1168,7 +1168,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ### [=Captured elements=] ### {#captured-elements} - A captured element is a [=struct=] with the following: + A captured element is a [=struct=] with the following:
: old image diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 3b073f72b7e..97133badd60 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -34,6 +34,9 @@ spec:css-view-transitions-1; text: setup view transition; type: dfn; spec:dom; type:dfn; text:document spec:css22; type:dfn; text:element +spec:selectors-4; type:dfn; + text:selector + text:type selector spec:html text: latest entry; type: dfn; text: was created via cross-origin redirects; type: dfn; @@ -199,6 +202,83 @@ spec:infra; type:dfn; text:list ``` +### Example of using 'view-transition-class' ### {#vt-class-example} + +In addition to cross-document view-transitions, this document specifies a way to use the same view-transition style +for multiple elements without having to replicate the corresponding pseudo-elements. + +
+ This example creates a transition with each box participating under its own name, while applying + a 1-second duration to the animation of all the boxes: + + ```html +
+
+
+ ``` + + ```css + div.box { + view-transition-class: any-box; + width: 100px; + height: 100px; + } + #red-box { + view-transition-name: red-box; + background: red; + } + #green-box { + view-transition-name: green-box; + background: green; + } + #yellow-box { + view-transition-name: yellow-box; + background: yellow; + } + + /* The following style would apply to all the boxes, thanks to 'view-transition-class' */ + ::view-transition-group(*.any-box) { + animation-duration: 1s; + } + ``` + +
+ + +# CSS Properties # {#css-properties} + +## Applying the same style to multiple participating elements: the 'view-transition-class' property ## {#view-transition-class-prop} + + 
+	Name: view-transition-class
+	Value: none | <>*
+	Initial: none
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
+
+ + The 'view-transition-class' works alongside 'view-transition-name', and is read at the same time + 'view-transition-name' is read. But unlike 'view-transition-name', 'view-transition-class' doesn't + have to be unique - an element can have several view-transition classes, and the same 'view-transition-class' + can apply to multiple elements. While 'view-transition-name' is used to match between the element + in the old state with its corresponding element in the new state, 'view-transition-class' is used + only to apply styles using the view-transition pseudo-elements + (''::view-transition-group()'', ''::view-transition-image-pair()'', ''::view-transition-old()'', ''::view-transition-new()''). + +
+ : none + :: No class would apply to the [=/element=], and pseudo-elements would have to match its 'view-transition-name'. + + : <>* + :: All of the specified <> values (apart from none) apply as classes for the [=/element=]. + + Note: If the same 'view-transition-name' is specified for an element both in the old and new states of the transition, + only the 'view-transition-class' values from the new state apply. This also applies for cross-document view-transitions: + classes from the old document would only apply if their corresponding 'view-transition-name' was not specified in the new document. +
+ # Pseudo-classes # {#pseudo-classes} ## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo} @@ -252,6 +332,34 @@ document.startViewTransition({update: updateTheDOMSomehow}); ``` +# Additions to view-transition pseudo-elements # {#pseudo-element-additions} + + The named view transition pseudo-elements + (''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'') + are extended to support the following syntax for each |pseudo|: + + 
+		::view-transition-group(<><>)
+		::view-transition-image-pair(<><>)
+		::view-transition-old(<><>)
+		::view-transition-new(<><>)
+
+ + where <> works as previously defined, and + <> has the following syntax definition: + + 
+		<pt-class-selector> = ('.' <>)*
+
+ + A [=named view transition pseudo-element=] [=selector=] which has one or more <> values + in its <> would only match an element if the element's [=captured element/class list=] + [=list/contains=] all of those values. + + The specificity of a [=named view transition pseudo-element=] [=selector=] + with a <> + is equivalent to a [=class selector=] with the equivalent number of classes. + # CSS rules # {#css-rules} ## The ''@view-transition'' rule ## {#view-transition-rule} @@ -385,6 +493,27 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. :: Null or a [=list=] of strings, initially null.
+## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct} + +
+ : class list + :: a [=/list=] of strings, initially empty. +
+ +## Additions to capture algorithms: ## {#additions-to-capture-algorithms} +
+When capturing the old state of the view transition, perform the following step when iterating on |captureElements| given |element| and |capture|: + + 1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'. + +
+ +
+When capturing the new state of the view transition, perform the following step when iterating on |captureElements| given |element| and |namedElements|: + + 1. Set |namedElement|[|transitionName|]'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'. +
+ ## Monkey patches to HTML ## {#monkey-patch-to-html}
From 34232c3e8823da1d4482655a3083ad68b86dbc33 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Mon, 8 Jan 2024 12:43:50 +0000 Subject: [PATCH 2/7] nit --- css-view-transitions-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index d989555055a..1756dc9b0ad 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1168,7 +1168,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ### [=Captured elements=] ### {#captured-elements} - A captured element is a [=struct=] with the following: + A captured element is a [=struct=] with the following:
: old image From 55f5e033ec254bb5c992c5a12c2d290d30a8ed3a Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 25 Jan 2024 17:42:24 +0000 Subject: [PATCH 3/7] Update css-view-transitions-2/Overview.bs Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com> --- css-view-transitions-2/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 97133badd60..1468d27fc46 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -269,7 +269,7 @@ for multiple elements without having to replicate the corresponding pseudo-eleme
: none - :: No class would apply to the [=/element=], and pseudo-elements would have to match its 'view-transition-name'. + :: No class would apply to the [=named view-transition pseudo-elements=] generated for this element. : <>* :: All of the specified <> values (apart from none) apply as classes for the [=/element=]. From 34722698943f298429962e79e13d66d5434f4574 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 25 Jan 2024 17:42:31 +0000 Subject: [PATCH 4/7] Update css-view-transitions-2/Overview.bs Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com> --- css-view-transitions-2/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 1468d27fc46..2da69cbd615 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -202,7 +202,7 @@ spec:infra; type:dfn; text:list ```
-### Example of using 'view-transition-class' ### {#vt-class-example} +### 'view-transition-class' ### {#vt-class-example} In addition to cross-document view-transitions, this document specifies a way to use the same view-transition style for multiple elements without having to replicate the corresponding pseudo-elements. From d918977d38bd9c84965f485aded131a64f96620e Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 25 Jan 2024 17:42:36 +0000 Subject: [PATCH 5/7] Update css-view-transitions-2/Overview.bs Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com> --- css-view-transitions-2/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 2da69cbd615..2996d57acfa 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -204,7 +204,7 @@ spec:infra; type:dfn; text:list ### 'view-transition-class' ### {#vt-class-example} -In addition to cross-document view-transitions, this document specifies a way to use the same view-transition style +view-transition-class provides a way to use the same view-transition style for multiple elements without having to replicate the corresponding pseudo-elements.
From 888977179214d4829fa165c5b75ee576c77becbf Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 25 Jan 2024 19:12:12 +0000 Subject: [PATCH 6/7] Structure class algos as additional steps --- css-view-transitions-1/Overview.bs | 6 ++++ css-view-transitions-2/Overview.bs | 44 +++++++++++++++--------------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 1756dc9b0ad..c0e6bee2d8a 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1225,6 +1225,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Note: These are used to update, and later remove styles from a [=/document=]'s [=document/dynamic view transition style sheet=]. + Other specs can supply additional capture steps, which is an algorithm that acepts a [=captured element=] and an [=element=]. + ## [=Perform pending transition operations=] ## {#perform-pending-transition-operations-algorithm}
@@ -1398,6 +1400,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Set |namedElements|[|transitionName|] to |capture|. + 1. Perform [=additional capture steps=] given |capture| and |element|. + 1. [=list/For each=] |element| in |captureElements|: 1. Set |element|'s [=captured in a view transition=] to false. @@ -1439,6 +1443,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; This might not be the right layering for all cases. See issue 8941. 1. Set |namedElements|[|transitionName|]'s [=new element=] to |element|. + + 1. Perform [=additional capture steps=] given |namedElements|[|transitionName|] and |element|.
### [=Setup transition pseudo-elements=] ### {#setup-transition-pseudo-elements-algorithm} diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 2996d57acfa..266a2b4ba92 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -32,6 +32,8 @@ spec:css-view-transitions-1; text: call the update callback; type: dfn; text: perform pending transition operations; type: dfn; text: setup view transition; type: dfn; + text: additional capture steps; type: dfn; + text: named view transition pseudo-element; type: dfn; spec:dom; type:dfn; text:document spec:css22; type:dfn; text:element spec:selectors-4; type:dfn; @@ -125,6 +127,8 @@ spec:infra; type:dfn; text:list ## Examples ## {#examples} +### Cross-document view-transitions ### {#cross-doc-example} +
To generate the same cross-fade as in the first example [[css-view-transitions-1#examples]], but across documents, we don't need JavaScript. @@ -259,20 +263,21 @@ for multiple elements without having to replicate the corresponding pseudo-eleme Animation type: discrete - The 'view-transition-class' works alongside 'view-transition-name', and is read at the same time - 'view-transition-name' is read. But unlike 'view-transition-name', 'view-transition-class' doesn't - have to be unique - an element can have several view-transition classes, and the same 'view-transition-class' - can apply to multiple elements. While 'view-transition-name' is used to match between the element - in the old state with its corresponding element in the new state, 'view-transition-class' is used + The 'view-transition-class' can be used to apply the same style rule to multiple [=named view transition pseudo-elements=] which may have a different 'view-transition-name'. + While 'view-transition-name' is used to match between the element in the old state with its corresponding element in the new state, 'view-transition-class' is used only to apply styles using the view-transition pseudo-elements (''::view-transition-group()'', ''::view-transition-image-pair()'', ''::view-transition-old()'', ''::view-transition-new()''). + Note that 'view-transition-class' by itself doesn't mark an element for capturing, it is only used as an additional + way to style an element that already has a 'view-transition-name'. +
: none - :: No class would apply to the [=named view-transition pseudo-elements=] generated for this element. + :: No class would apply to the [=named view transition pseudo-elements=] generated for this element. : <>* - :: All of the specified <> values (apart from none) apply as classes for the [=/element=]. + :: All of the specified <> values (apart from none) are applied when used in [=named view transition pseudo-element=] selectors. + none is an invalid <> for 'view-transition-class', even when combined with other <>s. Note: If the same 'view-transition-name' is specified for an element both in the old and new states of the transition, only the 'view-transition-class' values from the new state apply. This also applies for cross-document view-transitions: @@ -332,11 +337,11 @@ document.startViewTransition({update: updateTheDOMSomehow}); ```
-# Additions to view-transition pseudo-elements # {#pseudo-element-additions} +# Additions to named view-transition pseudo-elements # {#pseudo-element-additions} - The named view transition pseudo-elements + The [=named view transition pseudo-elements=] (''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'') - are extended to support the following syntax for each |pseudo|: + are extended to support the following syntax: 
 		::view-transition-group(<><>)
@@ -353,8 +358,8 @@ document.startViewTransition({update: updateTheDOMSomehow});
A [=named view transition pseudo-element=] [=selector=] which has one or more <> values - in its <> would only match an element if the element's [=captured element/class list=] - [=list/contains=] all of those values. + in its <> would only match an element if the [=captured element/class list=] value in + [=ViewTransition/named elements=] for the pseudo-element's 'view-transition-name' [=list/contains=] all of those values. The specificity of a [=named view transition pseudo-element=] [=selector=] with a <> @@ -495,23 +500,18 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. ## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct} +The [=captured element=] struct should contain these fields, in addition to the existing ones: +
: class list :: a [=/list=] of strings, initially empty.
-## Additions to capture algorithms: ## {#additions-to-capture-algorithms} -
-When capturing the old state of the view transition, perform the following step when iterating on |captureElements| given |element| and |capture|: +## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms} +
+This spec provides the following [=additional capture steps=] given a [=captured element=] |capture| and an [=element=] |element|: 1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'. - -
- -
-When capturing the new state of the view transition, perform the following step when iterating on |captureElements| given |element| and |namedElements|: - - 1. Set |namedElement|[|transitionName|]'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.
## Monkey patches to HTML ## {#monkey-patch-to-html} From e74b86c930e73e785c6539e3120dbe4b019b5902 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Wed, 31 Jan 2024 19:48:09 +0000 Subject: [PATCH 7/7] Reinstate monkey-patch --- css-view-transitions-1/Overview.bs | 6 ------ css-view-transitions-2/Overview.bs | 5 +++-- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index c0e6bee2d8a..1756dc9b0ad 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1225,8 +1225,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Note: These are used to update, and later remove styles from a [=/document=]'s [=document/dynamic view transition style sheet=]. - Other specs can supply additional capture steps, which is an algorithm that acepts a [=captured element=] and an [=element=]. - ## [=Perform pending transition operations=] ## {#perform-pending-transition-operations-algorithm}
@@ -1400,8 +1398,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Set |namedElements|[|transitionName|] to |capture|. - 1. Perform [=additional capture steps=] given |capture| and |element|. - 1. [=list/For each=] |element| in |captureElements|: 1. Set |element|'s [=captured in a view transition=] to false. @@ -1443,8 +1439,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; This might not be the right layering for all cases. See issue 8941. 1. Set |namedElements|[|transitionName|]'s [=new element=] to |element|. - - 1. Perform [=additional capture steps=] given |namedElements|[|transitionName|] and |element|.
### [=Setup transition pseudo-elements=] ### {#setup-transition-pseudo-elements-algorithm} diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 266a2b4ba92..30ee204f5b6 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -32,7 +32,6 @@ spec:css-view-transitions-1; text: call the update callback; type: dfn; text: perform pending transition operations; type: dfn; text: setup view transition; type: dfn; - text: additional capture steps; type: dfn; text: named view transition pseudo-element; type: dfn; spec:dom; type:dfn; text:document spec:css22; type:dfn; text:element @@ -509,9 +508,11 @@ The [=captured element=] struct should contain these fields, in addition to the ## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms}
-This spec provides the following [=additional capture steps=] given a [=captured element=] |capture| and an [=element=] |element|: +When capturing the old or new state for an element, perform the following steps given a [=captured element=] |capture| and an [=element=] |element|: 1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'. + + Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.
## Monkey patches to HTML ## {#monkey-patch-to-html}