From 65cc54bc9a1599e1c97a1661c3492893b5eab8dd Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Wed, 16 Nov 2022 13:24:42 +0000
Subject: [PATCH 1/9] tmp

---
 css-view-transitions-1/Overview.bs | 44 ++++++++++--------------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index ad702986e7d..af653835be5 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -178,6 +178,20 @@ 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, that we happen to call "element".
 
+# User-agent keyframes # {#ua-keyframes}
+
+	The following <<@keyframes>> are added to the [=user-agent origin=]:
+
+	```css
+	@keyframes -ua-view-transition-fade-out {
+		to { opacity: 0; }
+	}
+
+	@keyframes -ua-view-transition-fade-in {
+		from { opacity: 0; }
+	}
+	```
+
 # Pseudo-elements # {#pseudo}
 
 	While the UA is [=animating a view transition=],
@@ -992,36 +1006,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	<div algorithm>
 		To <dfn>animate a view transition</dfn> given a {{ViewTransition}} |transition|:
 
-		1. Generate a <<@keyframes>> named "-ua-view-transition-fade-out" in
-			[=user-agent origin=] as follows:
-
-			```css
-			@keyframes -ua-view-transition-fade-out {
-				to { opacity: 0; }
-			}
-			```
-
-		1. Generate a <<@keyframes>> named "-ua-view-transition-fade-in" in
-			[=user-agent origin=] as follows:
-
-			```css
-			@keyframes -ua-view-transition-fade-in {
-				from { opacity: 0; }
-			}
-			```
-
-		1. Apply the following styles in [=user-agent origin=]:
-
-			```css
-			html::view-transition-old(*) {
-				animation: -ua-view-transition-fade-out 0.25s both;
-			}
-
-			html::view-transition-new(*) {
-				animation: -ua-view-transition-fade-in 0.25s both;
-			}
-			```
-
 		1. [=map/For each=] |name| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
 			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:

From 8152680ea2267ca3ae245f75b84a071933caf6d5 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Wed, 16 Nov 2022 15:33:20 +0000
Subject: [PATCH 2/9] Set up UA styles

---
 css-view-transitions-1/Overview.bs | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index af653835be5..49b64804f9c 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/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}

From 4e8335ab312860ce870c273f8801d176f54b90f3 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Wed, 16 Nov 2022 17:21:06 +0000
Subject: [PATCH 3/9] Progress on handling styles correctly

---
 css-view-transitions-1/Overview.bs | 103 ++++++++++++++++++++++-------
 1 file changed, 79 insertions(+), 24 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 49b64804f9c..77a552fc2a5 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -591,6 +591,21 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		: <dfn>finished promise</dfn>
 		:: a {{Promise}}.
 			Initially [=a new promise=] in [=this's=] [=relevant Realm=].
+
+		: <dfn>group keyframes</dfn>
+		:: A {{CSSKeyframesRule}} or null. Initially null.
+
+		: <dfn>group animation name rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>group styles rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>old view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>new view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
 	The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=].
@@ -834,13 +849,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		1. Set [=document/transition suppressing rendering=] to false.
 
-		1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`", then:
-
-			1. Remove all associated [=view-transition pseudo-elements=] from |document|.
-
-				Issue: There needs to be a definition/link for "remove".
-
-				Issue: There needs to be a definition/link for "associated".
+		1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`",
+			then [=clear view transition=] |transition|.
 
 		1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
 
@@ -969,11 +979,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
 
-			1. Remove all associated [=view-transition pseudo-elements=] from |document|.
-
-				Issue: There needs to be a definition/link for "remove".
-
-				Issue: There needs to be a definition/link for "associated".
+			1. [=Clear view transition=] |transition|.
 
 			1. Set |document|'s [=document/active DOM transition=] to null.
 
@@ -1014,6 +1020,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 	<div algorithm>
 		To <dfn>animate a view transition</dfn> given a {{ViewTransition}} |transition|:
 
+		1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].
+
 		1. [=map/For each=] |name| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
 			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:
@@ -1024,21 +1032,30 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
 
-				1. Generate a <<@keyframes>> named "-ua-view-transition-group-anim-|name|" in
-					[=user-agent origin=] as follows:
+				1. If |transition|'s [=ViewTransition/group keyframes=] is not null,
+					then remove |transition|'s [=ViewTransition/group keyframes=] from |document|'s [=document/view transition style sheet=].
 
