[css-view-transitions-1] Skip transition if viewport changes. Fixes #8045 (#8306)

Author: jakearchibald

css-view-transitions-1/Overview.bs

@@ -393,6 +393,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 	The <dfn>snapshot viewport origin</dfn> refers to the start of the block and inline axes of the [=snapshot viewport=].
 
+	The <dfn>snapshot viewport size</dfn> refers to the width and height of the [=snapshot viewport=] as a [=/tuple=] of two numbers.
+
 ## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer}
 
 	This specification introduces a stacking layer to the [[CSS2#elaborate-stacking-contexts]].
@@ -637,6 +639,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		: <dfn>transition root pseudo-element</dfn>
 		:: a ''::view-transition''.
 			Initially a new ''::view-transition''.
+
+		: <dfn>initial snapshot viewport size</dfn>
+		:: a [=tuple=] of two numbers (width and height), or null.
+			Initially null.
+
+			Note: This is used to detect changes in the [=snapshot viewport size=],
+			which causes the transition to [=skip the view transition|skip=].
+			[Discussion of this behavior](https://github.com/w3c/csswg-drafts/issues/8045).
 	</dl>
 
 	The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=].
@@ -713,6 +723,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
 
+		1. Set |transition|'s [=ViewTransition/initial snapshot viewport size=] to the [=snapshot viewport size=].
+
 		1. [=list/For each=] |element| of every {{Element}} and [=pseudo-element=] connected to |document|,
 			in [paint order](https://drafts.csswg.org/css2/#painting-order):
 
@@ -806,6 +818,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 						Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
 
+					1. If |transition|'s [=ViewTransition/initial snapshot viewport size=] is not equal to the [=snapshot viewport size=],
+						then [=skip the view transition=] for |transition|, and return.
+
 					1. Set [=document/transition suppressing rendering=] to false.
 
 					1. Let |usedTransitionNames| be a new [=/set=] of strings.
@@ -1012,6 +1027,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 			1. Return.
 
+		1. If |transition|'s [=ViewTransition/initial snapshot viewport size=] is not equal to the [=snapshot viewport size=],
+			then [=skip the view transition=] for |transition|, and return.
+
 		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.