Skip to content

[css-anchor-position-1][editorial] Clarify validity of anchor-*() #11931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions css-anchor-position-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1251,8 +1251,7 @@ An ''anchor()'' function is a
<dfn lt="valid anchor function|invalid anchor function">valid anchor function</dfn>
only if all the following conditions are true:

* It's being used in an [=inset property=]
on an [=absolutely positioned box=].
* It's being used on an [=absolutely positioned box=].
* If its <<anchor-side>> specifies a physical keyword,
it's being used in an [=inset property=] in that axis.
(For example, ''anchor()/left'' can only be used in 'left', 'right',
Expand Down Expand Up @@ -1401,6 +1400,8 @@ Name: width, height, min-width, min-height, max-width, max-height, top, left, ri
New values: <<anchor-size()>>
</pre>

<div class=note>These are the [=accepted @position-try properties=] that allow lengths.</div>

<pre class=prod>
anchor-size() = anchor-size( [ <<anchor-name>> || <<anchor-size>> ]? , <<length-percentage>>? )
<dfn><<anchor-size>></dfn> = width | height | block | inline | self-block | self-inline
Expand Down Expand Up @@ -1452,9 +1453,7 @@ An ''anchor-size()'' function is a
<dfn lt="valid anchor-size function|invalid anchor-size function">valid anchor-size function</dfn>
only if all the following conditions are true:

* It's being used in a [=sizing property=], an [=inset property=], or a [=margin property=]
on an [=absolutely positioned box=].
<span class=note>(These are the [=accepted @position-try properties=] that allow lengths.)</span>
* It's being used on an [=absolutely positioned box=].
* There is a [=target anchor element=]
for the box it's used on,
and the <<anchor-name>> value specified in the function.
Expand Down