[css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms #9773

noamr · 2024-01-08T12:42:53Z

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.
Closes #8319

khushalsagar

I'd appreciate @tabatkins's review on this too. I feel like a good chunk of the VT spec is like html, so adding to the existing algorithms is hard.

If there's an existing style CSS specs use for this kind of addition to algorithms between levels of a module, would be good to stay consistent with that.

khushalsagar · 2024-01-11T22:17:21Z

css-view-transitions-2/Overview.bs

@@ -206,6 +209,83 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		```
 	</div>

+### Example of using 'view-transition-class' ### {#vt-class-example}


Mind adding a similar sub-heading above for "cross-document view transitions".

css-view-transitions-2/Overview.bs

khushalsagar · 2024-01-11T22:37:53Z

css-view-transitions-2/Overview.bs

+	Animation type: discrete
+	</pre>
+
+	The 'view-transition-class' works alongside 'view-transition-name', and is read at the same time


I felt that this block had a few redundant statements. A suggestion to reword, lmk what you think:

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=].

css-view-transitions-2/Overview.bs

khushalsagar · 2024-01-11T22:49:30Z

css-view-transitions-2/Overview.bs

+	</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 element's [=captured element/class list=]


"would only match an element" is confusing. Can we phrase this as, if the [=captured element/class list=] value in https://www.w3.org/TR/css-view-transitions-1/#viewtransition-named-elements for the pseudo-element's view-transition-name contains all of those values?

css-view-transitions-2/Overview.bs

khushalsagar · 2024-01-11T22:53:07Z

css-view-transitions-2/Overview.bs

+		:: a [=/list=] of strings, initially empty.
+	</dl>
+
+## Additions to capture algorithms: ## {#additions-to-capture-algorithms}


How about "view transition class algorithms"? Since this section is the set of algorithm changes required for the view-transition-class property.

khushalsagar · 2024-01-11T22:57:54Z

css-view-transitions-2/Overview.bs

+
+## Additions to capture algorithms: ## {#additions-to-capture-algorithms}
+<div algorithm="capture old classes">
+When capturing the old state of the view transition, perform the following step when iterating on |captureElements| given |element| and |capture|:


Wdyt about pulling steps 2-10 of this loop into a separate algorithm : https://www.w3.org/TR/css-view-transitions-1/#capture-old-state-algorithm:~:text=in%20the%20algorithm.-,For%20each%20element%20in%20captureElements,-%3A. That's where we're setting everything on the "capture" struct given an "element".

Then this spec, "add the following steps to this algorithm".

khushalsagar · 2024-01-11T23:02:01Z

css-view-transitions-2/Overview.bs

+</div>
+
+<div algorithm="capture new classes">
+When capturing the new state of the view transition, perform the following step when iterating on |captureElements| given |element| and |namedElements|:


I suppose the same thing here for this loop: https://www.w3.org/TR/css-view-transitions-1/#capture-new-state-algorithm:~:text=set%20of%20strings.-,For%20each%20element%20of%20every%20element%20that%20is%20connected%2C%20and%20has%20a%20node%20document%20equal%20to%20to%20document%2C%20in%20paint%20order%3A,-If%20any%20flat.

But I also don't want to explode the number of sub-algorithms in the L1 spec. So if you have any other idea to better link to the exact spot that's good to. Another suggestion is, "Do this after step 4.7 of https://www.w3.org/TR/css-view-transitions-1/#capture-the-new-state". If you like that, I'm happy with the same for above as well.

That's monkey-patchy, I don't like that... let's see what Tab has to say.

noamr · 2024-01-12T09:37:47Z

I'd appreciate @tabatkins's review on this too. I feel like a good chunk of the VT spec is like html, so adding to the existing algorithms is hard.

If there's an existing style CSS specs use for this kind of addition to algorithms between levels of a module, would be good to stay consistent with that.

Yea doing this in a monkey-patchy way didn't feel exactly right. Will wait for Tab with applying the rest of the comments as if we go a different route I'll need to redo a lot of this.

vmpstr · 2024-01-24T17:52:51Z

css-view-transitions-2/Overview.bs

+	'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


I'd add a sentence to say explicitly that view-transition-class on its own does not affect the structure of the view transition pseudo element tree constructed.

I know this is what this says, but perhaps repeating in a different way is worthwhile even if non-normatively

vmpstr · 2024-01-24T17:53:57Z

css-view-transitions-2/Overview.bs

+		:: No class would apply to the [=/element=], and pseudo-elements would have to match its 'view-transition-name'.
+
+		: <dfn><<custom-ident>>*</dfn>
+		:: All of the specified <<custom-ident>> values (apart from <css>none</css>) apply as classes for the [=/element=].


I don't think we should... I don't see how class being auto would be a useful reserved keyword since the class doesn't affect anything we do, just allow more selection

css-view-transitions-2/Overview.bs

vmpstr · 2024-01-24T17:59:49Z

css-view-transitions-2/Overview.bs

+		:: No class would apply to the [=/element=], and pseudo-elements would have to match its 'view-transition-name'.
+
+		: <dfn><<custom-ident>>*</dfn>
+		:: All of the specified <<custom-ident>> values (apart from <css>none</css>) apply as classes for the [=/element=].


This needs to be defined a bit better I think, using [=captured element/class list=] perhaps, or reference the algorithm below.

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](w3c#8319 (comment)). Closes w3c#8319

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

vmpstr

This looks good to me, but let's make the changes to make this a diff spec as we agreed in the call today

css-view-transitions-2/Overview.bs

Co-authored-by: vmpstr <vmpstr@chromium.org>

noamr · 2024-01-31T19:58:57Z

This looks good to me, but let's make the changes to make this a diff spec as we agreed in the call today

Already done.

noamr requested review from vmpstr and khushalsagar January 8, 2024 12:42

khushalsagar reviewed Jan 11, 2024

View reviewed changes

vmpstr reviewed Jan 24, 2024

View reviewed changes

noamr mentioned this pull request Jan 24, 2024

[css-view-transitions-1] [css-view-transitions-2] consider a living-standard model for view-transitions #9850

Closed

noamr and others added 6 commits January 25, 2024 17:42

nit

34232c3

Update css-view-transitions-2/Overview.bs

55f5e03

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

Update css-view-transitions-2/Overview.bs

3472269

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

Update css-view-transitions-2/Overview.bs

d918977

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

Structure class algos as additional steps

8889771

noamr force-pushed the vt2-classes branch from d2b13bb to 8889771 Compare January 25, 2024 19:12

vmpstr reviewed Jan 31, 2024

View reviewed changes

css-view-transitions-2/Overview.bs Outdated Show resolved Hide resolved

css-view-transitions-2/Overview.bs Outdated Show resolved Hide resolved

css-view-transitions-2/Overview.bs Show resolved Hide resolved

noamr and others added 2 commits January 31, 2024 19:58

Update css-view-transitions-2/Overview.bs

173a37a

Co-authored-by: vmpstr <vmpstr@chromium.org>

Update css-view-transitions-2/Overview.bs

617f5e7

Co-authored-by: vmpstr <vmpstr@chromium.org>

Reinstate monkey-patch

debe3f4

vmpstr approved these changes Jan 31, 2024

View reviewed changes

noamr merged commit 258a87e into w3c:main Jan 31, 2024

noamr deleted the vt2-classes branch January 31, 2024 21:52

tidoust mentioned this pull request Feb 1, 2024

[css-view-transitions-2] Fix "<pt-class-selector>" syntax #9885

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms #9773

[css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms #9773

noamr commented Jan 8, 2024 •

edited

Loading

khushalsagar left a comment

khushalsagar Jan 11, 2024

khushalsagar Jan 11, 2024

noamr Jan 25, 2024

khushalsagar Jan 11, 2024

noamr Jan 25, 2024

khushalsagar Jan 11, 2024

khushalsagar Jan 11, 2024

khushalsagar Jan 11, 2024

noamr Jan 24, 2024

noamr commented Jan 12, 2024 •

edited

Loading

vmpstr Jan 24, 2024

noamr Jan 25, 2024

vmpstr Jan 24, 2024

vmpstr Jan 24, 2024

vmpstr left a comment

noamr commented Jan 31, 2024

[css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms #9773

[css-view-transitions-2] Specify 'view-transition-class' and corresponding algorithms #9773

Conversation

noamr commented Jan 8, 2024 • edited Loading

khushalsagar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noamr commented Jan 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vmpstr left a comment

Choose a reason for hiding this comment

noamr commented Jan 31, 2024

noamr commented Jan 8, 2024 •

edited

Loading

noamr commented Jan 12, 2024 •

edited

Loading