[css-view-transitions-1] Display live image when old content is outsi…

…de snapshot containing block

See w3c#8282 (comment)

css-view-transitions-1/Overview.bs

@@ -1172,7 +1172,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	<dl dfn-for="captured element">
 		: <dfn>old image</dfn>
-		:: an 2D bitmap or null. Initially null.
+		:: a 2D bitmap, "`live`" or null. Initially null.
 
 		: <dfn>old width</dfn>
 		: <dfn>old height</dfn>
@@ -1368,11 +1368,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. Let |capture| be a new [=captured element=] struct.
 
-			1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.
-
 			1. Let |originalRect| be [=snapshot containing block=] if |element| is the [=document element=],
 				otherwise, the element|'s [=border box=].
 
+			1. If |originalRect| does not intersect with [=snapshot containing block=], then set |capture|'s [=old image=] to "`live`".
+
+			1. Otherwise, set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.
+
 			1. Set |capture|'s [=captured element/old width=] to |originalRect|'s {{DOMRect/width}}.
 
 			1. Set |capture|'s [=captured element/old height=] to |originalRect|'s {{DOMRect/height}}.
@@ -1469,9 +1471,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			1. If |capturedElement|'s [=captured element/old image=] is not null, then:
 
 				1. Let |old| be a new ''::view-transition-old()'',
-					with its [=view transition name=] set to |transitionName|,
-					displaying |capturedElement|'s [=captured element/old image=]
-					as its [=replaced element|replaced=] content.
+					with its [=view transition name=] set to |transitionName|.
+
+				1. If |capturedElement|'s [=captured element/old image=] is not "`live`", then
+					set |old|'s [=replaced element|replaced=] content to |capturedElement|'s
+					[=captured element/old image=].
 
 				1. Append |old| to |imagePair|.
 
@@ -1903,11 +1907,19 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 				Note: The above code example contains variables to be replaced.
 
+			1. Let |liveSnapshot| be  the result of [=capturing the image=] of |capturedElement|'s [=new element=].
+
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
 				1. Let |new| be the ''::view-transition-new()'' with the [=view transition name=] |transitionName|.
 
-				1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=].
+				1. Set |new|'s [=replaced element=] content to |liveSnapshot|.
+
+			1. If |capturedElement|'s [=old image=] is "`live`", then:
+
+				1. Let |old| be the ''::view-transition-old()'' with the [=view transition name=] |transitionName|.
+
+				1. Set |old|'s [=replaced element=] content to |liveSnapshot|.
 
 		This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API.
 
@@ -1979,6 +1991,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
 * Fix algorithm for dispatching updateDOMCallback promise.
 * Scope view transition names to matching tree context. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>.
 * Fix scoping to match name instead of element. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>.
+* Show live contents if the old element is captured when outside the viewport. See <a href="https://github.com/w3c/csswg-drafts/issues/8282">issue 8282</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>