[css-anchor-position-1] Automatic alignment / justification

[xiaochengh]

In the Anchor Positioning Exploration proposal, the used position area implies the default alignment / justification. For example, if the center track is used, then the default alignment is anchor-center.

Now that we agreed to add inset-area to the spec (#9145 (comment)), it also seems useful to further adopt default alignment to the current spec.

Proposal

When the value of align-self / justify-self is normal, and the inset-area on the corresponding axis contains the center track, then normal behaves as anchor-center.

Note

The original proposal also sets default alignment for the start and end tracks, but I don't think they are still needed in the context of inset-area, because e.g. inset-area: start will be resolved into inset-something: anchor(start), which already automatically align the element with the start edge of the anchor; same for the end track.

[kizu]

One thing I want to note regarding the automatic alignment: it would be very nice to support the transitions for when the element switches tracks.

Details and videos (hiding as they take a lot of vertical space)

I'm currently playing with the proposed position-area, and in my latest experiment I implemented the alignment by nested elements and grid alignment. And while the inset properties have a proper transition, when the track change happens without a transition things do not look good:

Screen.Recording.2023-09-02.at.14.57.09.mov

In the above video we can see how the alignment change without a transition when the element's position changes from top / all to top / right, as at first it wants to be at the center of the anchor horizontally, but then to be at the left.

Basically, we'd want the alignment to be a part of the final inset-area value or something, so if we'd have a transition for it, it would work well with the change in track alignment as well.

edit: Managed to update the method I'm using for aligning so it is now transition-friendly (updated the codepen):

Screen.Recording.2023-09-02.at.15.36.08.mov

Using transition for the grid columns and rows from 0fr to 1fr. Maybe this can be something that is possible to express via anchor positioning and inset properties (using anchor-size etc), but it would be much more complicated for my experiment.