[css-view-transitions-2] Add scoped layout section and update UA stylesheet. (#13408)

* Add scoped layout section and update UA stylesheet.

Author: skobes-chromium

css-view-transitions-2/Overview.bs

@@ -1328,6 +1328,29 @@ ISSUE: `::view-transition-group-children()` needs to be specified here.
 		Similarly, hit-testing is skipped because the element's DOM location does not correspond to where its contents are rendered.
 		However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.
 
+## Scoped View Transition Layout ## {#scoped-view-transition-layout}
+
+For a [=scoped view transition=], the ''::view-transition'' pseudo-element
+is a child of the [=ViewTransition/root element=] in the [=box tree=], but
+with some behaviors that are different from ordinary children:
+
+* The ''::view-transition'' pseudo-element generates a stacking context
+	which paints separately from, and on top of, the painting of the
+	[=ViewTransition/root element=] and its other children.
+
+	Note: A consequence of painting separately is that properties on the root element
+	that affect the way the root element is painted, such as 'opacity', do not apply
+	to the ''::view-transition'' pseudo-element. However, if the root element is captured
+	in a ''::view-transition-group'' for its own transition, such properties
+	will be reflected in the captured image.
+
+* If the [=ViewTransition/root element=] has a [=scrolling box=], the
+	''::view-transition'' pseudo-element is not translated by the scroll position
+	of the [=ViewTransition/root element=].
+
+* If the [=ViewTransition/root element=] clips its [=overflow=], the
+	''::view-transition'' pseudo-element is exempted from that clip.
+
 
 # User Agent Stylesheet # {#ua-styles}
 
@@ -1339,12 +1362,12 @@ ISSUE: `::view-transition-group-children()` needs to be specified here.
 		view-transition-name: root;
 	}
 
-	:root::view-transition {
-		position: fixed;
+	::view-transition {
+		position: absolute;
 		inset: 0;
 	}
 
-	:root::view-transition-group(*) {
+	::view-transition-group(*) {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -1353,22 +1376,23 @@ ISSUE: `::view-transition-group-children()` needs to be specified here.
 		animation-fill-mode: both;
 	}
 
-	:root::view-transition-image-pair(*) {
+	::view-transition-image-pair(*) {
 		position: absolute;
 		inset: 0;
 	}
 
-	:root::view-transition-old(*),
-	:root::view-transition-new(*) {
+	::view-transition-old(*),
+	::view-transition-new(*) {
 		position: absolute;
+		display: block;
 		inset-block-start: 0;
 		inline-size: 100%;
 		block-size: auto;
 	}
 
-	:root::view-transition-image-pair(*),
-	:root::view-transition-old(*),
-	:root::view-transition-new(*) {
+	::view-transition-image-pair(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
 		animation-duration: inherit;
 		animation-fill-mode: inherit;
 		animation-delay: inherit;
@@ -1378,7 +1402,7 @@ ISSUE: `::view-transition-group-children()` needs to be specified here.
 		animation-play-state: inherit;
 	}
 
-	:root::view-transition-group-children(*) {
+	::view-transition-group-children(*) {
 		position: absolute;
 		inset: 0;
 		border-style: solid;
@@ -1400,13 +1424,15 @@ ISSUE: `::view-transition-group-children()` needs to be specified here.
 	}
 	```
 
-	ISSUE: This needs to include scoped view transition styles as well.
-
 	<details class="note">
 		<summary>Explanatory Summary</summary>
 		This UA style sheet does several things:
-		* Lay out ''::view-transition'' to cover the entire [=snapshot containing block=]
+		* Lay out '':root::view-transition'' to cover the entire [=snapshot containing block=]
 			so that each '':view-transition-group()'' child can lay out relative to it.
+			Note: the placement of the [=snapshot containing block=] is similar to
+			`position: fixed`.
+		* For a [=scoped view transition=], lay out ''::view-transition'' to cover the
+			view transition [=ViewTransition/root element=].
 		* Give the [=/root element=] a default [=view transition name=],
 			to allow it to be independently selected.
 		* Reduce layout interference from the ''::view-transition-image-pair()'' pseudo-element