[css-view-transitions-2] Allow auto as a keyword (#10922)

* [css-view-transitions-2] Allow `auto` as a keyword

`auto` resolves to either the element's ID, or to a unique identifier
that is stable for the duration of the transition and is not web-observable.

Resolution: #8320 (comment)
Closes #8320

* Fix refs

* Tighten definition of unique string

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

Co-authored-by: Khushal Sagar <[email protected]>

* Handle scoping

* Change scoping text

* Change scoping text

* Update Overview.bs

Co-authored-by: Khushal Sagar <[email protected]>

---------

Co-authored-by: Khushal Sagar <[email protected]>

css-view-transitions-2/Overview.bs

@@ -753,6 +753,72 @@ div.box {
 		1. Return |viewTransition|.
 	</div>
 
+# Determining 'view-transition-name' automatically # {#auto-vt-name}
+
+## Overview ## {#auto-vt-name-overview}
+
+*This section is non-normative.*
+
+For an element to participate in a view transition, it needs to receive a unique 'view-transition-name'.
+This can be tedious and verbose when multiple elements are involved in the same view transition, especially in cases where many of those are same-element transitions,
+as in, the element has the same 'view-transition-name' in the old and new state.
+
+To make this easier, setting the 'view-transition-name' to ''view-transition-name/auto'' would generate a 'view-transition-name' for the element, or take it from the element's [=Element/id=] if present.
+
+## Examples ## {#auto-vt-name-example}
+
+<div class="example">
+In this example, view transition is used to sort a list in an animated way:
+
+```html
+<ul>
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	...
+</ul>
+```
+
+Ordinarily, each of these items would have to receive a unique 'view-transition-name':
+
+```css
+li:nth-child(1) { view-transition-name: item1; }
+li:nth-child(2) { view-transition-name: item1; }
+li:nth-child(3) { view-transition-name: item1; }
+li:nth-child(4) { view-transition-name: item1; }
+...
+```
+
+With ''view-transition-name/auto'', this CSS would work:
+
+```css
+li {
+	view-transition-name: auto;
+}
+```
+</div>
+
+## Additions to 'view-transition-name' ## {#additions-to-vt-name}
+
+In addition to the existing values, the 'view-transition-name' also accepts an <dfn for=view-transition-name type=value export>auto</dfn> keyword.
+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=].
+
+		Note: this means that a ''::part()'' pseudo-element wouldn't resolve to its matching element's [=Element/id=].
+
+	1. Return a unique string. The string should remain consistent and unique for this element and {{Document}}, at least for the lifetime of |element|'s [=node document=]'s [=active view transition=].
+
+		Note: this string is not web-observable, and is used for addressing the element in internal algorithms.
+
+		Note: When used in a cross-document view transition, generated <css>auto</css> values never match, resulting in separate ''::view-transition-group()'' pseudo-elements, one exiting and one entering.
+
+A 'view-transition-name' generated by <css>auto</css> is a [=tree-scoped name=].
+
 # Nested view-transitions # {#nested-view-transitions}
 
 ## Overview ## {#nested-overview}
@@ -1170,6 +1236,8 @@ When [[css-view-transitions-1#style-transition-pseudo-elements-algorithm|updatin
 		1. [=Multiply=] |transform| by the inverse matrix of |groupContainerElement|'s [=transform from snapshot containing block=].
 </div>
 
+
+
 <h2 id="priv" class="no-num">Privacy Considerations</h2>
 
 This specification introduces no new privacy considerations.