[css-view-transitions-1] A few clarifications and nits (#9028)

* Fix refs and split 'activate'

* [css-view-transitions-1] A few clarifications and nits

- Separated view transition activation to own algorithm, to prepare for cross-doc
- Clarifying that new elements are invisible during the transition
- Changed type of image from ImageData to 2D-bitmap
- Fixed a few broken refs

See #8958

* Update css-view-transitions-1/Overview.bs

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

* Flip order

* New line

---------

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

Author: noamr

css-view-transitions-1/Overview.bs

@@ -37,6 +37,8 @@ spec:css-display-3; type:dfn;
 spec:css-cascade-5; type:dfn; text:computed value
 spec:css22; type:dfn; text:element
 spec:css-break-4; type:dfn; text:fragment
+spec:css-viewport; type:dfn; text:interactive-widget;
+spec:css-display-4; type: dfn; text:invisible;
 </pre>
 
 <pre class=anchors>
@@ -530,7 +532,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	If the element’s [=principal box=] is [=fragmented=],
 	[=skips its contents|skipped=],
-	or [=not rendered=],
+	or [=element-not-rendered|not rendered=],
 	this property has no effect.
 	See [[#algorithms]] for exact details.
 
@@ -776,7 +778,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	The ''::view-transition'' pseudo-element generates a new stacking context,
 	called the <dfn>view transition layer</dfn>,
 	which paints after all other content of the document
-	(including any content rendered in the [=top layer=] [[!FULLSCREEN]]),
+	(including any content rendered in the 	[=Document/top layer=]),
 	after any filters and effects that are applied to such content.
 	(It is not subject to such filters or effects,
 	except insofar as they affect the rendered contents
@@ -787,6 +789,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	since that results in a circular dependency.
 	Therefore, the [=view transition layer=] is a sibling of all other content.
 
+	When a {{Document}}'s [=document/active view transition=]'s [=ViewTransition/phase=] is "`animating`",
+	any [=element=] in that {{Document}} that is [=captured in a view transition=] generates [=invisible=] boxes.
+
 # User Agent Stylesheet # {#ua-styles}
 
 	The <dfn>global view transition user agent style sheet</dfn> is
@@ -1109,7 +1114,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	<dl dfn-for="captured element">
 		: <dfn>old image</dfn>
-		:: an {{ImageData}} or null. Initially null.
+		:: an 2D bitmap or null. Initially null.
 
 		: <dfn>old width</dfn>
 		: <dfn>old height</dfn>
@@ -1242,40 +1247,45 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 					1. [=Skip the view transition=] |transition| with |reason|.
 
-				* If the promise was fulfilled, then:
+				* If the promise was fulfilled, then [=activate view transition|activate=] |transition|.
+	</div>
 
-					1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
+	<div algorithm>
+		To <dfn>activate view transition</dfn> for a {{ViewTransition}} |transition|,
+			perform the following steps:
 
-						Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
+		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. If |transition|'s [=ViewTransition/initial snapshot containing block size=] is not equal to the [=snapshot containing block size=],
-						then [=skip the view transition=] for |transition|, and return.
+		1. Set [=document/rendering suppression for view transitions=] to false.
 
-					1. Set [=document/rendering suppression for view transitions=] to false.
+		1. If |transition|'s [=ViewTransition/initial snapshot containing block size=] is not equal to the [=snapshot containing block size=],
+			then [=skip the view transition=] for |transition|, and return.
 
-					1. [=Capture the new state=] for |transition|.
+		1. [=Capture the new state=] for |transition|.
 
-						If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
-						and return.
+			If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
+			and return.
 
-					1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:
+		1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:
 
-						1. If |capturedElement|'s [=captured element/new element=] is not null,
-							then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to true.
+			1. If |capturedElement|'s [=captured element/new element=] is not null,
+				then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to true.
 
-					1. [=Setup transition pseudo-elements=] for |transition|.
+		1. [=Setup transition pseudo-elements=] for |transition|.
 
-					1. [=Update pseudo-element styles=] for |transition|.
+		1. [=Update pseudo-element styles=] for |transition|.
 
-						If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
-						and return.
+			If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
+			and return.
 
-						Note: The above steps will require running document lifecycle phases,
-							to compute information calculated during style/layout.
+			Note: The above steps will require running document lifecycle phases,
+				to compute information calculated during style/layout.
 
-					1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
+		1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
 
-					1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
+		1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
 	</div>
 
 ### [=Capture the old state=] ### {#capture-old-state-algorithm}
@@ -1414,12 +1424,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 				1. Append |new| to |imagePair|.
 
-				The [=new element=] and its contents
-				(the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element),
-				except the |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=],
-				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 |capturedElement|'s [=captured element/old image=] is null, then:
 				1. [=Assert=]: |capturedElement|'s [=captured element/new element=] is not null.
 
@@ -1649,7 +1653,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			Note: This transform is applied to the snapshot using the `transform` property of the associated ''::view-transition-group'' pseudo-element.
 
-		* Effects on the element, such as 'opacity' and 'filter' are applied to the capture.
+		* Effects applied on the element and its descendants, such as 'opacity' and 'filter', are applied to the capture.
+			Effects applied to the element from its ancestors are ignored.
 
 		* Implementations may clip the rendered contents if the [=ink overflow rectangle=] exceeds some [=implementation-defined=] maximum.
 			However, the captured image should include, at the very least, the contents of |element| that intersect with the [=snapshot containing block=].