Description
Issue #8171 there is a proposal to introduce a way of querying the applied position-try-fallback for anchored elements.
Proposal
Introduce a new anchored container-type which establishes an element as a container for querying an anchored element features such as which position-try-fallback is used. An anchored() function is added to @container which can be used for queries to style descendant elements of the anchored element.
The anchored container-type can be combined with existing container-types. For instance: container-type: inline-size anchored.
Containment
Size containment
Anchored queries should not rely on the size of the anchored element in any other ways than anchor positioning and fallback already does through intrinsic sizing. There should be no need to impose size containment for anchored containers.
Layout containment
Anchored element queries typically rely on layout, similar to size container queries. The specification (ED) for size containers says that size containers establish an independent formatting context. However, since all anchored elements are absolute positioned, they are already independent formatting contexts.
Style containment
An in-flow anchor element may appear after its anchored element in the tree order, which means counter changes in the anchored element may affect the layout of the anchor element, which may in turn affect the positioning of the anchored element. Hence, we have a cycle which can be solved my imposing style containment for container-type:anchored.
Here is a demo that would have given unstable rendering in the Chrome prototype if the anchored containers were not style contained:
<!DOCTYPE html>
<style>
#container {
position: relative;
width: 220px;
height: 100px;
}
#anchor {
anchor-name: --a;
width: fit-content;
height: 100px;
background: teal;
}
#anchor::before {
font-size: 50px;
content: counter(c);
}
#anchored {
contain: style;
container-type: anchored;
counter-reset: c 0;
position: absolute;
position-anchor: --a;
position-try-fallbacks: flip-inline;
right: anchor(left);
top: anchor(top);
width: 100px;
height: 100px;
background: yellow;
}
@container anchored(fallback: flip-inline) {
div {
counter-increment: c 999999999;
}
}
</style>
<div id="container">
<div id="anchored">
<div></div>
</div>
<div id="anchor"></div>
</div>