[css-anchor-position][css-align] Ability to center on chosen item

[fantasai]

One alignment option that we don't have, but is often used for popups, is centering the popup on the selected item. To make this work we'd need some way of changing the item's alignment subject to be a descendant element.

This is basically the same problem as sourcing the alignment baseline from a particular item rather than the first/last box, so we should look into solving these together. See #13080 and #1339

[tabatkins]

Sorry, but can you explain what about this isn't solved by just making the desired item the default anchor, and then using anchor-center?

[kizu]

Sorry, but can you explain what about this isn't solved by just making the desired item the default anchor, and then using anchor-center?

If I understand correctly, wouldn't the issue be that the desired item is the descendant of our positioned element, so it wouldn't be an acceptable anchor?

The use case is not positioning something near the selected item, but positioning a popover with multiple elements inside such that the selected item inside aligns with the anchor outside.

[tabatkins]

Ohhhh, I understand now. This could've used a concrete example. ^_^ Saying "centering the popup on the selected item" misled me; what was meant was centering the popup using a selected element (inside the popup)

Given the mention of "selected item", I presume the use-case in mind is the Apple/WebKit behavior of making a select popup center the currently-selected option over the opener element.

I could also see this for popups with indicators on their edge (speech bubble tails, etc), so you can center the indicator on the anchor.

I agree with Elika, then, that we should solve this the same way as in #1339. Hmm, maybe:

align/justify-defer: none | baseline || self;
align/justify-donate: none | baseline || self;

• "baseline" affects baseline alignment, "self" affects all the self-alignment keywords (including anchor-center).
• *-defer goes on the container, *-donate goes on the descendant.
• An element with a non-none *-donate attempts to donate its specified alignments to the nearest ancestor element with a compatible *-defer; if multiple elements try to donate the same alignment to the same element, first in tree order wins (or last, whatever).
• (maybe) A container only specifying one of the *-defer values is only a container for that kind of donation; if a descendant is donating a different kind of alignment, it skips past to try to find a receptive ancestor higher up. (This is probably a little more consistent with a container being able to defer just one of its axises.)

So the select example would be:

select::picker(select) {
  position: absolute;
  position-anchor: auto;
  /* ^^^ these two are already in the UA stylesheet, I think */
  align-self: anchor-center;
  align-defer: self;
}
select:open option:checked {
  align-donate: self;
}

[emilio]

This is a bit weird because you still need to allow for scrolling etc. So you really want this as a one-time operation, which is rather odd...

[tabatkins]

Anchoring already has a lot of special-case behavior (including "measure once and reuse") around scrolling, so that might be okay.

[bfgeek]

I'd need to think about it more but there might be an issue with doing something like this in the inline-dimension as we don't run layout to resolve all the margins/insets (might be fine, but need to stare at the data-flow).