-				<!-- deliberately using <pre> so the example can contain <var> references -->
-				<pre highlight="css">
-					@keyframes -ua-view-transition-group-anim-<var>name</var> {
-						from {
-							transform: <var>transform</var>;
-							width: <var>width</var>;
-							height: <var>height</var>;
+				1. Set |transition|'s [=ViewTransition/group keyframes=] to a new {{CSSKeyframesRule}} representing the following:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						@keyframes -ua-view-transition-group-anim-<var>name</var> {
+							from {
+								transform: <var>transform</var>;
+								width: <var>width</var>;
+								height: <var>height</var>;
+							}
 						}
-					}
-				</pre>
+					</pre>
+
+					Note: The above code example contains `<var>`s.
+
+				1. Append |transition|'s [=ViewTransition/group keyframes=] to |document|'s [=document/view transition style sheet=].
 
-			1. Apply the following styles in [=user-agent origin=]:
+			1. If |transition|'s [=ViewTransition/group animation name rule=] is not null,
+				then remove |transition|'s [=ViewTransition/group animation name rule=] from |document|'s [=document/view transition style sheet=].
+
+			1. Set |transition|'s [=ViewTransition/group animation name rule=] to a new {{CSSStyleRule}} representing the following:
 
 				<!-- deliberately using <pre> so the example can contain <var> references -->
 				<pre highlight="css">
@@ -1047,7 +1064,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 					}
 				</pre>
 
+				Note: The above code example contains `<var>`s.
+
+			1. Append |transition|'s [=ViewTransition/group animation name rule=] to |document|'s [=document/view transition style sheet=].
+
 		1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
+
+		Note: User agents can skip modifications to |document|'s [=document/view transition style sheet=] if the result would be the same.
+		The order of rules within the [=document/view transition style sheet=] is not observable.
 	</div>
 
 ## [=Create transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
@@ -1181,6 +1205,37 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 			* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.
 	</div>
 
+## [=Clear view transition=] ## {#clear-view-transition-algorithm}
+
+	<div algorithm>
+		To <dfn>clear view transition</dfn> of a {{ViewTransition}} |transition|:
+
+		1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
+
+		1. Remove all associated [=view-transition pseudo-elements=] from |document|.
+
+				Issue: There needs to be a definition/link for "remove".
+
+				Issue: There needs to be a definition/link for "associated".
+
+		1. Let |styles| be a [=/list=] of the following members of |transition|:
+
+			1. [=ViewTransition/group keyframes=].
+
+			1. [=ViewTransition/group animation name rule=].
+
+			1. [=ViewTransition/group styles rule=].
+
+			1. [=ViewTransition/old view-box rule=].
+
+			1. [=ViewTransition/new view-box rule=].
+
+		1. [=list/For each=] |style| of |styles|:
+
+			1. If |style| is not null,
+				then remove |style| from |document|'s [=document/view transition style sheet=].
+	</div>
+
 <h2 id="priv" class="no-num">Privacy Considerations</h2>
 
 This specification introduces no new privacy considerations.

From 3953af9412c40fa4a9d3ee0e90abc802a83dab96 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Thu, 17 Nov 2022 13:18:58 +0000
Subject: [PATCH 4/9] Clean up use of style modifications

---
 css-view-transitions-1/Overview.bs | 280 +++++++++++++++--------------
 1 file changed, 141 insertions(+), 139 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 77a552fc2a5..54a0dae366e 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -197,8 +197,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 # Pseudo-elements # {#pseudo}
 
-	While the UA is [=animating a view transition=],
-	it creates the following <dfn export>view-transition pseudo-elements</dfn> to represent the various items being animated.
+	The following <dfn export>view-transition pseudo-elements</dfn> represent the various items being animated.
 
 	The ''::view-transition'' pseudo-element acts as a grouping element for other [=view-transition pseudo-elements=]
 	and has the document's [=document element=] as its [=originating element=].
@@ -273,7 +272,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 			This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
 		</div>
 
-
 		Issue: The selector for this and subsequently defined pseudo-elements is likely to change to indicate position in the pseudo-tree hierarchy.
 
 	: <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
@@ -332,14 +330,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		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.
 
