[css-view-transitions-1] Refactor VT old capture algorithm (#9135)

* Refactor VT old capture algorithm

* update

* update

* update

* Typo

---------

Co-authored-by: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>

Author: vmpstr

css-view-transitions-1/Overview.bs

@@ -1314,6 +1314,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		1. Let |usedTransitionNames| be a new [=/set=] of strings.
 
+		1. Let |captureElements| be a new [=/list=] of elements.
+
 		1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
 
 		1. Set |transition|'s [=ViewTransition/initial snapshot containing block size=] to the [=snapshot containing block size=].
@@ -1322,6 +1324,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			and has a [=node document=] equal to to |document|,
 			in [paint order](https://drafts.csswg.org/css2/#painting-order):
 
+			<div class=note>We iterate in paint order to ensure that this order is cached in |namedElements|.
+			This defines the DOM order for ::view-transition-group pseudo-elements, such that the element at the bottom of the paint stack generates the first pseudo child of ::view-transition.</div>
+
 			1. If any [=flat tree=] ancestor of this |element| [=skips its contents=], then [=continue=].
 
 			1. If |element| has more than one [=box fragment=], then [=continue=].
@@ -1339,6 +1344,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. [=set/Append=] |transitionName| to |usedTransitionNames|.
 
+			1. Set |element|'s [=captured in a view transition=] to true.
+
+			1. [=list/Append=] |element| to |captureElements|.
+
+			<div class="note">The algorithm continues in a separate loop to ensure that [=captured in a view transition=] is set on all elements participating in this capture before it is read by future steps in the algorithm.</div>
+
+		1. [=list/For each=] |element| in |captureElements|:
+
 			1. Let |capture| be a new [=captured element=] struct.
 
 			1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.
@@ -1363,7 +1376,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. Set |capture|'s [=captured element/old mix-blend-mode=] to the [=computed value=] of 'mix-blend-mode' on |element|.
 
+			1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
+
 			1. Set |namedElements|[|transitionName|] to |capture|.
+
+		1. [=list/For each=] |element| in |captureElements|:
+
+			1. Set |element|'s [=captured in a view transition=] to false.
 	</div>
 
 ### [=Capture the new state=] ### {#capture-new-state-algorithm}
@@ -1855,6 +1874,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
 * Use a keyframe to add plus-lighter blending during cross-fade. See <a href="https://github.com/w3c/csswg-drafts/issues/8924">issue 8924</a>.
 * Add mix-blend-mode to list of properties copied over to the ''::view-transition-group''. See <a href="https://github.com/w3c/csswg-drafts/issues/8962">issue 8962</a>.
 * Add text-orientation to list of properties copied over to the ''::view-transition-group''. See <a href="https://github.com/w3c/csswg-drafts/issues/8230">issue 8230</a>.
+* Refactor the old capture algorithm to properly set [=captured in a view transition=] before reading the value.
 
 <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>