[view-transitions-1] Remove html specifics (#8572)

Author: jakearchibald

css-view-transitions-1/Overview.bs

@@ -26,14 +26,18 @@ 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: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
 </pre>
 
 <pre class=anchors>
 urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	text: NavigateEvent
 	text: signal; for: NavigateEvent; url: #ref-for-dom-navigateevent-signal①
-urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
-	text: HTML user agent style sheet; url: #the-css-user-agent-style-sheet-and-presentational-hints
 </pre>
 
 <script async type="module" src="diagrams/resources/scaler.js"></script>
@@ -176,7 +180,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 	<div id="phases-diagram">
 		<spec-scaler canvaswidth="1920" canvasheight="1080" style="aspect-ratio: 1920/1080">
-			<iframe class="spec-slides" src="diagrams/phases/index.html"></iframe>
+			<iframe class="spec-slides" src="diagrams/phases/phases.html"></iframe>
 		</spec-scaler>
 		<p class="spec-slide-controls">
 			<button disabled>Previous</button>
@@ -495,7 +499,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 # User-agent styles # {#ua-styles}
 
-	The following is added to the [=HTML user agent style sheet=]:
+	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 {
@@ -506,13 +514,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		from { opacity: 0; }
 	}
 
-	html {
+	:root {
 		view-transition-name: root;
 	}
 	```
 
 	<div class=note>
-		There are further additions to the [=HTML user agent style sheet=] defined in [[#view-transition-pseudos]] for each pseudo-element,
+		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>
 
@@ -595,10 +603,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 	Its [=containing block=] is the [=snapshot root=].
 
-	The following is added to the [=HTML user agent style sheet=]:
+	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
-	html::view-transition {
+	:root::view-transition {
 		position: fixed;
 		inset: 0;
 	}
@@ -631,10 +639,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 	It is selected from its [=ultimate originating element=], the [=document element=].
 
-	The following is added to the [=HTML user agent style sheet=]:
+	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
-	html::view-transition-group(*) {
+	:root::view-transition-group(*) {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -659,10 +667,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 	It is selected from its [=ultimate originating element=], the [=document element=].
 
-	The following is added to the [=HTML user agent style sheet=]:
+	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
-	html::view-transition-image-pair(*) {
+	:root::view-transition-image-pair(*) {
 		position: absolute;
 		inset: 0;
 
@@ -698,10 +706,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 	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=]:
+	The following is added to the [=global view transition user agent style sheet=]:
 
 	```css
-	html::view-transition-old(*) {
+	:root::view-transition-old(*) {
 		position: absolute;
 		inset-block-start: 0;
 		inline-size: 100%;
@@ -721,10 +729,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 ### <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=]:
+	except the following styles added to the [=global view transition user agent style sheet=]:
 
 	```css
-	html::view-transition-old(*) {
+	:root::view-transition-old(*) {
 		position: absolute;
 		inset-block-start: 0;
 		inline-size: 100%;
@@ -866,7 +874,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		: <dfn>view transition style sheet</dfn>
 		:: a [=/style sheet=].
-			Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=HTML user agent style sheet=].
+			Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=].
 
 			Note: This is used to hold dynamic styles relating to transitions.
 
@@ -1338,7 +1346,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						html::view-transition-old(<var>transitionName</var>) {
+						:root::view-transition-old(<var>transitionName</var>) {
 							object-view-box: <var>oldViewBox</var>;
 						}
 					</pre>
@@ -1389,7 +1397,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						html::view-transition-group(<var>transitionName</var>) {
+						:root::view-transition-group(<var>transitionName</var>) {
 							animation-name: -ua-view-transition-group-anim-<var>transitionName</var>;
 						}
 					</pre>
@@ -1401,7 +1409,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						html::view-transition-image-pair(<var>transitionName</var>) {
+						:root::view-transition-image-pair(<var>transitionName</var>) {
 							isolation: isolate;
 						}
 					</pre>
@@ -1413,8 +1421,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						html::view-transition-old(<var>transitionName</var>),
-						html::view-transition-new(<var>transitionName</var>) {
+						:root::view-transition-old(<var>transitionName</var>),
+						:root::view-transition-new(<var>transitionName</var>) {
 							mix-blend-mode: plus-lighter;
 						}
 					</pre>
@@ -1675,7 +1683,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				<!-- deliberately using <pre> so the example can contain <var> references -->
 				<pre highlight="css">
-					html::view-transition-group(<var>transitionName</var>) {
+					:root::view-transition-group(<var>transitionName</var>) {
 						width: <var>width</var>;
 						height: <var>height</var>;
 						transform: <var>transform</var>;
@@ -1704,7 +1712,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						html::view-transition-new(<var>transitionName</var>) {
+						:root::view-transition-new(<var>transitionName</var>) {
 							object-view-box: <var>newViewBox</var>;
 						}
 					</pre>