Skip to content

Commit

Permalink
[css-view-transitions-1][css-view-transitions-2] Add view-transition-…
Browse files Browse the repository at this point in the history
…name: match-element

match-element works the same as auto, except doesn't try to use the ID as the
name.

Resolution: w3c#10995 (comment)
  • Loading branch information
noamr committed Dec 18, 2024
1 parent 73fdd90 commit 46bd325
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions css-view-transitions-2/Overview.bs
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

0 comments on commit 46bd325

Please sign in to comment.