8000 [css-anchor-position-1] Define how transforms and fragmentation affec… · w3c/csswg-drafts@16f14cb · GitHub 10000
[go: up one dir, main page]

Skip to content

Commit 16f14cb

Browse files
committed
[css-anchor-position-1] Define how transforms and fragmentation affect the anchor box. Move some concepts around for better organization. #8584 #12287
1 parent dc906f3 commit 16f14cb

File tree

1 file changed

+35
-26
lines changed

1 file changed

+35
-26
lines changed

css-anchor-position-1/Overview.bs

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ to find the “best” one that avoids overlap/overflow.
111111
}
112112
</pre>
113113

114-
Note that using the [[#the-popover-attribute|Popover API]]
114+
Note that using the [[HTML#the-popover-attribute|Popover API]]
115115
will automatically set 'position' and create the anchoring relationship
116116
without setting 'anchor-name' or 'position-anchor' value
117117
(by defining an [=implicit anchor=]),
@@ -173,7 +173,7 @@ Animation Type: discrete
173173

174174
The 'anchor-name' property declares
175175
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=],
177177
and gives it a list of <dfn lt="anchor name">anchor names</dfn> to be targeted by.
178178
Values are defined as follows:
179179

@@ -236,20 +236,37 @@ The [=implicit anchor element=] of a [=pseudo-element=]
236236
is its [=originating element=],
237237
unless otherwise specified.
238238

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=].)
240264

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,
248268
do not affect the [=anchor box's=] position.
249269

250-
Note: Allowing an anchor to opt into including the effects of 'transform'
251-
or similar properties
252-
might be allowed in the future.
253270

254271
<!-- Big Text: a-scope
255272

@@ -882,12 +899,8 @@ resolves at [=computed value=] time
882899
to the <<length>> that would align the edge
883900
of the positioned boxes' [=inset-modified containing block=]
884901
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=].
891904

892905
Note: This means that [=transitions=] or [=animations=]
893906
of a property using an [=anchor function=]
@@ -897,10 +910,6 @@ the [=anchor box=] moving,
897910
the 'anchor-name' property being changed on anchors,
898911
etc.
899912

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-
904913
<div class=example>
905914
For example,
906915
in ''.bar { inset-block-start: anchor(--foo block-start); }'',
@@ -1509,10 +1518,10 @@ is equivalent to ''width: anchor-size(width)''.)
15091518
An ''anchor-size()'' function representing a [=resolvable anchor-size function=]
15101519
resolves at [=computed value=] time
15111520
(via [=style & layout interleaving=])
1512-
to the <<length>> separating the relevant border edges
1521+
to the <<length>> separating the relevant edges
15131522
(either left and right, or top and bottom,
15141523
whichever is in the specified axis)
1515-
of the [=target anchor element=].
1524+
of the [=target anchor element's=] [=anchor box=].
15161525

15171526

15181527
<h4 id=anchor-size-resolution oldids=anchor-size-valid>
@@ -2391,7 +2400,7 @@ both existing and upcoming,
23912400
allow establishing such connections explicitly,
23922401
so that non-visual user agents can also benefit.
23932402

2394-
For example, the [[#the-popover-attribute|Popover API in HTML]]
2403+
For example, the [[HTML#the-popover-attribute|Popover API in HTML]]
23952404
automatically links the invoker button
23962405
to the popover element,
23972406
including automatically adjusting tabbing order;

0 commit comments

Comments
 (0)
0