[css-view-transitions-1] Consolidate global UA style rules #8891

Author: fantasai

css-view-transitions-1/Overview.bs

@@ -559,33 +559,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	Note: This does not effect pointers that are [=pointer capture|captured=].
 
-# User-agent styles # {#ua-styles}
-
-	The <dfn>global view transition user agent style sheet</dfn> is a style sheet in the [=user-agent origin=], used in all namespaces.
-
-	Issue: [CSS needs a central place for an "all namespaces" style sheet](https://github.com/w3c/csswg-drafts/issues/8573).
-
-	It contains the following:
-
-	```css
-	@keyframes -ua-view-transition-fade-out {
-		to { opacity: 0; }
-	}
-
-	@keyframes -ua-view-transition-fade-in {
-		from { opacity: 0; }
-	}
-
-	:root {
-		view-transition-name: root;
-	}
-	```
-
-	<div class=note>
-		There are further additions to the [=global view transition user agent style sheet=] defined in [[#view-transition-pseudos]] for each pseudo-element,
-		and other styles are added at runtime via the [=document=]'s [=document/view transition style sheet=].
-	</div>
-
 # Pseudo-elements # {#pseudo}
 
 ## Pseudo-element Trees ## {#pseudo-root}
@@ -694,20 +667,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	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=]:
-
-	```css
-	:root::view-transition {
-		position: fixed;
-		inset: 0;
-	}
-	```
-
-	<div class="note">
-		The aim of the style is to size the pseudo-element to cover the [=snapshot containing block=]
-		and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
-	</div>
-
 ### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}
 
 	The <dfn>::view-transition-group()</dfn> [=pseudo-element=]
@@ -723,26 +682,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		or the “new” element if there isn't an “old” element.
 
 		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'
+		styles in the [=document/dynamic 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=].
 
 		Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
 
 		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 [=global view transition user agent style sheet=]:
-
-	```css
-	:root::view-transition-group(*) {
-		position: absolute;
-		top: 0;
-		left: 0;
-
-		animation-duration: 0.25s;
-		animation-fill-mode: both;
-	}
-	```
 
 ### View Transition Image Pair Isolation: the ''::view-transition-image-pair()'' pseudo-element ### {#::view-transition-image-pair}
 
@@ -763,18 +710,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		without affecting other visual outputs.
 	</div>
 
-	The following is added to the [=global view transition user agent style sheet=]:
-
-	```css
-	:root::view-transition-image-pair(*) {
-		position: absolute;
-		inset: 0;
-
-		animation-duration: inherit;
-		animation-fill-mode: inherit;
-	}
-	```
-
 ### View Transition Old State Image: the ''::view-transition-old()'' pseudo-element ### {#::view-transition-old}
 
 	The <dfn>::view-transition-old()</dfn> [=pseudo-element=]
@@ -793,25 +728,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	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=]:
-
-	```css
-	:root::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 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.
-
-	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: Additional styles in the [=document/dynamic view transition style sheet=] added to animate these pseudo-elements
+	are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
 
 ### View Transition New State Image: the ''::view-transition-new()'' pseudo-element ### {#::view-transition-new}
 
@@ -826,21 +744,88 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	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=]:
+# User Agent Stylesheet # {#ua-styles}
+
+	The <dfn>global view transition user agent style sheet</dfn> is
+	a [=user-agent origin=] style sheet containing the following rules:
 
 	```css
+	:root {
+		view-transition-name: root;
+	}
+
+	:root::view-transition {
+		position: fixed;
+		inset: 0;
+	}
+
+	:root::view-transition-group(*) {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		animation-duration: 0.25s;
+		animation-fill-mode: both;
+	}
+
+	:root::view-transition-image-pair(*) {
+		position: absolute;
+		inset: 0;
+
+		animation-duration: inherit;
+		animation-fill-mode: inherit;
+	}
+
+	:root::view-transition-old(*),
 	:root::view-transition-new(*) {
 		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;
 	}
+
+	/* Default cross-fade transition */
+	@keyframes -ua-view-transition-fade-out {
+		to { opacity: 0; }
+	}
+	@keyframes -ua-view-transition-fade-in {
+		from { opacity: 0; }
+	}
+	:root::view-transition-old(*) {
+		animation-name: -ua-view-transition-fade-out;
+	}
+	:root::view-transition-new(*) {
+		animation-name: -ua-view-transition-fade-in;
+	}
 	```
 
+	<details class="note">
+		<summary>Explanatory Summary</summary>
+		This UA style sheet does several things:
+		* Lay out ''::view-transition'' to cover the entire [=snapshot containing block=]
+			so that each '':view-transition-group()'' child can lay out relative to it.
+		* Give the [=root element=] a default [=view transition name=],
+			to allow it to be independently selected.
+		* Reduce layout interference from the ''::view-transition-image-pair()'' pseudo-element
+			so that authors can essentially treat ''::view-transition-old()'' and ''::view-transition-new()''
+			as direct children of ''::view-transition-group()'' for most purposes.
+		* Inherit animation timing through the tree so that by default,
+			the animation timing set on a ''::view-transition-group()''
+			will dictate the animation timing of all its descendants.
+		* Style the element captures (''::view-transition-old()'' and ''::view-transition-new()'')
+			to match the size and position set on ''::view-transition-group()''
+			as it interpolates between them
+			(see [=document/dynamic view transition style sheet=]).
+		* Set up a default quarter-second cross-fade animation
+			for each ''::view-transition-group()''.
+	</details>
+
+	Additional styles are dynamically added to the [=user-agent origin=] during a [=view transition=]
+	through the [=document/dynamic view transition style sheet=].
+
 # Concepts # {#concepts}
 
 ## Phases ## {#phases-concept}
@@ -951,7 +936,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	</dl>
 
 	Note: These are used to update, and later remove styles
-	from a [=/document=]'s [=document/view transition style sheet=].
+	from a [=/document=]'s [=document/dynamic view transition style sheet=].
 
 ## Additions to {{Document}} ## {#additions-to-document}
 
@@ -964,7 +949,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		: <dfn>transition suppressing rendering</dfn>
 		:: a boolean. Initially false.
 
-		: <dfn>view transition style sheet</dfn>
+		: <dfn>dynamic view transition style sheet</dfn>
 		:: a [=/style sheet=].
 			Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=].
 
@@ -1444,7 +1429,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 				1. Let |height| be |capturedElement|'s [=captured element/old height=].
 
 				1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS,
-					and append it to |document|'s [=document/view transition style sheet=]:
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
@@ -1460,7 +1445,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 					Note: The above code example contains variables to be replaced.
 
 				1. Set |capturedElement|'s [=captured element/group animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
-					and append it to |document|'s [=document/view transition style sheet=]:
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
@@ -1472,7 +1457,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 					Note: The above code example contains variables to be replaced.
 
 				1. Set |capturedElement|'s [=captured element/image pair isolation rule=] to a new {{CSSStyleRule}} representing the following CSS,
-					and append it to |document|'s [=document/view transition style sheet=]:
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
@@ -1484,7 +1469,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 					Note: The above code example contains variables to be replaced.
 
 				1. Set |capturedElement|'s [=captured element/view blend mode rule=] to a new {{CSSStyleRule}} representing the following CSS,
-					and append it to |document|'s [=document/view transition style sheet=]:
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
@@ -1738,7 +1723,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. If |capturedElement|'s [=captured element/group styles rule=] is null,
 				then set |capturedElement|'s [=captured element/group styles rule=] to a new {{CSSStyleRule}} representing the following CSS,
-				and append it to |document|'s [=document/view transition style sheet=].
+				and append it to |document|'s [=document/dynamic view transition style sheet=].
 
 				Otherwise, update |capturedElement|'s [=captured element/group styles rule=] to match the following CSS:
 
@@ -1783,8 +1768,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]:
 
 				1. If |style| is not null,
-					and |style| is in |document|'s [=document/view transition style sheet=],
-					then remove |style| from |document|'s [=document/view transition style sheet=].
+					and |style| is in |document|'s [=document/dynamic view transition style sheet=],
+					then remove |style| from |document|'s [=document/dynamic view transition style sheet=].
 
 		1. Set |document|'s [=document/show view-transition root pseudo-element=] to false.
 
@@ -1832,7 +1817,7 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
 Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
 </h3>
 
-* Add [=document/view transition style sheet=] concept for dynamically generated UA styles scoped to the current Document.
+* Add [=document/dynamic view transition style sheet=] concept for dynamically generated UA styles scoped to the current Document.
 * Add snapshot viewport concept. See <a href="https://github.com/w3c/csswg-drafts/issues/7859">issue 7859</a>.
 * Clarify timimg for resolving/rejecting promises when skipping the transition. See <a href="https://github.com/w3c/csswg-drafts/issues/7956">issue 7956</a>.
 * Elements under a content-visiblity:auto element that skips its contents are ignored. See <a href="https://github.com/w3c/csswg-drafts/issues/7874">issue 7874</a>.