[css-anchor-position-1] Make snapshotted scroll offset per-axis (#9347)

Co-authored-by: Tab Atkins Jr <jackalmage@gmail.com>

Author: xiaochengh

css-anchor-position-1/Overview.bs

@@ -470,10 +470,9 @@ of the fragments' border boxes is used instead.
 Issue: Do we need to control which box we're referring to,
 so you can align to padding or content edge?
 
-If the positioned element
-has a [=snapshotted scroll offset=],
-then it is additionally visually shifted
-by those offsets,
+The positioned element
+is additionally visually shifted
+by its [=snapshotted scroll offset=],
 as if by an additional ''translate()'' transform.
 
 <div class=example>
@@ -728,28 +727,47 @@ the performance benefits of the separate scrolling thread,
 we define:
 
 <div algorithm="compensate for scroll">
-	For any [=absolutely-positioned=] element |query el|,
-	if there is a [=target anchor element=]
-	given the [=default anchor specifier=] of |query el|,
-	and at least one ''anchor()'' function on |query el|
-	refers to the same [=target anchor element=],
-	then |query el| has a <dfn>snapshotted scroll offset</dfn>,
-	which is a pair of lengths
-	representing a vertical and horizontal offset.
-
-	The [=snapshotted scroll offset=]
-	is the sum of the offsets from the [=initial scroll position=]
-	of all [=scroll container=] ancestors of the [=target anchor element=],
-	up to but not including |query el|'s [=containing block=].
+	An [=absolutely-positioned=] element |query el|
+	<dfn>needs scroll adjustment</dfn>
+	in the horizontal or vertical axis
+	if both of the following conditions are true:
+
+	* |query el| has a [=default anchor element=].
+
+	* At least one ''anchor()'' function on |query el|'s
+		used [=inset properties=] in the axis
+		refers to a [=target anchor element=]
+		with the same nearest [=scroll container=] ancestor
+		as |query el|'s [=default anchor element=],
+		or |query el|'s used [=self-alignment property=] value
+		in the axis is ''anchor-center''.
+
+	Note: If |query el| has a [=position fallback list=],
+	then whether it [=needs scroll adjustment=] in an axis
+	is also affected by the applied fallback style.
+
+	|query el|'s <dfn>snapshotted scroll offset</dfn> is a pair of lengths
+	for the horizontal and vertical axises, respectively.
+	Each length is calculated as:
+
+	* If |query el| [=needs scroll adjustment=] in the axis,
+		then the length is the sum of the [=scroll offsets=]
+		of all [=scroll container=] ancestors
+		of the [=default anchor element=]
+		in the same axis,
+		up to but not including |query el|'s [=containing block=];
+
+	* Otherwise, the length is 0.
 
 	Issue: Define the precise timing of the snapshot:
 	updated each frame,
 	before style recalc.
 
 	If |query el| has an [=additional fallback-bounds rect=],
-	similarly calculate the sum of the offsets from the [=initial scroll position=]
+	similarly calculate the sum of [=scroll offsets=]
 	of all [=scroll container=] ancestors
 	of the element generating the [=additional fallback-bounds rect=],
+	up to but not including |query el|'s [=containing block=],
 	and subtract that summed offset
 	from the [=additional fallback-bounds rect's=] position.
 </div>
@@ -1088,8 +1106,7 @@ to trigger automatic "animation" of the fallback'd properties.
 			Let |adjusted styles|
 			be |el|'s styles after these adjustments.
 
-		2. If |el| has a [=snapshotted scroll offset=],
-			then subtract the offsets
+		2. Subtract |el|'s [=snapshotted scroll offset=]
 			from |el|'s margin box's position.
 
 			Also, if any of |el|'s [=inset properties=] are non-auto,