Skip to content
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

[css-view-transitions-1][css-view-transitions-2] Add view-transition-name: match-element #11393

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[css-view-transitions-1][css-view-transitions-2] Add view-transition-name: match-element #11393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46bd325
[css-view-transitions-1][css-view-transitions-2] Add view-transition-…
noamr Dec 18, 2024
e52cd93
Add vt-1 restriction
noamr Dec 18, 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
3 changes: 2 additions & 1 deletion css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: Since currently only document-scoped view transitions are supported, only view transition names that are associated with the document are respected.

The values <css>none</css> and <css>auto</css> are excluded from <<custom-ident>> here.
The values <css>none</css>, <css>auto</css>, and <css>match-element</css> are excluded from <<custom-ident>> here.

Note: If this name is not unique
(i.e. if two elements simultaneously specify the same [=view transition name=])
Expand Down Expand Up @@ -1994,6 +1994,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
* Fix scoping to match name instead of element. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>.
* Add a rendering characteristics note about out-of-viewport elements. See <a href="https://github.com/w3c/csswg-drafts/issues/8282">issue 8282</a>.
* Swap the order of invoking the update callback and setting the phase. See <a href="https://github.com/w3c/csswg-drafts/issues/10822">issue 10822</a>.
* Disallow <css>match-element</css> as a custom-ident. See <a href="https://github.com/w3c/csswg-drafts/issues/10995">Issue 10995</a>.

<h3 id="changes-since-2022-05-25">
Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a>
Expand Down
13 changes: 10 additions & 3 deletions css-view-transitions-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -791,13 +791,20 @@ li:nth-child(4) { view-transition-name: item1; }
...
```

With ''view-transition-name/auto'', this CSS would work:
With ''view-transition-name/auto'' or ''view-transition-name/match-element'', this CSS would work:

```css
li {
view-transition-name: auto;
/* or */
view-transition-name: match-element;
}
```

The ''view-transition-name/auto'' and ''view-transition-name/match-element'' keywords have a minor
difference, where ''view-transition-name/auto'' would use the element's [=Element/id=] as the 'view-transition-name'
if exists, making it potentially work across documents, while ''view-transition-name/match-element'' only matches
based on element identity.
</div>

## Additions to 'view-transition-name' ## {#additions-to-vt-name}
Expand All @@ -807,8 +814,8 @@ To resolve the [=used value=] of 'view-transition-name' for |element|:
1. Let |computed| be the [=computed value=] of 'view-transition-name'.
1. If |computed| is <css>none</css>, return null.
1. If |computed| is a <<custom-ident>>, return |computed|.
1. Assert: |computed| is <css>auto</css>.
1. If |element| has an associated [=Element/id=], and |computed| is associated with the same [=tree/root=] as |element|'s [=tree/root=], then return the value of |element|'s [=Element/id=].
1. Assert: |computed| is <css>auto</css> or <css>match-element</css>.
1. If |computed| is <css>auto</css>, |element| has an associated [=Element/id=], and |computed| is associated with the same [=tree/root=] as |element|'s [=tree/root=], then return the value of |element|'s [=Element/id=].

Note: this means that a ''::part()'' pseudo-element wouldn't resolve to its matching element's [=Element/id=].

Expand Down