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

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

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

Resolution: #10995 (comment)

* Add vt-1 restriction

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

Co-authored-by: Bramus <[email protected]>

---------

Co-authored-by: Bramus <[email protected]>

Author: noamr

css-view-transitions-1/Overview.bs

@@ -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=])
@@ -2018,6 +2018,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
 * 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>.
 * Always flush the queue of update callbacks before capturing the old state. See <a href="https://github.com/w3c/csswg-drafts/issues/11292">issue 11922</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>

css-view-transitions-2/Overview.bs

@@ -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 it 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}
@@ -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=].