[css-view-transitions-2] Specify 'view-transition-class' and correspo…

…nding algorithms (#9773) * [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](#8319 (comment)). Closes #8319 --------- Co-authored-by: Khushal Sagar <[email protected]> Co-authored-by: vmpstr <[email protected]>
w3c · Jan 31, 2024 · 258a87e · 258a87e
1 parent acdca61
commit 258a87e
Showing 1 changed file with 130 additions and 0 deletions.
diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs
@@ -32,8 +32,12 @@ 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: named view transition pseudo-element; 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;
@@ -122,6 +126,8 @@ spec:infra; type:dfn; text:list
 
 ## Examples ## {#examples}
 
+### Cross-document view-transitions ### {#cross-doc-example}
+
 	<div class=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.
@@ -199,6 +205,84 @@ spec:infra; type:dfn; text:list
 		```
 	</div>
 
+### 'view-transition-class' ### {#vt-class-example}
+
+view-transition-class provides a way to use the same style
+for multiple view transition pseudo elements without having to replicate the corresponding pseudo-elements.
+
+	<div class="example">
+	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
+	<div class="box" id="red-box"></div>
+	<div class="box" id="green-box"></div>
+	<div class="box" id="yellow-box"></div>
+	```
+
+	```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;
+	}
+	```
+
+	</div>
+
+
+# CSS Properties # {#css-properties}
+
+## Applying the same style to multiple participating elements: the 'view-transition-class' property ## {#view-transition-class-prop}
+
+	<pre class=propdef>
+	Name: view-transition-class
+	Value: none | <<custom-ident>>*
+	Initial: none
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
+	</pre>
+
+	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'.
+
+	<dl dfn-type=value dfn-for=view-transition-class>
+		: <dfn>none</dfn>
+		:: No class would apply to the [=named view transition pseudo-elements=] generated for this element.
+
+		: <dfn><<custom-ident>>*</dfn>
+		:: All of the specified <<custom-ident>> values (apart from <css>none</css>) are applied when used in [=named view transition pseudo-element=] selectors.
+			<css>none</css> is an invalid <<custom-ident>> for 'view-transition-class', even when combined with other <<custom-ident>>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:
+			classes from the old document would only apply if their corresponding 'view-transition-name' was not specified in the new document.
+	</dl>
+
 # Pseudo-classes # {#pseudo-classes}
 
 ## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo}
@@ -252,6 +336,34 @@ document.startViewTransition({update: updateTheDOMSomehow});
 ```
 </div>
 
+# Additions to named 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:
+
+	<pre class=prod>
+		::view-transition-group(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-image-pair(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-old(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-new(<<pt-name-selector>><<pt-class-selector>>)
+	</pre>
+
+	where <<pt-name-selector>> works as previously defined, and
+	<<pt-class-selector>> has the following syntax definition:
+
+	<pre class=prod>
+		<dfn>&lt;pt-class-selector></dfn> = ('.' <<custom-ident>>)*
+	</pre>
+
+	A [=named view transition pseudo-element=] [=selector=] which has one or more <<custom-ident>> values
+	in its <<pt-class-selector>> 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 <<pt-class-selector>>
+	is equivalent to a [=class selector=] with the equivalent number of classes.
+
 # CSS rules # {#css-rules}
 
 ## The <dfn id="at-view-transition-rule">''@view-transition''</dfn> rule ## {#view-transition-rule}
@@ -385,6 +497,24 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
 		:: Null or a [=list=] of strings, initially null.
 	</dl>
 
+## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct}
+
+The [=captured element=] struct should contain these fields, in addition to the existing ones:
+
+	<dl>
+		: <dfn for="captured element">class list</dfn>
+		:: a [=/list=] of strings, initially empty.
+	</dl>
+
+## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms}
+<div algorithm="additional capture steps">
+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.
+</div>
+
 ## Monkey patches to HTML ## {#monkey-patch-to-html}
 
 	<div algorithm="monkey patch to apply the history step">