[css-view-transitions-1][editorial] Improve structure of pseudo-elements section

* Define some high-level terms for better cross-referencing
* Give a proper introduction to the pseudo tree
* Move definition of named view-transition pseudo-elements to after we define what view-transition pseudo-elements are so we know what we're talking about
* Give each pseudo-element a proper definition (“the algo generates it” is not a definition)
* Include enough information that the pseudo-element tree is understandable from this section alone
* Improve section titles
* Make definition of view-transition-name more definitive

Author: fantasai

css-view-transitions-1/Overview.bs

@@ -13,7 +13,7 @@ Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
 Editor: Jake Archibald, Google, w3cid 76394
 Editor: Khushal Sagar, Google, w3cid 122787
 Abstract: This module defines the View Transition API, along with associated properties and pseudo-elements,
-	which allowsdevelopers to create animated visual transitions representing changes in the document state.
+	which allows developers to create animated visual transitions representing changes in the document state.
 Markup Shorthands: css yes, markdown yes
 </pre>
 
@@ -27,13 +27,16 @@ spec:webidl; type:interface; text:Promise
 spec:css-images-4; type:function; text:element()
 spec:dom; type:dfn; text:document
 spec:css-2022; type:dfn; text:style sheet
-spec:selectors-4; type:dfn; text:type selector
+spec:selectors-4; type:dfn;
+	text:selector
+	text:type selector
 spec:css-box-4; type:dfn; text:border box
 spec:css-display-3; type:dfn;
 	text:containing block
 	text:replaced element
 spec:css-cascade-5; type:dfn; text:computed value
 spec:css22; type:dfn; text:element
+spec:css-break-4; type:dfn; text:fragment
 </pre>
 
 <pre class=anchors>
