Skip to content

[css-view-transitions-2] Clarify a few nesting details #10964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 14, 2024
Merged

[css-view-transitions-2] Clarify a few nesting details #10964

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf6c601
[css-view-transitions-2] Clarify a few nesting details
noamr Sep 27, 2024
e415d44
Simplify tree-scope matching
noamr Oct 1, 2024
a92961f
Make everything algorithmic
noamr Oct 8, 2024
ccfd8ef
Update Overview.bs
noamr Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 47 additions & 28 deletions css-view-transitions-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.

<dl dfn-type=value dfn-for=view-transition-group>
: <dfn>normal</dfn>
:: The [=used value=] is the element's [=nearest containing group name=].

: <dfn>nearest</dfn>
:: 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''.

: <dfn>contain</dfn>
:: The [=used value=] is the element's [=nearest containing group name=].

Note: Descendant elements are contained within this group by default, as it would be their element's [=nearest containing group name=].

: <dfn><<custom-ident>></dfn>
:: The [=used value=] is the given <<custom-ident>> if the element has an ancestor whose 'view-transition-name' [=computed value=] is that <<custom-ident>>, otherwise the element's [=nearest containing group name=]
</dl>

# Algorithms # {#algorithms}

## Data structures ## {#cross-doc-data-structures}
Expand Down Expand Up @@ -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}
<div algorithm="nearest containing group name">
### Resolving the 'view-transition-group' value ### {#vt-group-value-resolve}

<div algorithm="resolve the document-scoped view-transition-group">
To get the <dfn>document-scoped view transition group</dfn> 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''.
</div>

### Resolving the containing group name ### {#vt-containing-group-name-resolve}

<div algorithm="resolve nearest containing group name">

To resolve the <dfn>nearest containing group name</dfn> 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. Return ''view-transition-name/none''.
</div>

### Resolving the group name ### {#vt-group-name-resolve}

<div algorithm="resolve used group name">
To resolve the <dfn>used group name</dfn> of an {{Element}} |element|, perform the following steps given a {{ViewTransition}} |transition|:

To get the <dfn>nearest containing group name</dfn> 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 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. If |nearestAncestorWithContain| is null, return ''view-transition-group/none''.
1. Otherwise, return |nearestAncestorWithContain|'s 'view-transition-name' [=computed value=].
<dl dfn-type=value dfn-for=view-transition-group>
: <dfn>normal</dfn>
: <dfn>contain</dfn>
:: |containingGroupName|.

Note: an element with ''view-transition-group/contain'' becomes the [=nearest containing group name=] for its descendants.

: <dfn>nearest</dfn>
:: The [=document-scoped view transition name=] of the element's nearest [=flat tree=] ancestor which participates in the |transition|.

: <dfn><<custom-ident>></dfn>
:: |group| if the element has a [=flat tree=] [=tree/ancestor=] whose [=document-scoped view transition name=] is |group| and participates in |transition|; Otherwise |containingGroupName|.
</dl>
</div>

### Compute the old 'view-transition-group' ### {#vt-group-capture-old}
<div algorithm="additional old capture steps (group)">
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|.
</div>

### Compute the new 'view-transition-group' ### {#vt-group-capture-new}
<div algorithm="additional new capture steps (group)">
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|.
</div>

### Reparent a ''::view-transition-group()'' to its specified containing group ### {#vt-group-reparent}
Expand Down