[css-view-transitions-2] Initial spec for nested view transitions by noamr · Pull Request #10629 · w3c/csswg-drafts

noamr · 2024-07-26T10:34:49Z

This specifies the new 'view-transition-group' CSS property and how it used, with some overview and an initial example.

There are still a lot of open issues but we will open them separately to avoid inflating the initial issue.

This specifies the new 'view-transition-group' CSS property and how it used, with some overview and an initial example. Based on [this resolution](w3c#10334 (comment)). There are still a lot of open issues but we will open them separately to avoid inflating the initial issue. Closes w3c#10334

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

khushalsagar · 2024-08-06T02:06:21Z

+
+		: <dfn><<custom-ident>></dfn>
+		:: The '':view-transition-group()'' generated by this element's 'view-transition-name' should be a child of the ''::view-transition-group()'' pseudo-element
+			that matches the given <<custom-ident>>.


Please fix. If its TBD then leave a link to the issue.

khushalsagar · 2024-08-06T02:10:40Z

+
+## Changes to '':view-transition-group()'' ## {#pseudo-element-hierarchy-nested}
+
+When the view [=view transition tree=] is generated, every generated ''::view-transition-group()'' becomes a child of an existing ''::view-transition-group()'' with the same name as its generating element's 'view-transition-group'.


Please fix.

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

khushalsagar · 2024-08-09T03:53:58Z


 	When the [=computed value=] of 'view-transition-name' for an element is ''view-transition-name/none'', its 'view-transition-group' [=used value=] is always resolved to ''view-transition-name/none'' as well.

+	The <dfn>nearest containing group name</dfn> for an element is the 'view-transition-name' [=computed value=] of its nearest ancestor which has a  'view-transition-group' [=computed value=] of ''view-transition-group/contain'', or ''view-transition-group/none'' if such element does not exist.


We also need to add that this ancestor's view-transition-name should not be none, but it won't be needed if the suggestion above works.

khushalsagar · 2024-08-09T04:09:00Z

+
+		1. Let |containingGroupName| be |transition|'s [=ViewTransition/named elements=][|capturedElement|'s [=containing group=].
+
+		1. Let |groupContainerElement| be |transition|'s [=ViewTransition/named elements=][|containingGroupName|].


groupContainerElement is the captured element struct while we need the new element. And that can be null (for the exit transition case). So we need to check if groupContainerElement's new element is not null and then do the transform stuff.

I refactored these algorithms, where the transform adjustment happens when setting the styles.

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

khushalsagar · 2024-08-09T16:39:27Z

+		1. Let |groupContainerElement| be |transition|'s [=ViewTransition/named elements=][|capturedElement|'s [=containing group name=]].

-		1. Set |group|'s 'transform' to the transform that would map |capturedElement|’s [=new element=] [=border box=] from |groupContainerElement|'s [=border box=] to its current visual position.
+		1. [=Multiply=] |transform| by the inverse matrix of |groupContainerElement|'s [=transform from snapshot containing block=].


This looks like a bug for the exit transition case. Since |transform| passed to this algorithm would be the "old transform" here: https://drafts.csswg.org/css-view-transitions-1/#style-transition-pseudo-elements-algorithm:~:text=Set%20transform%20to%20capturedElement%E2%80%99s%20old%20transform.

And we already multiplied the "old transform" with an inverse of its ancestor's transform in "setting up the transition pseudo-element" above?

Fixed, not multiplying in the previous phase.

khushalsagar · 2024-08-09T16:44:04Z

-			with its [=view transition name=] set to |capturedElement|'s [=containing group=].
+			whost [=view transition name=] is set to |containingGroupName|.
+
+		1. Set |capturedElement|'s [=captured element/old transform=] to the result of [=multiplying=] |capturedElement|'s [=captured element/old transform=] by the inverse matrix of |groupContainerElement|'s [=captured element/old transform=].


IIUC we expect both the captured element's old transform and the groupContainerElement's old transform to be relative to the snapshot containing block here.

