Skip to content

Commit

Permalink
[css-anchor-position-1] Change anchor(auto)/auto-same to outside/insi…
Browse files Browse the repository at this point in the history 
…de, remove auto fallback behaviors pending a rewrite.
  • Loading branch information
@tabatkins
tabatkins committed Dec 1, 2023
1 parent 4c1f9a8 commit ad678e9
Showing 1 changed file with 16 additions and 143 deletions.
159 changes: 16 additions & 143 deletions css-anchor-position-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ This can be done with the following CSS:
but automatically swap if this overflows the window
to the tooltip's top aligns to the anchor's bottom
instead. */
bottom: anchor(auto);
bottom: anchor(outside);

/* Set up a 300px-wide area, centered on the anchor.
If centering would put part of it off-screen,
Expand Down Expand Up @@ -160,8 +160,7 @@ a particular element is an <dfn>implicit anchor element</dfn>
for a given positioned element.

<p class=example>
For example, the HTML spec defines an <{html-global/anchor}> attribute
which allows an element to declare what element it is anchored to.
TODO fill in new popover-related details.
This makes the declared element the [=implicit anchor element=]
for the element with the attribute.

Expand Down Expand Up @@ -318,7 +317,7 @@ in ''anchor()'' and ''anchor-size()''.
@try {
// No <<anchor-element>> specified,
// so it takes from 'anchor-default'.
top: calc(.5em + anchor(auto));
top: calc(.5em + anchor(outside));
bottom: auto;
}
}
Expand Down Expand Up @@ -573,7 +572,7 @@ The ''anchor()'' function resolves to a <<length>>.
<pre class=prod>
&lt;anchor()> = anchor( <<anchor-element>>? <<anchor-side>>, <<length-percentage>>? )
<dfn><<anchor-element>></dfn> = <<dashed-ident>> | implicit
<dfn><<anchor-side>></dfn> = auto | auto-same
<dfn><<anchor-side>></dfn> = inside | outside
| top | left | right | bottom
| start | end | self-start | self-end
| <<percentage>> | center
Expand Down Expand Up @@ -606,13 +605,13 @@ The ''anchor()'' function has three arguments:
Its possible values are:

<dl dfn-type=value dfn-for="anchor()">
: <dfn>auto</dfn>
: <dfn>auto-same</dfn>
: <dfn>inside</dfn>
: <dfn>outside</dfn>
:: Resolves to one of the [=anchor element's=] sides,
depending on which [=inset property=] it's used in.
Also triggers automatic fallback behavior.

See [[#anchor-auto]] for more details.
''anchor()/inside'' refers to the same side as the [=inset property=]
(attaching the element to the "inside" of the anchor),
while ''anchor()/outside'' refers to the opposite.

: <dfn>top</dfn>
: <dfn>right</dfn>
Expand Down Expand Up @@ -734,111 +733,6 @@ as if by an additional ''translate()'' transform.
which input is being referred to.
</div>

<!--
███ ██ ██ ████████ ███████ ██████ ████ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██████
█████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ███████ ██ ███████ ██████ ████ ████████ ████████
-->

<h4 id=anchor-auto>
Automatic Anchor Positioning</h4>

The ''auto'' and ''auto-same'' <<anchor-side>> keywords
indicate the element wants to use
<dfn>automatic anchor positioning</dfn>
in that property's axis.
This has two effects:

* The ''anchor()'' function will automatically refer to
the expected side of the [=anchor element=]
(the same side as the [=inset property=] it's used in,
for ''auto-same'',
or the opposite side,
for ''auto'').

That is, ''top: anchor(auto);'' is equivalent to ''top: anchor(bottom);'',
while ''left: anchor(auto-same);'' is equivalent to ''left: anchor(left);'',
etc.
* If the element has ''position-fallback: none'',
and the opposite [=inset property=] is ''top/auto'',
it automatically gains a [=position fallback list=]
that will flip it to the opposite side of the [=anchor element=]
if necessary.
See [[#fallback-automatic]] for details.

<div class=example>
For example, to position and size an element
to exactly cover the target element:

<pre class=lang-css>
.cover {
inset: anchor(auto-same);
}
</pre>

is equivalent to

<pre class=lang-css>
.cover {
top: anchor(top);
right: anchor(right);
bottom: anchor(bottom);
left: anchor(left);
}
</pre>
</div>

<div class=example>
When the opposite axis is ''top/auto'',
the element automatically gains fallback behavior.
For example:

<pre class=lang-css>
.tooltip {
position: fixed;
anchor-default: --target;
top: auto; /* initial value */
bottom: calc(anchor(auto) + .3em);
}
</pre>