-		Note: Additional styles in the [=document/view transition style sheet=] 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 [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
 
 	: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
-	::  Identical to ''::view-transition-old()'',
+	:: Identical to ''::view-transition-old()'',
 		except it deals with the new element instead.
 
 	The precise tree structure, and in particular the order of sibling pseudo-elements,
-	is defined in the [=Create transition pseudo-elements=] algorithm.
+	is defined in the [=setup transition pseudo-elements=] algorithm.
 
 # Concepts # {#concepts}
 
@@ -436,6 +434,25 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 			Issue: The type of "element" needs to be linked or defined.
 	</dl>
 
+	In addition, a [=captured element=] has the following <dfn for="captured element">style definitions</dfn>:
+
+	<dl dfn-for="captured element">
+		: <dfn>group keyframes</dfn>
+		:: A {{CSSKeyframesRule}} or null. Initially null.
+
+		: <dfn>group animation name rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>group styles rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>old view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>new view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+	</dl>
+
 ## Additions to {{Document}} ## {#additions-to-document}
 
 	A {{Document}} additionally has:
@@ -487,7 +504,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		1. Set |document|'s [=active DOM transition=] to |transition|.
 
-			Note: The process continues in [=perform an old capture=] which is executed at the next [=rendering opportunity=].
+			Note: The process continues in [=setup view transition=], via [=perform pending transition operations=], which is called in [[#monkey-patch-to-rendering-algorithm]].
 
 		1. Return |transition|.
 	</div>
@@ -591,21 +608,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		: <dfn>finished promise</dfn>
 		:: a {{Promise}}.
 			Initially [=a new promise=] in [=this's=] [=relevant Realm=].
-
-		: <dfn>group keyframes</dfn>
-		:: A {{CSSKeyframesRule}} or null. Initially null.
-
-		: <dfn>group animation name rule</dfn>
-		:: A {{CSSStyleRule}} or null. Initially null.
-
-		: <dfn>group styles rule</dfn>
-		:: A {{CSSStyleRule}} or null. Initially null.
-
-		: <dfn>old view-box rule</dfn>
-		:: A {{CSSStyleRule}} or null. Initially null.
-
-		: <dfn>new view-box rule</dfn>
-		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
 	The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=].
@@ -664,16 +666,16 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		1. If |document|'s [=document/active DOM transition=] is not null, then:
 
 			1. If |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`pending-capture`",
-				then [=perform an old capture=] with |document|'s [=document/active DOM transition=].
+				then [=setup view transition=] with |document|'s [=document/active DOM transition=].
 
 			1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`animating`",
 				then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
 	</div>
 
-## [=Perform an old capture=] ## {#perform-an-old-capture-algorithm}
+## [=Setup view transition=] ## {#setup-view-transition-algorithm}
 
 	<div algorithm>
-		To <dfn>perform an old capture</dfn> given a {{ViewTransition}} |transition|,
+		To <dfn>setup view transition</dfn> given a {{ViewTransition}} |transition|,
 			perform the following steps:
 
 		1. Let |namedElements| be |transition|'s [=ViewTransition/named elements=].
@@ -687,7 +689,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			Issue: The link for "paint order" doesn't seem right.
 				Is there a more canonical definition?
-		
+
 			1. If any [=flat tree=] ancestor of this |element| [=skips its contents=], then [=continue=].
 
 			1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
@@ -776,14 +778,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					1. Set [=document/transition suppressing rendering=] to false.
 
-					1. Set |usedTransitionNames| to a new [=/set=].
+					1. Let |usedTransitionNames| be a new [=/set=] of strings.
 
 					1. [=list/For each=] |element| of every {{Element}} and [=pseudo-element=] connected to |document|,
 						in [paint order](https://drafts.csswg.org/css2/#painting-order):
 
 						Issue: The link for "paint order" doesn't seem right.
 							Is there a more canonical definition?
-		
+
 						1. If any [=flat tree=] ancestor of this |element| [=skips its contents=], then [=continue=].
 
 						1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
@@ -814,24 +816,24 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 						1. Let |capture|'s [=new element=] item be |element|.
 
-					1. [=Create transition pseudo-elements=] for |transition|.
+					1. [=Setup transition pseudo-elements=] for |transition|.
 
-					1. [=Style transition pseudo-elements=] for |transition|.
-
-					1. [=Animate a view transition=] |transition|.
+					1. [=Update pseudo-element styles=] for |transition|.
 
 						Note: The above steps will require running document lifecycle phases,
 							to compute information calculated during style/layout.
 
-					1. [=Resolve=] [=ViewTransition/ready promise=].
+					1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
+
+					1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
 
-				* If the promise was rejected with reason |r|, then:
+				* If the promise was rejected with reason |reason|, then:
 
 					1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
 
 						Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
 
-					1. [=skip the view transition=] |transition| with |r|.
+					1. [=Skip the view transition=] |transition| with |reason|.
 	</div>
 
 ## Skip the view transition ## {#skip-the-view-transition-algorithm}
@@ -860,13 +862,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			Note: The ready promise would've been resolved if {{ViewTransition/skipTransition()}} is called after we start animating.
 
-		1. [=promise/React=] to [=ViewTransition/DOM updated promise=]:
+		1. [=promise/React=] to |transition|'s [=ViewTransition/DOM updated promise=]:
 
-			* If [=ViewTransition/DOM updated promise=] was resolved,
+			* If |transition|'s [=ViewTransition/DOM updated promise=] was resolved,
 				then [=resolve=] |transition|'s [=ViewTransition/finished promise=].
 
-			* If [=ViewTransition/DOM updated promise=] was rejected with reason |r|,
-				then [=reject=] |transition|'s [=ViewTransition/finished promise=] with |r|.
+			* If |transition|'s [=ViewTransition/DOM updated promise=] was rejected with reason |reason|,
+				then [=reject=] |transition|'s [=ViewTransition/finished promise=] with |reason|.
 	</div>
 
 ## [=Capture the image=] ## {#capture-the-image-algorithm}
@@ -987,9 +989,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			1. Return.
 
-		1. [=Style transition pseudo-elements=] for |transition|.
-
-		1. [=Animate a view transition=] for |transition|.
+		1. [=Update pseudo-element styles=] for |transition|.
 
 			Note: The above implies that a change in incoming element's size or position will cause a new keyframe to be generated.
 				This can cause a visual jump.
@@ -1015,71 +1015,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 			Issue: Define the algorithm used to clip the snapshot when it exceeds max size.
 	</div>
 
-## [=Animate a view transition=] ## {#animate-a-view-transition-algorithm}
+## [=Setup transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
 
 	<div algorithm>
-		To <dfn>animate a view transition</dfn> given a {{ViewTransition}} |transition|:
+		To <dfn>setup transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
 
 		1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].
 
-		1. [=map/For each=] |name| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
-
-			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:
-
-				1. Let |transform| be |capturedElement|'s [=old styles=]'s 'transform' property.
-
-				1. Let |width| be |capturedElement|'s [=old styles=]'s 'width' property.
-
-				1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
-
-				1. If |transition|'s [=ViewTransition/group keyframes=] is not null,
-					then remove |transition|'s [=ViewTransition/group keyframes=] from |document|'s [=document/view transition style sheet=].
-
-				1. Set |transition|'s [=ViewTransition/group keyframes=] to a new {{CSSKeyframesRule}} representing the following:
-
-					<!-- deliberately using <pre> so the example can contain <var> references -->
-					<pre highlight="css">
-						@keyframes -ua-view-transition-group-anim-<var>name</var> {
-							from {
-								transform: <var>transform</var>;
-								width: <var>width</var>;
-								height: <var>height</var>;
-							}
-						}
-					</pre>
-
-					Note: The above code example contains `<var>`s.
-
-				1. Append |transition|'s [=ViewTransition/group keyframes=] to |document|'s [=document/view transition style sheet=].
-
-			1. If |transition|'s [=ViewTransition/group animation name rule=] is not null,
-				then remove |transition|'s [=ViewTransition/group animation name rule=] from |document|'s [=document/view transition style sheet=].
-
-			1. Set |transition|'s [=ViewTransition/group animation name rule=] to a new {{CSSStyleRule}} representing the following:
-
-				<!-- deliberately using <pre> so the example can contain <var> references -->
-				<pre highlight="css">
-					html::view-transition-group(<var>name</var>) {
-						animation-name: -ua-view-transition-group-anim-<var>name</var>;
-					}
-				</pre>
-
-				Note: The above code example contains `<var>`s.
-
-			1. Append |transition|'s [=ViewTransition/group animation name rule=] to |document|'s [=document/view transition style sheet=].
-
-		1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
-
-		Note: User agents can skip modifications to |document|'s [=document/view transition style sheet=] if the result would be the same.
-		The order of rules within the [=document/view transition style sheet=] is not observable.
-	</div>
-
-## [=Create transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
-
-	<div algorithm>
-		To <dfn>create transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
-
-		1. Let |transitionRoot| be the result of creating a new ''::view-transition'' pseudo-element.
+		1. Let |transitionRoot| be the result of creating a new ''::view-transition'' pseudo-element in |document|'s [=snapshot viewport=].
 
 		1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
@@ -1104,6 +1047,22 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				1. Append |old| to |imagePair|.
 
+				1. Let |oldViewBox| be |capturedElement|'s [=old styles=] 'object-view-box' property.
+
+				1. Set |capturedElement|'s [=captured element/old view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=].
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-old(<var>transitionName</var>) {
+							object-view-box: <var>oldViewBox</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
+
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
 				1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element,
@@ -1117,19 +1076,51 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 				except the [=view-transition pseudo-elements=],
 				are not painted (as if they had visibility: hidden)
 				and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
+
+			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:
+
+				1. Let |transform| be |capturedElement|'s [=old styles=]'s 'transform' property.
+
+				1. Let |width| be |capturedElement|'s [=old styles=]'s 'width' property.
+
+				1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
+
+				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=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						@keyframes -ua-view-transition-group-anim-<var>transitionName</var> {
+							from {
+								transform: <var>transform</var>;
+								width: <var>width</var>;
+								height: <var>height</var>;
+							}
+						}
+					</pre>
+
+					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=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-group(<var>transitionName</var>) {
+							animation-name: -ua-view-transition-group-anim-<var>transitionName</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
 	</div>
 
-## [=Style transition pseudo-elements=] ## {#style-transition-pseudo-elements-algorithm}
+## [=Update pseudo-element styles=] ## {#style-transition-pseudo-elements-algorithm}
 
 	<div algorithm>
-		To <dfn>style transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
+		To <dfn>update pseudo-element styles</dfn> for a {{ViewTransition}} |transition|:
 
 		1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
-			1. Let |group| be the ''::view-transition-group()'' pseudo-element with the name |transitionName|.
-
-					Issue: "name" should be defined/linked.
-
 			1. Let |width|, |height|, |transform|, |writingMode|, and |direction| be null.
 
 			1. If |capturedElement|'s [=new element=] is null, then:
@@ -1156,32 +1147,53 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				1. Set |direction| to the [=computed value=] of 'direction' on |capturedElement|'s [=new element=].
 
-			1. At the [=user-agent origin=],
-				set |group|'s 'width', 'height', 'transform', 'writing-mode', and 'direction' properties
-				to |width|, |height|, |transform|, |writingMode|, and |direction|.
-
-			1. If |capturedElement|'s [=captured element/old image=] is not null, then:
+			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=].
 
-				1. Let |old| be the ''::view-transition-old()'' [=replaced element=] pseudo-element,
-					with the name |transitionName|,
-					displaying |capturedElement|'s [=captured element/old image=].
+				Otherwise, update |capturedElement|'s [=captured element/group styles rule=] to match the following CSS:
 
-				1. At the [=user-agent origin=],
-					set |old|'s 'object-view-box' property to |capturedElement|'s [=old styles=] 'object-view-box' property.
+				<!-- deliberately using <pre> so the example can contain <var> references -->
+				<pre highlight="css">
+					html::view-transition-group(<var>transitionName</var>) {
+						width: <var>width</var>;
+						height: <var>height</var>;
+						transform: <var>transform</var>;
+						writing-mode: <var>writingMode</var>;
+						direction: <var>direction</var>;
+					}
+				</pre>
 
-					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
+				Note: The above code example contains variables to be replaced.
 
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
-				1. Let |new| be the ''::view-transition-new()'' [=replaced element=] pseudo-element, with the name |transitionName|,
+				1. Let |new| be the ''::view-transition-new()'' [=replaced element=] pseudo-element,
+					with the name |transitionName|,
 					displaying the [=capture the image=] of |capturedElement|'s [=new element=].
 
-				1. At the [=user-agent origin=],
-					set |new|'s 'object-view-box' property to a value that when applied to |new|,
-					will cause the view box to coincide with [=new element=]'s [=border box=] in the image.
-		
+				1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|,
+					will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image.
+
+				1. If |capturedElement|'s [=captured element/new view-box rule=] is null,
+					then set |capturedElement|'s [=captured element/new view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=].
+
+					Otherwise, update |capturedElement|'s [=captured element/new view-box rule=] to match the following CSS:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-new(<var>transitionName</var>) {
+							object-view-box: <var>newViewBox</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
+
 		This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API.
-		
+
 		Note: An example of such a web API is `window.getComputedStyle(document.documentElement, "::view-transition")`.
 	</div>
 
@@ -1218,22 +1230,12 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				Issue: There needs to be a definition/link for "associated".
 
-		1. Let |styles| be a [=/list=] of the following members of |transition|:
-
-			1. [=ViewTransition/group keyframes=].
-
-			1. [=ViewTransition/group animation name rule=].
-
-			1. [=ViewTransition/group styles rule=].
-
-			1. [=ViewTransition/old view-box rule=].
-
-			1. [=ViewTransition/new view-box rule=].
+		1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:
 
-		1. [=list/For each=] |style| of |styles|:
+			1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]:
 
-			1. If |style| is not null,
-				then remove |style| from |document|'s [=document/view transition style sheet=].
+				1. If |style| is not null,
+					then remove |style| from |document|'s [=document/view transition style sheet=].
 	</div>
 
 <h2 id="priv" class="no-num">Privacy Considerations</h2>

From 8b0a2a6bc56118b79722dc7c66f65c52838cc1b3 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Thu, 17 Nov 2022 14:02:18 +0000
Subject: [PATCH 5/9] Add issues for a couple of incorrectly applied styles

---
 css-view-transitions-1/Overview.bs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 54a0dae366e..b9df76894e7 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -292,9 +292,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		}
 		```
 
-		Note: In addition to above, styles in the [=document/view transition style sheet=] add ''isolation: isolate'' to this pseudo-element
+		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.
 
+		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
+
 		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element
 		and provide isolation for blending.
 
@@ -325,9 +327,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		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: In addition to above, styles in the [=document/view transition style sheet=] add ''mix-blend-mode: plus-lighter'' to this pseudo element
+		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.
 
+		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
+
 		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.
 
 		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=].

From 1b9fc28a75c58d9c2ecff9e50c00d82977be14a6 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Thu, 17 Nov 2022 14:13:12 +0000
Subject: [PATCH 6/9] Fix heading id

---
 css-view-transitions-1/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index b9df76894e7..824eb602aef 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -1019,7 +1019,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 			Issue: Define the algorithm used to clip the snapshot when it exceeds max size.
 	</div>
 
-## [=Setup transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
+## [=Setup transition pseudo-elements=] ## {#setup-transition-pseudo-elements-algorithm}
 
 	<div algorithm>
 		To <dfn>setup transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:

From 1e1e53473ecc64e3cbd30350527ca58b6fdfcb8f Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Thu, 17 Nov 2022 14:47:45 +0000
Subject: [PATCH 7/9] Apply mix-blend-mode and isolation in algo steps

---
 css-view-transitions-1/Overview.bs | 54 ++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 824eb602aef..42378b85891 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -292,16 +292,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		}
 		```
 
-		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.
-
-		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
-
-		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element
-		and provide isolation for blending.
-
-		Issue: Isolation is only necessary to get the right cross-fade between new and old image pixels.
-		Would it be simpler to always add it and try to optimize in the implementation?
+		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element.
 
 	: <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
 	::  One of these pseudo-elements exists for each element in the old DOM being animated by the view transition,
@@ -327,13 +318,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		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 [=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.
-
-		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
-
-		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.
-
 		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>
@@ -455,6 +439,12 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		: <dfn>new view-box rule</dfn>
 		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>image pair isolation rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>view blend mode rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
 ## Additions to {{Document}} ## {#additions-to-document}
@@ -1116,6 +1106,36 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 					</pre>
 
 					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=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-image-pair(<var>transitionName</var>) {
+							isolation: isolate;
+						}
+					</pre>
+
+					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=]:
+
+					<!-- 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>) {
+							mix-blend-mode: plus-lighter;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+					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, and achieves a "correct" cross-fade.
+
+					Issue: Isolation and the dynamic setting of blending is only necessary to get the right cross-fade between new and old image pixels.
+					Would it be simpler to always add it and try to optimize in the implementation?
 	</div>
 
 ## [=Update pseudo-element styles=] ## {#style-transition-pseudo-elements-algorithm}

From 847a8085aa464a26fa77775fc0e584a092ab7add Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Mon, 21 Nov 2022 13:07:40 +0000
Subject: [PATCH 8/9] Feedback from review

---
 css-view-transitions-1/Overview.bs | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 42378b85891..65b95a572d2 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -447,6 +447,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
+	Note: These are used to update, and later remove styles
+	from a [=document=]'s [=document/view transition style sheet=].
+
 ## Additions to {{Document}} ## {#additions-to-document}
 
 	A {{Document}} additionally has:
@@ -710,7 +713,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.
 
-			1. Set |capture|'s [=old styles=] to the following:
+			1. Set |capture|'s [=captured element/old styles=] to the following:
 
 				: 'transform'
 				:: A CSS transform that would place |element|
@@ -1041,7 +1044,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				1. Append |old| to |imagePair|.
 
-				1. Let |oldViewBox| be |capturedElement|'s [=old styles=] 'object-view-box' property.
+				1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property.
 
 				1. Set |capturedElement|'s [=captured element/old view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
 					and append it to |document|'s [=document/view transition style sheet=].
@@ -1071,13 +1074,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 				are not painted (as if they had visibility: hidden)
 				and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
 
-			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:
+			1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
+				are not null, then:
 
-				1. Let |transform| be |capturedElement|'s [=old styles=]'s 'transform' property.
+				1. Let |transform| be |capturedElement|'s [=captured element/old styles=]'s 'transform' property.
 
-				1. Let |width| be |capturedElement|'s [=old styles=]'s 'width' property.
+				1. Let |width| be |capturedElement|'s [=captured element/old styles=]'s 'width' property.
 
-				1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
+				1. Let |height| be |capturedElement|'s [=captured element/old styles=]'s 'height' property.
 
 				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=]:
@@ -1149,15 +1153,15 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			1. If |capturedElement|'s [=new element=] is null, then:
 
-				1. Set |width| to |capturedElement|'s [=old styles=] 'width' property.
+				1. Set |width| to |capturedElement|'s [=captured element/old styles=] 'width' property.
 
-				1. Set |height| to |capturedElement|'s [=old styles=] 'height' property.
+				1. Set |height| to |capturedElement|'s [=captured element/old styles=] 'height' property.
 
-				1. Set |transform| to |capturedElement|'s [=old styles=] 'transform' property.
+				1. Set |transform| to |capturedElement|'s [=captured element/old styles=] 'transform' property.
 
-				1. Set |writingMode| to |capturedElement|'s [=old styles=] 'writing-mode' property.
+				1. Set |writingMode| to |capturedElement|'s [=captured element/old styles=] 'writing-mode' property.
 
-				1. Set |direction| to |capturedElement|'s [=old styles=] 'direction' property.
+				1. Set |direction| to |capturedElement|'s [=captured element/old styles=] 'direction' property.
 
 			1. Otherwise:
 

From d3ac58974aa5de529d123492571e55136ee0bbc4 Mon Sep 17 00:00:00 2001
From: jakearchibald <jaffathecake@gmail.com>
Date: Mon, 21 Nov 2022 16:44:56 +0000
Subject: [PATCH 9/9] Use inset()

---
 css-view-transitions-1/Overview.bs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 65b95a572d2..e7289828240 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -729,6 +729,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 				:: ''object-view-box/none'' if |element| is the [=document element=],
 					otherwise, an 'object-view-box' value that, when applied to the old image,
 					will cause the view box to coincide with |element|'s [=border box=] in the image.
+					This must be expressed using ''&lt;basic-shape&gt;/inset()''.
 
 				: 'writing-mode'
 				:: The 'writing-mode' of |element|.
@@ -1058,8 +1059,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					Note: The above code example contains variables to be replaced.
 
-					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
-
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
 				1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element,
@@ -1202,6 +1201,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 				1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|,
 					will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image.
+					This must be expressed using ''&lt;basic-shape&gt;/inset()''.
 
 				1. If |capturedElement|'s [=captured element/new view-box rule=] is null,
 					then set |capturedElement|'s [=captured element/new view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
@@ -1218,8 +1218,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 					Note: The above code example contains variables to be replaced.
 
-					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
-
 		This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API.
 
 		Note: An example of such a web API is `window.getComputedStyle(document.documentElement, "::view-transition")`.