[css-anchor-position-1] Define how transforms and fragmentation affect the anchor box. Move some concepts around for better organization. #8584 #12287

Author: tabatkins

css-anchor-position-1/Overview.bs

@@ -111,7 +111,7 @@ to find the “best” one that avoids overlap/overflow.
 	}
 	</pre>
 
-	Note that using the [[#the-popover-attribute|Popover API]]
+	Note that using the [[HTML#the-popover-attribute|Popover API]]
 	will automatically set 'position' and create the anchoring relationship
 	without setting 'anchor-name' or 'position-anchor' value
 	(by defining an [=implicit anchor=]),
@@ -173,7 +173,7 @@ Animation Type: discrete
 
 The 'anchor-name' property declares
 that an element is an <dfn>anchor element</dfn>,
-whose [=principal box=] is an <dfn local-lt=anchor>anchor box</dfn>,
+whose [=principal box=] is an [=anchor box=],
 and gives it a list of <dfn lt="anchor name">anchor names</dfn> to be targeted by.
 Values are defined as follows:
 
@@ -236,20 +236,37 @@ The [=implicit anchor element=] of a [=pseudo-element=]
 is its [=originating element=],
 unless otherwise specified.
 
-### The Anchor's Position ### {#determining-position}
+### The Anchor Box ### {#anchor-position-size}
+
+Several features of this specification refer to the position and size of an <dfn local-lt=anchor>anchor box</dfn>.
+Unless otherwise specified,
+this refers to the [=border box=] edge of the [=principal box=] of the [=anchor element=].
+The [=anchor box=]'s position and size is determined after layout.
+
+This position and size includes 'zoom' and 'position'-based adjustments
+(such as ''position: relative'' or ''position: sticky'')
+as well as transforms (such as 'transform' or 'offset-path').
+In these cases, the axis-aligned bounding rectangle of the [=anchor box=]
+in the coordinate space of the [=absolutely positioned=] element's [=containing block=]
+is used instead.
+Transforms are often optimized onto a different thread,
+so transform-based updates to an [=anchor box’s=] position
+may be delayed by a few frames.
+Authors can avoid this delay by using absolute or relative positioning instead where practical.
+
+If the [=anchor box=] is [=fragmented=],
+and the [=containing block=] of the [=absolutely positioned=] box
+referring to that [=anchor box=] is outside the relevant [=fragmentation context=],
+the axis-aligned bounding rectangle of its [=box fragments=] is used instead.
+(If the [=absolutely positioned=] box is inside the [=fragmentation context=],
+it sees the [=anchor box=] as unfragmented--
+and can be itself fragmented by the [=fragmentation context=].)
 
-Several features of this specification refer to the position and size of an [=anchor box=].
-The [=anchor box=]'s position and size is determined after layout,
-and for these purposes
-includes 'position'-based adjustments
-(such as ''position: relative'' or ''position: sticky'').
-
-Post-layout effects, such as 'transform',
+For performance reasons,
+scrolling is handled specially, see [[#scroll]].
+Other post-layout effects, such as filters,
 do not affect the [=anchor box's=] position.
 
-Note: Allowing an anchor to opt into including the effects of 'transform'
-or similar properties
-might be allowed in the future.
 
 <!-- Big Text: a-scope
 
@@ -882,12 +899,8 @@ resolves at [=computed value=] time
 to the <<length>> that would align the edge
 of the positioned boxes' [=inset-modified containing block=]
 corresponding to the property the function appears in
-with the specified border edge of the [=target anchor element=],
-assuming that all [=scroll containers=]
-between the [=target anchor element=]
-and the positioned box's [=containing block=]
-are scrolled to their [=remembered scroll offsets=]
-(but see [[#scroll]]).
+with the specified edge
+of the [=target anchor element's=] [=anchor box=].
 
 Note: This means that [=transitions=] or [=animations=]
 of a property using an [=anchor function=]
@@ -897,10 +910,6 @@ the [=anchor box=] moving,
 the 'anchor-name' property being changed on anchors,
 etc.
 
-If the [=target anchor element=] is [=fragmented=],
-the axis-aligned bounding rectangle
-of the [=box fragment|fragments=]' [=border boxes=] is used instead.
-
 <div class=example>
 	For example,
 	in ''.bar { inset-block-start: anchor(--foo block-start); }'',
@@ -1509,10 +1518,10 @@ is equivalent to ''width: anchor-size(width)''.)
 An ''anchor-size()'' function representing a [=resolvable anchor-size function=]
 resolves at [=computed value=] time
 (via [=style & layout interleaving=])
-to the <<length>> separating the relevant border edges
+to the <<length>> separating the relevant edges
 (either left and right, or top and bottom,
 whichever is in the specified axis)
-of the [=target anchor element=].
+of the [=target anchor element's=] [=anchor box=].
 
 
 <h4 id=anchor-size-resolution oldids=anchor-size-valid>
@@ -2391,7 +2400,7 @@ both existing and upcoming,
 allow establishing such connections explicitly,
 so that non-visual user agents can also benefit.
 
-For example, the [[#the-popover-attribute|Popover API in HTML]]
+For example, the [[HTML#the-popover-attribute|Popover API in HTML]]
 automatically links the invoker button
 to the popover element,
 including automatically adjusting tabbing order;