Wouldn't there be a bug for the case where we have A nesting B which nests C then? Since we build the pseudo tree top down, when we get to C, B's transform would already be relative to A but C's transform would be relative to the snapshot containing block.

Maybe we want to cache a "old transform from snapshot containing block" which is not mutated after capture?

Fixed, not changing the old transform in the struct, only multiplying when setting the style.

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

khushalsagar · 2024-08-12T21:54:57Z

+
+		1. Append |group| to |parentGroup|.
+
+		1. When setting the animation keyframes given |transform|, [=multiply=] |transform| by the inverse matrix of |groupContainerElement|'s [=old transform=].


When we get to merge the specs, would be nice to rename this to "transform from snapshot containing block".

noamr requested review from khushalsagar and vmpstr July 26, 2024 10:34

Add old transform capture

0ad3e2b

khushalsagar reviewed Jul 29, 2024

View reviewed changes

Comment thread css-view-transitions-2/Overview.bs Outdated

Comment thread css-view-transitions-2/Overview.bs Outdated

Comment thread css-view-transitions-2/Overview.bs Outdated

Comment thread css-view-transitions-2/Overview.bs Outdated

Comment thread css-view-transitions-2/Overview.bs Outdated

noamr and others added 3 commits July 29, 2024 21:07

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

86f48ad

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

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

afa4d00

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

Fix wording for transform

e8ee397

khushalsagar reviewed Jul 29, 2024

View reviewed changes

Comment thread css-view-transitions-2/Overview.bs Outdated

khushalsagar reviewed Jul 29, 2024

View reviewed changes

noamr and others added 11 commits July 30, 2024 09:16

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

182d97e

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

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

8258d58

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

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

a477816

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

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

d7ba0d7

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

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

45818df

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

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

7dcb2d0

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

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

40a17c8

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

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

e128928

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

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

6e32d95

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

Separate algos

05d59d0

Resolve comments

ff235f5

khushalsagar reviewed Aug 6, 2024

View reviewed changes

noamr and others added 6 commits August 6, 2024 11:27

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

af83e15

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

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

afa973c

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

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

46c5b73

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

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

3fe473f

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

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

fa597f2

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

Apply comments

1098b31

khushalsagar reviewed Aug 9, 2024

View reviewed changes

Update Overview.bs

0db4694

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

noamr and others added 3 commits August 9, 2024 07:03

Update Overview.bs

b350661

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

Update Overview.bs

47ec6e1

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

Adjust algorithms to perform transform adjustment at the correct place

d36fdf6

khushalsagar reviewed Aug 9, 2024

View reviewed changes

noamr and others added 2 commits August 9, 2024 17:01

Update Overview.bs

bcf1769

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

Fix link

c4e06ce

khushalsagar approved these changes Aug 12, 2024

View reviewed changes

noamr merged commit 667d3d3 into w3c:main Aug 13, 2024


		## Changes to '':view-transition-group()'' ## {#pseudo-element-hierarchy-nested}

		When the view [=view transition tree=] is generated, every generated ''::view-transition-group()'' becomes a child of an existing ''::view-transition-group()'' with the same name as its generating element's 'view-transition-group'.


		When the [=computed value=] of 'view-transition-name' for an element is ''view-transition-name/none'', its 'view-transition-group' [=used value=] is always resolved to ''view-transition-name/none'' as well.

		The <dfn>nearest containing group name</dfn> for an element is the 'view-transition-name' [=computed value=] of its nearest ancestor which has a 'view-transition-group' [=computed value=] of ''view-transition-group/contain'', or ''view-transition-group/none'' if such element does not exist.


		1. Let \|containingGroupName\| be \|transition\|'s [=ViewTransition/named elements=][\|capturedElement\|'s [=containing group=].

		1. Let \|groupContainerElement\| be \|transition\|'s [=ViewTransition/named elements=][\|containingGroupName\|].


		1. Append \|group\| to \|parentGroup\|.

		1. When setting the animation keyframes given \|transform\|, [=multiply=] \|transform\| by the inverse matrix of \|groupContainerElement\|'s [=old transform=].

Uh oh!

Conversation

noamr commented Jul 26, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants