@@ -111,7 +111,7 @@ to find the “best” one that avoids overlap/overflow.
111
111
}
112
112
</pre>
113
113
114
- Note that using the [[#the-popover-attribute|Popover API]]
114
+ Note that using the [[HTML #the-popover-attribute|Popover API]]
115
115
will automatically set 'position' and create the anchoring relationship
116
116
without setting 'anchor-name' or 'position-anchor' value
117
117
(by defining an [=implicit anchor=] ),
@@ -173,7 +173,7 @@ Animation Type: discrete
173
173
174
174
The 'anchor-name' property declares
175
175
that an element is an <dfn>anchor element</dfn> ,
176
- whose [=principal box=] is an <dfn local-lt =anchor>anchor box</dfn> ,
176
+ whose [=principal box=] is an [ =anchor box=] ,
177
177
and gives it a list of <dfn lt="anchor name">anchor names</dfn> to be targeted by.
178
178
Values are defined as follows:
179
179
@@ -236,20 +236,37 @@ The [=implicit anchor element=] of a [=pseudo-element=]
236
236
is its [=originating element=] ,
237
237
unless otherwise specified.
238
238
239
- ### The Anchor's Position ### {#determining-position}
239
+ ### The Anchor Box ### {#anchor-position-size}
240
+
241
+ Several features of this specification refer to the position and size of an <dfn local-lt=anchor>anchor box</dfn> .
242
+ Unless otherwise specified,
243
+ this refers to the [=border box=] edge of the [=principal box=] of the [=anchor element=] .
244
+ The [=anchor box=] 's position and size is determined after layout.
245
+
246
+ This position and size includes 'zoom' and 'position' -based adjustments
247
+ (such as ''position: relative'' or ''position: sticky'' )
248
+ as well as transforms (such as 'transform' or 'offset-path' ).
249
+ In these cases, the axis-aligned bounding rectangle of the [=anchor box=]
250
+ in the coordinate space of the [=absolutely positioned=] element's [=containing block=]
251
+ is used instead.
252
+ Transforms are often optimized onto a different thread,
253
+ so transform-based updates to an [=anchor box’s=] position
254
+ may be delayed by a few frames.
255
+ Authors can avoid this delay by using absolute or relative positioning instead where practical.
256
+
257
+ If the [=anchor box=] is [=fragmented=] ,
258
+ and the [=containing block=] of the [=absolutely positioned=] box
259
+ referring to that [=anchor box=] is outside the relevant [=fragmentation context=] ,
260
+ the axis-aligned bounding rectangle of its [=box fragments=] is used instead.
261
+ (If the [=absolutely positioned=] box is inside the [=fragmentation context=] ,
262
+ it sees the [=anchor box=] as unfragmented--
263
+ and can be itself fragmented by the [=fragmentation context=] .)
240
264
241
- Several features of this specification refer to the position and size of an [=anchor box=] .
242
- The [=anchor box=] 's position and size is determined after layout,
243
- and for these purposes
244
- includes 'position' -based adjustments
245
- (such as ''position: relative'' or ''position: sticky'' ).
246
-
247
- Post-layout effects, such as 'transform' ,
265
+ For performance reasons,
266
+ scrolling is handled specially, see [[#scroll]] .
267
+ Other post-layout effects, such as filters,
248
268
do not affect the [=anchor box's=] position.
249
269
250
- Note: Allowing an anchor to opt into including the effects of 'transform'
251
- or similar properties
252
- might be allowed in the future.
253
270
254
271
<!-- Big Text: a-scope
255
272
@@ -882,12 +899,8 @@ resolves at [=computed value=] time
882
899
to the <<length>> that would align the edge
883
900
of the positioned boxes' [=inset-modified containing block=]
884
901
corresponding to the property the function appears in
885
- with the specified border edge of the [=target anchor element=] ,
886
- assuming that all [=scroll containers=]
887
- between the [=target anchor element=]
888
- and the positioned box's [=containing block=]
889
- are scrolled to their [=remembered scroll offsets=]
890
- (but see [[#scroll]] ).
902
+ with the specified edge
903
+ of the [=target anchor element's=] [=anchor box=] .
891
904
892
905
Note: This means that [=transitions=] or [=animations=]
893
906
of a property using an [=anchor function=]
@@ -897,10 +910,6 @@ the [=anchor box=] moving,
897
910
the 'anchor-name' property being changed on anchors,
898
911
etc.
899
912
900
- If the [=target anchor element=] is [=fragmented=] ,
901
- the axis-aligned bounding rectangle
902
- of the [=box fragment|fragments=] ' [=border boxes=] is used instead.
903
-
904
913
<div class=example>
905
914
For example,
906
915
in ''.bar { inset-block-start: anchor(--foo block-start); }'' ,
@@ -1509,10 +1518,10 @@ is equivalent to ''width: anchor-size(width)''.)
1509
1518
An ''anchor-size()'' function representing a [=resolvable anchor-size function=]
1510
1519
resolves at [=computed value=] time
1511
1520
(via [=style & layout interleaving=] )
1512
- to the <<length>> separating the relevant border edges
1521
+ to the <<length>> separating the relevant edges
1513
1522
(either left and right, or top and bottom,
1514
1523
whichever is in the specified axis)
1515
- of the [=target anchor element=] .
1524
+ of the [=target anchor element's=] [=anchor box =] .
1516
1525
1517
1526
1518
1527
<h4 id=anchor-size-resolution oldids=anchor-size-valid>
@@ -2391,7 +2400,7 @@ both existing and upcoming,
2391
2400
allow establishing such connections explicitly,
2392
2401
so that non-visual user agents can also benefit.
2393
2402
2394
- For example, the [[#the-popover-attribute|Popover API in HTML]]
2403
+ For example, the [[HTML #the-popover-attribute|Popover API in HTML]]
2395
2404
automatically links the invoker button
2396
2405
to the popover element,
2397
2406
including automatically adjusting tabbing order;
0 commit comments