Give defined pseudos their own heading, so they appear in TOC (#8537)

jakearchibald · web-flow · commit 041590fac1c4 · 2023-03-07T19:51:24.000-05:00
diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
@@ -4,7 +4,7 @@ Shortname: css-view-transitions
 Level: 1
 Status: WD
 Group: csswg
-Date: 2022-11-24
+Date: 2023-03-07
 Prepare for TR: yes
 ED: https://drafts.csswg.org/css-view-transitions-1/
 TR: https://www.w3.org/TR/css-view-transitions-1/
@@ -585,155 +585,156 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		This enables full customization of the transition.
 	</div>
 
-	: <dfn>::view-transition</dfn>
-	::
-		<div class=note>This element provides a containing block for all ''::view-transition-group()'' pseudo-elements.</div>
+### <dfn>::view-transition</dfn>
 
-		A [=tree-abiding pseudo-element=] that is also
-		a [=pseudo-element root=].
-		Its [=originating element=] is the document's [=document element=].
+	<div class=note>This element provides a containing block for all ''::view-transition-group()'' pseudo-elements.</div>
 
-		Its [=containing block=] is the [=snapshot root=].
+	A [=tree-abiding pseudo-element=] that is also
+	a [=pseudo-element root=].
+	Its [=originating element=] is the document's [=document element=].
 
-		The following is added to the [=HTML user agent style sheet=]:
+	Its [=containing block=] is the [=snapshot root=].
 
-		```css
-		html::view-transition {
-			position: fixed;
-			inset: 0;
-		}
-		```
+	The following is added to the [=HTML user agent style sheet=]:
 
-		<div class="note">
-			The aim of the style is to size the pseudo-element to cover the [=snapshot root=]
-			and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
-		</div>
+	```css
+	html::view-transition {
+		position: fixed;
+		inset: 0;
+	}
+	```
 
-	: <dfn>::view-transition-group( <<pt-name-selector>> )</dfn>
-	::
-		<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''.
+	<div class="note">
+		The aim of the style is to size the pseudo-element to cover the [=snapshot root=]
+		and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
+	</div>
 
-			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'
-			from the size of the old element's [=border box=] to that of the new element's [=border box=].
+### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn>
 
-			Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
+	<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''.
 
-			This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
-		</div>
+		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'
+		from the size of the old element's [=border box=] to that of the new element's [=border box=].
 
-		A [=tree-abiding pseudo-element=]
-		that is also a [=named view-transition pseudo-element=],
-		and [=tree/participates=] in a [=pseudo-element tree=].
+		Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
 
-		It is selected from its [=ultimate originating element=], the [=document element=].
+		This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
+	</div>
 
-		The following is added to the [=HTML user agent style sheet=]:
+	A [=tree-abiding pseudo-element=]
+	that is also a [=named view-transition pseudo-element=],
+	and [=tree/participates=] in a [=pseudo-element tree=].
 
-		```css
-		html::view-transition-group(*) {
-			position: absolute;
-			top: 0;
-			left: 0;
+	It is selected from its [=ultimate originating element=], the [=document element=].
 
-			animation-duration: 0.25s;
-			animation-fill-mode: both;
-		}
-		```
+	The following is added to the [=HTML user agent style sheet=]:
 
-	: <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
-	::
-		<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.
+	```css
+	html::view-transition-group(*) {
+		position: absolute;
+		top: 0;
+		left: 0;
 
-			It is always present as a [=tree/child=] of each ''::view-transition-group()''.
-		</div>
+		animation-duration: 0.25s;
+		animation-fill-mode: both;
+	}
+	```
 
-		A [=tree-abiding pseudo-element=]
-		that is also a [=named view-transition pseudo-element=],
-		and [=tree/participates=] in a [=pseudo-element tree=].
+### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
 
-		It is selected from its [=ultimate originating element=], the [=document element=].
+	<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 following is added to the [=HTML user agent style sheet=]:
+		It is always present as a [=tree/child=] of each ''::view-transition-group()''.
+	</div>
 
-		```css
-		html::view-transition-image-pair(*) {
-			position: absolute;
-			inset: 0;
+	A [=tree-abiding pseudo-element=]
+	that is also a [=named view-transition pseudo-element=],
+	and [=tree/participates=] in a [=pseudo-element tree=].
 
-			animation-duration: inherit;
-			animation-fill-mode: inherit;
-		}
-		```
+	It is selected from its [=ultimate originating element=], the [=document element=].
+
+	The following is added to the [=HTML user agent style sheet=]:
+
+	```css
+	html::view-transition-image-pair(*) {
+		position: absolute;
+		inset: 0;
 
-	: <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
-	::
-		<div class=note>
+		animation-duration: inherit;
+		animation-fill-mode: inherit;
+	}
+	```
 
-			This element is a replaced element that produced the visual representation of the "old" state taken from user-agent provided snapshots.
+### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
 
-			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.
+	<div class=note>
 
-			'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.
+		This element is a replaced element that produced the visual representation of the "old" state taken from user-agent provided snapshots.
 
-			The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.
+		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.
 
-		</div>
+		'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.
 
-		A [=tree-abiding pseudo-element=]
-		that is also a [=named view-transition pseudo-element=],
-		and [=tree/participates=] in a [=pseudo-element tree=].
+		The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.
 
-		It is selected from its [=ultimate originating element=], the [=document element=].
+	</div>
 
-		It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.
+	A [=tree-abiding pseudo-element=]
+	that is also a [=named view-transition pseudo-element=],
+	and [=tree/participates=] in a [=pseudo-element tree=].
 
-		Note: The image content is captured in [=capture the image=],
-		then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
+	It is selected from its [=ultimate originating element=], the [=document element=].
 
-		The following is added to the [=HTML user agent style sheet=]:
+	It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.
 
-		```css
-		html::view-transition-old(*) {
-			position: absolute;
-			inset-block-start: 0;
-			inline-size: 100%;
-			block-size: auto;
-
-			animation-name: -ua-view-transition-fade-out;
-			animation-duration: inherit;
-			animation-fill-mode: inherit;
-		}
-		```
+	Note: The image content is 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 [=HTML user agent style sheet=]:
+
+	```css
+	html::view-transition-old(*) {
+		position: absolute;
+		inset-block-start: 0;
+		inline-size: 100%;
+		block-size: auto;
 
-		Note: The aim of the style is to match the element's inline size while retaining the aspect ratio.
-		It is also placed at the block start.
+		animation-name: -ua-view-transition-fade-out;
+		animation-duration: inherit;
+		animation-fill-mode: inherit;
+	}
+	```
 
-		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=].
+	Note: The aim of the style is to match the element's inline size while retaining the aspect ratio.
+	It is also placed at the block start.
 
-	: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
-	:: Identical to ''::view-transition-old()'',
-		except the following styles added to the [=HTML user agent style sheet=]:
+	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=].
 
-		```css
-		html::view-transition-old(*) {
-			position: absolute;
-			inset-block-start: 0;
-			inline-size: 100%;
-			block-size: auto;
-
-			animation-name: -ua-view-transition-fade-in;
-			animation-duration: inherit;
-			animation-fill-mode: inherit;
-		}
-		```
+### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
+
+	Identical to ''::view-transition-old()'',
+	except the following styles added to the [=HTML user agent style sheet=]:
+
+	```css
+	html::view-transition-old(*) {
+		position: absolute;
+		inset-block-start: 0;
+		inline-size: 100%;
+		block-size: auto;
+
+		animation-name: -ua-view-transition-fade-in;
+		animation-duration: inherit;
+		animation-fill-mode: inherit;
+	}
+	```
 
 	Note: The construction of this tree is performed in the [=setup transition pseudo-elements=] algorithm.
 
