Progress on handling styles correctly

Author: jakearchibald

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.