From cf6c601ae5c02b30a6615f5612dab43bf89957fa Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Fri, 27 Sep 2024 07:18:59 -0700 Subject: [PATCH 1/4] [css-view-transitions-2] Clarify a few nesting details - view-transition-group is tree-scoped - nearest/custom-ident act like contain Closes #10780 Closes #10633 --- css-view-transitions-2/Overview.bs | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index c3c3d5af5ed..1868b41707a 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -886,20 +886,20 @@ and by applying ''view-transition-group'' to the internal element referencing th 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 relevant tree for the 'view-transition-group' property is the [=tree=] that includes the element in which the property itself is declared. +
: normal - :: The [=used value=] is the element's [=nearest containing group name=]. - - : nearest - :: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest ancestor whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''. - : contain - :: The [=used value=] is the element's [=nearest containing group name=]. + :: The [=used value=] is the element's [=nearest containing group name=] given the [=relevant tree=]. + + Note: An element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its [=tree/descendants=]. - Note: Descendant elements are contained within this group by default, as it would be their element's [=nearest containing group name=]. + : nearest + :: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest [=tree/ancestor=] in the [=relevant tree=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''. : <> - :: The [=used value=] is the given <> if the element has an ancestor whose 'view-transition-name' [=computed value=] is that <>, otherwise the element's [=nearest containing group name=] + :: The [=used value=] is the given <> if the element has an [=tree/ancestor=] in the [=relevant tree=] whose 'view-transition-name' [=computed value=] is that <>, otherwise the element's [=nearest containing group name=] given the [=relevant tree=].
# Algorithms # {#algorithms} @@ -1180,9 +1180,9 @@ When capturing the old or new state for an element, perform the following steps ### Compute the nearest containing 'view-transition-group' ### {#vt-group-nearest-contain}
-To get the nearest containing group name for an {{Element}} |element|, perform the following steps: +To get the nearest containing group name for an {{Element}} |element| and a [=tree=] |tree|, perform the following steps: - 1. Let |nearestAncestorWithContain| be |element|'s nearest ancestor whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is ''view-transition-group/contain''. + 1. Let |nearestAncestorWithContain| be |element|'s nearest [=tree/ancestor=] in |tree|, whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is not ''view-transition-group/normal''. 1. If |nearestAncestorWithContain| is null, return ''view-transition-group/none''. 1. Otherwise, return |nearestAncestorWithContain|'s 'view-transition-name' [=computed value=].
From e415d44d70a6774ac0cb3e51806606f13c973a06 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Tue, 1 Oct 2024 21:17:27 +0100 Subject: [PATCH 2/4] Simplify tree-scope matching --- css-view-transitions-2/Overview.bs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 1868b41707a..3caad99347f 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -886,22 +886,22 @@ and by applying ''view-transition-group'' to the internal element referencing th 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 relevant tree for the 'view-transition-group' property is the [=tree=] that includes the element in which the property itself is declared. -
: normal : contain - :: The [=used value=] is the element's [=nearest containing group name=] given the [=relevant tree=]. + :: The [=used value=] is the element's [=nearest containing group name=]. Note: An element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its [=tree/descendants=]. : nearest - :: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest [=tree/ancestor=] in the [=relevant tree=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''. + :: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''. : <> - :: The [=used value=] is the given <> if the element has an [=tree/ancestor=] in the [=relevant tree=] whose 'view-transition-name' [=computed value=] is that <>, otherwise the element's [=nearest containing group name=] given the [=relevant tree=]. + :: The [=used value=] is the given <> if the element has an [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is that <>, otherwise the element's [=nearest containing group name=].
+ When the ''view-transition-group'' and ''view-transition-name'' properties are declared in a different [=tree=], ''view-transition-group'' resolves to the [=nearest containing group name=]. + # Algorithms # {#algorithms} ## Data structures ## {#cross-doc-data-structures} @@ -1180,9 +1180,9 @@ When capturing the old or new state for an element, perform the following steps ### Compute the nearest containing 'view-transition-group' ### {#vt-group-nearest-contain}
-To get the nearest containing group name for an {{Element}} |element| and a [=tree=] |tree|, perform the following steps: +To get the nearest containing group name for an {{Element}} |element|, perform the following steps: - 1. Let |nearestAncestorWithContain| be |element|'s nearest [=tree/ancestor=] in |tree|, whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is not ''view-transition-group/normal''. + 1. Let |nearestAncestorWithContain| be |element|'s nearest [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is not ''view-transition-group/normal''. 1. If |nearestAncestorWithContain| is null, return ''view-transition-group/none''. 1. Otherwise, return |nearestAncestorWithContain|'s 'view-transition-name' [=computed value=].
From a92961fc3c4b70ed015b435fd0c571057c0d32e2 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Tue, 8 Oct 2024 14:16:31 +0100 Subject: [PATCH 3/4] Make everything algorithmic --- css-view-transitions-2/Overview.bs | 75 +++++++++++++++++++----------- 1 file changed, 47 insertions(+), 28 deletions(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 3caad99347f..92eadd2769c 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -45,6 +45,7 @@ spec:css-view-transitions-1; text: view transition name; type: dfn; text: group styles rule; type: dfn; text: update pseudo-element styles rule; type: dfn; + text: document-scoped view transition name; type: dfn; spec:dom; type:dfn; text:document spec:css22; type:dfn; text:element spec:selectors-4; type:dfn; @@ -884,24 +885,6 @@ and by applying ''view-transition-group'' to the internal element referencing th The [=used value=] for 'view-transition-group' resolves to a 'view-transition-name' in its ancestor chain, or to ''view-transition-name/none''. When generating the [=named view transition pseudo-element=], the ''::view-transition-group()'' with that name would be the parent of the ''::view-transition-group()'' generated for this element's 'view-transition-name'. - 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. - -
- : normal - : contain - :: The [=used value=] is the element's [=nearest containing group name=]. - - Note: An element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its [=tree/descendants=]. - - : nearest - :: The [=used value=] is the 'view-transition-name' [=computed value=] of the nearest [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none''. - - : <> - :: The [=used value=] is the given <> if the element has an [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is that <>, otherwise the element's [=nearest containing group name=]. -
- - When the ''view-transition-group'' and ''view-transition-name'' properties are declared in a different [=tree=], ''view-transition-group'' resolves to the [=nearest containing group name=]. - # Algorithms # {#algorithms} ## Data structures ## {#cross-doc-data-structures} @@ -1177,28 +1160,64 @@ When capturing the old or new state for an element, perform the following steps ## Capturing and applying 'view-transition-group' ## {#vt-group-algorithm} -### Compute the nearest containing 'view-transition-group' ### {#vt-group-nearest-contain} -
+### Resolving the 'view-transition-group' value ### {#vt-group-value-resolve} + +
+To get the document-scoped view transition group of an {{Element}} |element|, perform the following steps: + + 1. Let |computedGroup| be the [=computed value=] of element's 'view-transition-group' property. + 1. If |computedGroup| is associated with |element|'s [=node document=], return |computedGroup|. + 1. Return ''view-transition-group/normal''. +
+ +### Resolving the containing group name ### {#vt-containing-group-name-resolve} + +
+ +To resolve the nearest containing group name of an {{Element}} |element|, perform the following steps given a {{ViewTransition}} |viewTransition|: + 1. Assert: |element| participates in |viewTransition|. + 1. Let |ancestorGroup| be |element|'s nearest [=flat tree=] [=tree/ancestor=] who participates in |viewTransition| and whose [=document-scoped view transition group=] is not ''view-transition-group/normal''. + 1. If |ancestorGroup| exists, return |ancestorGroup|'s [=document-scoped view transition name=]. + 1. Teturn ''view-transition-name/none''. +
+ +### Resolving the group name ### {#vt-group-name-resolve} + +
+To resolve the used group name of an {{Element}} |element|, perform the following steps given a {{ViewTransition}} |transition|: -To get the nearest containing group name for an {{Element}} |element|, perform the following steps: + 1. Assert: |element| participates in |transition|. + 1. Let |group| be |element|'s [=document-scoped view transition group=]. + 1. Let |containingGroupName| be |element|'s [=nearest containing group name=] given |transition|. + 1. Return the first matching statement, switching on |group|: - 1. Let |nearestAncestorWithContain| be |element|'s nearest [=tree/ancestor=] whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' and whose 'view-transition-group' [=computed value=] is not ''view-transition-group/normal''. - 1. If |nearestAncestorWithContain| is null, return ''view-transition-group/none''. - 1. Otherwise, return |nearestAncestorWithContain|'s 'view-transition-name' [=computed value=]. +
+ : normal + : contain + :: |containingGroupName|. + + Note: an element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its descendants. + + : nearest + :: The [=document-scoped view transition name=] of the element's nearest [=flat tree=] ancestor which participates in the |transition|. + + : <> + :: |group| if the element has a [=flat tree=] [=tree/ancestor=] whose [=document-scoped view transition name=] is |group| and participates in |transition|; Otherwise |containingGroupName|. +
### Compute the old 'view-transition-group' ### {#vt-group-capture-old}
-When [[css-view-transitions-1#capture-old-state-algorithm|capturing the old state for an element]], perform the following steps given a [=captured element=] |capturedElement|, and an [=element=] |element|: +When [[css-view-transitions-1#capture-old-state-algorithm|capturing the old state for an element]], perform the following steps given a [=captured element=] |capturedElement|, a {{ViewTransition}} |transition|, and an [=element=] |element|: - 1. Set |capturedElement|'s [=captured element/containing group name=] to the [=used value=] of |element|'s ''view-transition-group''. + 1. Set |capturedElement|'s [=captured element/containing group name=] to |element|'s [=used group name=] given |transition|.
### Compute the new 'view-transition-group' ### {#vt-group-capture-new}
-When [[css-view-transitions-1#capture-new-state-algorithm|capturing the new state for an element]], perform the following steps given a [=captured element=] |capturedElement| and an [=element=] |element|: +When [[css-view-transitions-1#capture-new-state-algorithm|capturing the new state for an element]], perform the following steps given a [=captured element=] |capturedElement| a {{ViewTransition}} |transition|, and an [=element=] |element|: - 1. Set |capturedElement|'s [=captured element/containing group name=] to the [=used value=] of |element|'s 'view-transition-group'. + 1. Set |capturedElement|'s [=captured element/containing group name=] to |element|'s [=used group name=] given |transition|.
### Reparent a ''::view-transition-group()'' to its specified containing group ### {#vt-group-reparent} From ccfd8ef1d7f95b87cca8748d226a5e6455fe00ec Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Sun, 13 Oct 2024 10:26:21 +0100 Subject: [PATCH 4/4] Update 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 92eadd2769c..82b4c59ef66 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -1178,7 +1178,7 @@ To resolve the nearest containing group name of an {{Element}} |eleme 1. Assert: |element| participates in |viewTransition|. 1. Let |ancestorGroup| be |element|'s nearest [=flat tree=] [=tree/ancestor=] who participates in |viewTransition| and whose [=document-scoped view transition group=] is not ''view-transition-group/normal''. 1. If |ancestorGroup| exists, return |ancestorGroup|'s [=document-scoped view transition name=]. - 1. Teturn ''view-transition-name/none''. + 1. Return ''view-transition-name/none''.
### Resolving the group name ### {#vt-group-name-resolve}