[css-view-transitions-1] Always perform all the update callbacks before capturing the new state. (#11693)

Closes #11292

Author: noamr

css-view-transitions-1/Overview.bs

@@ -1158,6 +1158,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			with [=this=]'s [=document element=] is its [=originating element=].
 
 			Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot containing block=].
+
+		: <dfn>update callback queue</dfn>
+		:: A [=/list=], initially empty.
 	</dl>
 
 ### Additions to Elements ### {#elements-concept}
@@ -1253,6 +1256,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
 
+		1. [=Flush the update callback queue=].
+
+			Note: this ensures that any changes to the DOM scheduled by other skipped transitions are done before the old state for this transition is captured.
+
 		1. [=Capture the old state=] for |transition|.
 
 			If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
@@ -1271,7 +1278,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 				Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
 
-			1. [=call the update callback=].
+			1. [=schedule the update callback=] for |transition|.
+
+			1. [=Flush the update callback queue=].
 	</div>
 
 	<div algorithm>
@@ -1649,6 +1658,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	</div>
 
+	<div algorithm>
+		To <dfn>schedule the update callback</dfn> given a {{ViewTransition}} |transition|:
+			1. [=list/Append=] |transition| to |transition|'s [=relevant settings object=]'s [=update callback queue=].
+			1. [=Queue a global task=] on the [=DOM manipulation task source=],
+				given |transition|'s [=relevant global object=], to [=flush the update callback queue=].
+
+	</div>
+	<div algorithm>
+		To <dfn>flush the update callback queue</dfn> given a {{Document}} |document|:
+			1. [=list/For each=] |transition| in |document|'s [=update callback queue=], [=call the update callback=] given |transition|.
+
+			1. Set |document|'s [=update callback queue=] to an empty list.
+	</div>
+
 ## [=Skip the view transition=] ## {#skip-the-view-transition-algorithm}
 
 	<div algorithm>
@@ -1658,8 +1681,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`".
 
-		1. If |transition|'s [=ViewTransition/phase=] is before "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=],
-			given |transition|'s [=relevant global object=], to [=call the update callback=] of |transition|.
+		1. If |transition|'s [=ViewTransition/phase=] is before "`update-callback-called`",
+			then [=schedule the update callback=] for |transition|.
 
 		1. Set [=document/rendering suppression for view transitions=] to false.
 
@@ -1994,6 +2017,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
 * Fix scoping to match name instead of element. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>.
 * Add a rendering characteristics note about out-of-viewport elements. See <a href="https://github.com/w3c/csswg-drafts/issues/8282">issue 8282</a>.
 * Swap the order of invoking the update callback and setting the phase. See <a href="https://github.com/w3c/csswg-drafts/issues/10822">issue 10822</a>.
+* Always flush the queue of update callbacks before capturing the old state. See <a href="https://github.com/w3c/csswg-drafts/issues/11292">issue 11922</a>.
 
 <h3 id="changes-since-2022-05-25">
 Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a>