Set up UA styles

Author: jakearchibald

css-view-transitions-1/Overview.bs

@@ -30,6 +30,8 @@ spec:css-images-4; type:function; text:element()
 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>
 
 <style>
@@ -162,7 +164,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			Note: The value <css>none</css> is invalid as a <<custom-ident>>.
 	</dl>
 
-	The [=document element=] participates in a view transition by default using the following style in the [=user-agent origin=]:
+	The [=document element=] participates in a view transition by default using the following rule,
+	added to the [=HTML user agent style sheet=]:
 
 	```css
 	html {
@@ -180,7 +183,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 # User-agent keyframes # {#ua-keyframes}
 
-	The following <<@keyframes>> are added to the [=user-agent origin=]:
+	The following <<@keyframes>> are added to the [=HTML user agent style sheet=]:
 
 	```css
 	@keyframes -ua-view-transition-fade-out {
@@ -229,7 +232,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	:: This pseudo-element is the grouping container of all the other [=view-transition pseudo-elements=].
 		Its [=originating element=] is the document's [=document element=].
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition {
@@ -248,7 +251,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition'' pseudo-element.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-group(*) {
@@ -264,7 +267,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		<div class="note">
 			The aim of the style is to position the element relative to its ''::view-transition'' parent.
 
-			In addition to above, styles in the [=user-agent origin=] animate this pseudo-element's 'width' and 'height'
+			In addition to above, 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=].
 			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.
@@ -279,7 +282,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition-group()'' pseudo-element with the same transition-name.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-image-pair(*) {
@@ -291,7 +294,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		}
 		```
 
-		In addition to above, styles in the [=user-agent origin=] add ''isolation: isolate'' to this pseudo-element
+		Note: In addition to above, styles in the [=document/view transition style sheet=] add ''isolation: isolate'' to this pseudo-element
 		if it has both ''::view-transition-new()'' and ''::view-transition-old()'' as children.
 
 		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element
@@ -307,7 +310,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition-image-pair()'' pseudo-element with the same transition-name.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-old(*) {
@@ -324,13 +327,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		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.
 
-		In addition to above, styles in the [=user-agent origin=] add ''mix-blend-mode: plus-lighter'' to this pseudo element
+		Note: In addition to above, styles in the [=document/view transition style sheet=] add ''mix-blend-mode: plus-lighter'' to this pseudo element
 		if the ancestor ''::view-transition-image-pair()'' has both ''::view-transition-new()'' and ''::view-transition-old()'' as descendants.
 
 		Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels.
 
-		Additional [=user-agent origin=] styles added to animate these pseudo-elements
-		are detailed in [=Animate a view transition=].
+		Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=Animate a view transition=].
 
 	: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
 	::  Identical to ''::view-transition-old()'',
@@ -444,6 +446,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		: <dfn>transition suppressing rendering</dfn>
 		:: a boolean. Initially false.
+
+		: <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=].
+
+			Note: This is used to hold dynamic styles relating to transitions.
 	</dl>
 
 # API # {#api}