With the above code,
the tooltip will default to positioning its bottom edge
slightly away from the top edge of its anchor element,
hovering just above it;
but if that would make it overflow the top edge of the screen
(aka the top of its [=inset-modified containing block=],
which is the viewport in this case),
it will automatically flip to the opposite side,
as if you'd instead specified:

<pre class=lang-css>
.tooltip {
position: fixed;
position-fallback: --top-then-bottom;
anchor-default: --target;
}
@position-fallback --top-then-bottom {
@try {
top: auto;
bottom: calc(anchor(top) + .3em);
}
@try {
top: calc(anchor(bottom) + .3em);
bottom: auto;
}
}
</pre>

If both axises trigger this behavior,
it effectively gains four fallbacks,
trying each combination of specified and opposing anchors
to find one that won't trigger overflow.
</div>

<!--
███ ██████ ████████ ██ ██ ████████ ████████ ████████
Expand Down Expand Up @@ -1211,8 +1105,7 @@ Note: The most common types of fallback positioning
but flipping to the opposite side if needed)
can be done automatically,
without using ''@position-fallback'' at all,
by using ''anchor()/auto'' or ''anchor()/auto-side''
side values in the ''anchor()'' function.
by using TODO FILL ME IN WITH NEW DETAILS.

Applying Stronger Fallback Bounds: the 'position-fallback-bounds' property {#fallback-bounds}
--------------------------------------------------------------------------
Expand Down Expand Up @@ -1441,10 +1334,7 @@ This limit must be <em>at least</em> five.
Fallback and Automatic Positioning {#fallback-automatic}
----------------------------------

When an element uses an ''anchor()'' function
with an ''auto'' or ''auto-same'' <<anchor-side>> argument
in an [=inset property=],
and the opposite [=inset property=] is ''top/auto'',
When an element TODO FILL IN NEW DETAILS,
the element is said to be trying to use <dfn>automatic anchor fallbacks</dfn>
in that axis.

Expand All @@ -1455,31 +1345,19 @@ consisting of two entries:

* the first entry contains all the base-style properties on the element
that are valid to use in ''@try'' rules,
with ''anchor()/auto''/''auto-same'' keywords
with ''anchor()/inside''/''outside'' keywords
resolved to their appropriate side.
* one containing the same,
but with the [=inset properties=] in the affected axis swapped
(resolving the ''auto''/''auto-same'' keywords accordingly).
(resolving the ''inside''/''outside'' keywords accordingly).

If the element uses [=automatic anchor positioning=] in both axises,
If the element uses [=automatic anchor fallbacks=] in both axises,
it instead adds four entries to the [=position fallback list=]:
one specifying the base styles, as above,
then one reversing just the block axis,
followed by one reversing just the inline axis,
followed by one reversing both axises at once.

Note: If the element has a non-none 'position-fallback',
these automatic fallbacks aren't generated.
Since the [=position fallback list=] styles
override the "base" styles immediately,
this will <em>usually</em> mean you wouldn't see a "base" ''anchor(auto)''
show up in the final styles at all,
but if that does happen
(it's specified in a property
that isn't overridden by anything in the [=position fallback list=]),
the only effect of the ''anchor()/auto''/''auto-same''
is to resolve to the appropriate side keyword.

[=Automatic anchor fallback=] can also be used as a shorthand
in ''@try'' blocks.

Expand All @@ -1492,18 +1370,13 @@ then that entry of the [=position fallback list=]
must instead be treated as 2 or 4 consecutive entries,
generated as above.

(Otherwise, the ''auto'' or ''auto-same'' keywords
just resolve to the appropriate side,
with no additional effects.)

<div class=example>
For example, the following ''@position-fallback'' rule:

<pre class=lang-css>
@position-fallback --compact {
@try {
top: anchor(auto);
bottom: auto;
TODO FILL IN
}
}
</pre>
Expand Down Expand Up @@ -1556,7 +1429,7 @@ represents the name declared by the at-rule itself.



The CSSTryRule interface {#position-fallback-rule}
The CSSTryRule interface {#position-try-rule}
-------------------------------------

The {{CSSTryRule}} interface represents a ''@try'' block
Expand Down

0 comments on commit ad678e9

Please sign in to comment.