@@ -143,7 +146,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	using a static visual capture of the old state, and a live capture of the new state.
 	These captures are represented as a tree of [=pseudo-elements=]
 	(detailed in [[#view-transition-pseudos]]),
-	where the old visual state to co-exist with the new state,
+	where the old visual state co-exists with the new state,
 	allowing effects such as cross-fading
 	while animating from the old to new size and position.
 
@@ -232,7 +235,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	That means a failure to create a visual transition,
 	which can happen due to misconfiguration or device constraints,
 	will not prevent the developer's {{UpdateCallback}} being called,
-	even if it's known in advance that the transition animation cannot happen.
+	even if it's known in advance that the transition animations cannot happen.
 
 	For example, if the developer calls {{ViewTransition/skipTransition()}} at the start of the [[#lifecycle|view transition lifecycle]],
 	the steps relating to the animated transition,
@@ -496,7 +499,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	</pre>
 
 	The 'view-transition-name' property “tags” an element
-	as [=involved in a view transition=],
+	as potentially [=involved in a view transition=],
 	capturing it independently in the [=view transition tree=]
 	under the specified <dfn>view transition name</dfn>.
 	An element so captured is animated independently of the rest of the page.
@@ -506,8 +509,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		:: The [=/element=] will not participate independently in a view transition.
 
 		: <dfn><<custom-ident>></dfn>
-		:: The [=/element=] will participate in a view transition,
-			as either an old or new [=/element=],
+		:: The [=/element=] participates independently in a view transition--
+			as either an old or new [=/element=]--
 			with the specified [=view transition name=].
 
 			The value <css>none</css> is excluded from <<custom-ident>> here.
@@ -525,6 +528,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	This may be confusing, since the elements themselves are not necessarily referring to the same object,
 	but it is a useful model to consider them to be visual states of the same conceptual page entity.
 
+	If the element’s [=principal box=] is [=fragmented=],
+	[=skips its contents|skipped=],
+	or [=not rendered=],
+	this property has no effect.
+
 # Layout and rendering changes # {#layout-rendering-changes}
 
 ## Named and transitioning elements ## {#named-and-transitioning}
@@ -579,7 +587,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 # Pseudo-elements # {#pseudo}
 
-## Pseudo-element root ## {#pseudo-root}
+## Pseudo-element Trees ## {#pseudo-root}
 
 	Note: This is a general definition for trees of pseudo-elements. If other features need this behavior, these definitions will be moved to [[css-pseudo-4]].
 
@@ -597,29 +605,24 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	Note: This means that `::view-transition-new(ident):only-child` will only select `::view-transition-new(ident)` if the parent `::view-transitions-image-pair(ident)` contains a single [=tree/child=].
 	As in, there is no [=tree/sibling=] `::view-transition-old(ident)`.
 
-## Named view-transition pseudo-elements ## {#named-view-transition-pseudo}
-
-	A <dfn>named view-transition pseudo-element</dfn> is a type of [=tree-abiding pseudo-elements=].
-
-	It has a <dfn for="named view-transition pseudo-element">view-transition name</dfn>,
-	a string.
-
-	Their selector takes a <<pt-name-selector>> argument.
-
-	<pre class=prod>
-		<dfn>&lt;pt-name-selector></dfn> = '*' | <<custom-ident>>
-	</pre>
-
-	The selector matches if the <<pt-name-selector>> is `*` or matches the [=named view-transition pseudo-element=]'s [=view transition name=].
-
-	The specificity of a view-transition selector with a <<custom-ident>> argument is the same as for other pseudo-elements,
-	and is equivalent to a [=type selector=].
-
-	The specificity of a view-transition selector with a `*` argument is zero.
-
-	Note: The [=view transition name=] is set to the 'view-transition-name' that triggered its creation.
-
-## View transition pseudo-elements ## {#view-transition-pseudos}
+## View Transition Pseudo-elements ## {#view-transition-pseudos}
+
+	The visualization of a [=view transition=]
+	is represented as a [=pseudo-element tree=]
+	called the <dfn>view transition tree</dfn>
+	composed of the <dfn>view transition pseudo-elements</dfn> defined below.
+	This tree is built during the [=setup transition pseudo-elements=] step,
+	and is rooted under a ''::view-transition'' pseudo-element
+	[=originating element|originating=] from the [=root element=].
+	All of the [=view transition pseudo-elements=] are selected
+	from their [=ultimate originating element=], the [=document element=].
+
+	<div class="example">
+		For example,
+		the ''::view-transition-group()'' pseudo-element is attached to the root element selector directly,
+		as in '':root::view-transition-group()'';
+		it is not attached to its parent, the ''::view-transition'' pseudo-element.
+	</div>
 
 	<div class=note>
 		Once the user-agent has captured both the “old” and “new” states of the document,
@@ -646,15 +649,49 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		This enables full customization of the transition.
 	</div>
 
-### <dfn>::view-transition</dfn> ### {#::view-transition}
+### Named View Transition Pseudo-elements ### {#named-view-transition-pseudo}
+
+	Several of the [=view transition pseudo-elements=]
+	are <dfn>named view transition pseudo-elements</dfn>,
+	which are [=functional pseudo-element|functional=] [=tree-abiding pseudo-element|tree-abiding=] [=view transition pseudo-elements=]
+	associated with a [=view transition name=].
+	These pseudo-elements take a <<pt-name-selector>> as their argument,
+	and their syntax follows the pattern:
+
+	<pre class=prod>
+		::view-transition-<var>pseudo</var>(<<pt-name-selector>>)
+	</pre>
+
+	where <<pt-name-selector>> selects a [=view transition name=],
+	and has the following syntax definition:
+
+	<pre class=prod>
+		<dfn>&lt;pt-name-selector></dfn> = '*' | <<custom-ident>>
+	</pre>
+
+	A [=named view transition pseudo-element=] [=selector=] only matches
+	a corresponding [=pseudo-element=]
+	if its <<pt-name-selector>> matches that [=pseudo-element=]’s [=view transition name=],
+	i.e. if it is either ''*'' or a matching <<custom-ident>>.
 
-	<div class=note>This element serves as a parent for all ''::view-transition-group()'' pseudo-elements.</div>
+	Note: The [=view transition name=] of a [=view transition pseudo-element=]
+	is set to the 'view-transition-name' that triggered its creation.
 
-	A [=tree-abiding pseudo-element=] that is also
-	a [=pseudo-element root=].
-	Its [=originating element=] is the document's [=document element=].
+	The specificity of a [=named view transition pseudo-element=] [=selector=]
+	with a <<custom-ident>> argument
+	is equivalent to a [=type selector=].
+	The specificity of a [=named view transition pseudo-element=] [=selector=]
+	with a ''*'' argument
+	is zero.
 
-	Its [=containing block=] is the [=snapshot containing block=].
+### View Transition Tree Root: the ''::view-transition'' pseudo-element ### {#view-transition-pseudo}
+
+	The <dfn>::view-transition</dfn> [=pseudo-element=]
+	is a [=tree-abiding pseudo-element=] that is also a [=pseudo-element root=].
+	Its [=originating element=] is the document's [=document element=],
+	and its [=containing block=] is the [=snapshot containing block=].
+
+	Note: This element serves as the [=tree/parent=] of all ''::view-transition-group()'' pseudo-elements.
 
 	The following is added to the [=global view transition user agent style sheet=]:
 
@@ -670,12 +707,19 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
 	</div>
 
-### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn> ### {#::view-transition-group}
+### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}
+
+	The <dfn>::view-transition-group()</dfn> [=pseudo-element=]
+	is a [=named view transition pseudo-element=]
+	that represents a matching named [=view transition=] capture.
+	A ''::view-transition-group()'' [=pseudo-element=]
+	is generated for each [=view transition name=]
+	as a [=tree/child=] of the ''::view-transition'' [=pseudo-element=],
+	and contains a corresponding ''::view-transition-image-pair()''.
 
 	<div class=note>
 		This element initially mirrors the size and position of the “old” element,
 		or the “new” element if there isn't an “old” element.
-		It is always a [=tree/child=] of a ''::view-transition''.
 
 		If there's both an “old” and “new” state,
 		styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height'
@@ -686,12 +730,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
 	</div>
 
-	A [=tree-abiding pseudo-element=]
-	that is also a [=named view-transition pseudo-element=],
-	and [=tree/participates=] in a [=pseudo-element tree=].
-
-	It is selected from its [=ultimate originating element=], the [=document element=].
-
 	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
@@ -705,21 +743,25 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	}
 	```
 
-### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn> ### {#::view-transition-image-pair}
+### View Transition Image Pair Isolation: the ''::view-transition-image-pair()'' pseudo-element ### {#::view-transition-image-pair}
 
-	<div class=note>
-		This element is a child of the group element and provides ''isolation: isolate'' for its children.
-		It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs.
+	The <dfn>::view-transition-image-pair()</dfn> [=pseudo-element=]
+	is a [=named view transition pseudo-element=]
+	that represents a pair of corresponding old/new [=view transition=] captures.
+	This pseudo-element is a [=tree/child=] of the corresponding ''::view-transition-group()'' pseudo-element
+	and contains
+	a corresponding ''::view-transition-old()'' pseudo-element
+	and/or
+	a corresponding ''::view-transition-new()'' pseudo-element
+	(in that order).
 
-		It is always present as a [=tree/child=] of each ''::view-transition-group()''.
+	<div class=note>
+		This element exists to provide ''isolation: isolate'' for its children,
+		and is always present as a [=tree/child=] of each ''::view-transition-group()''.
+		This isolation allows the image pair to be blended with non-normal blend modes
+		without affecting other visual outputs.
 	</div>
 
-	A [=tree-abiding pseudo-element=]
-	that is also a [=named view-transition pseudo-element=],
-	and [=tree/participates=] in a [=pseudo-element tree=].
-
-	It is selected from its [=ultimate originating element=], the [=document element=].
-
 	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
@@ -732,32 +774,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	}
 	```
 
-### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn> ### {#::view-transition-old}
-
-	<div class=note>
-
-		This element is a replaced element that produced the visual representation of the “old” state taken from user-agent provided snapshots.
+### View Transition Old State Image: the ''::view-transition-old()'' pseudo-element ### {#::view-transition-old}
 
-		This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'',
-		never has any [=tree/children=],
-		and is omitted if there's no “old” state to represent.
+	The <dfn>::view-transition-old()</dfn> [=pseudo-element=]
+	is an empty [=named view transition pseudo-element=]
+	that represents a visual snapshot of the “old” state as a [=replaced element=];
+	it is omitted if there's no “old” state to represent.
+	Each ''::view-transition-old()'' pseudo-element is a [=tree/child=]
+	of the corresponding ''::view-transition-image-pair()'' pseudo-element.
 
+	<div class=note>
 		'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.
 
 		The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.
-
 	</div>
 
-	A [=tree-abiding pseudo-element=]
-	that is also a [=named view-transition pseudo-element=],
-	and [=tree/participates=] in a [=pseudo-element tree=].
-
-	It is selected from its [=ultimate originating element=], the [=document element=].
-
-	It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.
-
-	Note: The image content is captured in [=capture the image=],
-	then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
+	Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=],
+	and set in [=setup transition pseudo-elements=].
 
 	The following is added to the [=global view transition user agent style sheet=]:
 
@@ -779,10 +812,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
 
-### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn> ### {#::view-transition-new}
+### View Transition New State Image: the ''::view-transition-new()'' pseudo-element ### {#::view-transition-new}
 
-	Identical to ''::view-transition-old()'',
-	except the following styles added to the [=global view transition user agent style sheet=]:
+	The <dfn>::view-transition-new()</dfn> [=pseudo-element=]
+	(like the analogous ''::view-transition-old()'' pseudo-element)
+	is an empty [=named view transition pseudo-element=]
+	that represents a visual snapshot of the “new” state as a [=replaced element=];
+	it is omitted if there's no “new” state to represent.
+	Each ''::view-transition-new()'' pseudo-element is a [=tree/child=]
+	of the corresponding ''::view-transition-image-pair()'' pseudo-element.
+
+	Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=],
+	then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
+
+	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
 	:root::view-transition-new(*) {
@@ -797,8 +840,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	}
 	```
 
-	Note: The construction of this tree is performed in the [=setup transition pseudo-elements=] algorithm.
-
 # Concepts # {#concepts}
 
 ## Phases ## {#phases-concept}