Skip to content

[css-position-3][css-align-3] Handling center alignment for abspos boxes with auto/normal self-alignment and center item alignment in parent #12542

@sammygill

Description

@sammygill
<div style="position: relative;">
    <div style="display: grid; align-items: center; width: 22px; height: 30px; border: 1px solid blue;">
        <div style="position: absolute; background-color: green; width: 8px; height: 6px;"></div>
    </div>
</div>

In the above example, Gecko and Blink both center align the box vertically within the grid's content box, which seems reasonable to me. However, I was trying to find some spec text which explains how this exactly occurs to rationalize it but was struggling to find something. According to my current reading, what it looks like should be occurring is something along the lines of:

1.) Compute the insets for the containing block with the rules for center alignment described in https://www.w3.org/TR/css-position-3/#resolving-insets. I believe this just ends up being 0 for both inset values.

Note: We refer to the parent's align-items value because of https://drafts.csswg.org/css-align-3/#align-self-property

2.) After sizing the box, we need to align it within its alignment container. Again referring to https://drafts.csswg.org/css-align-3/#align-self-property since we are computing the actual position of the box, this should behave as normal. However, https://drafts.csswg.org/css-align-3/#align-abspos seems to state that the normal behavior should either be start or stretch for the box (start in this case, I think).

I assume the intention is for the box to be center aligned, but it seems to be a bit at odds with the current state of the spec. Should the normal behavior of an abspos box be adjusted in this case to take this into consideration? Or perhaps are Gecko and Blink referring to a different part of the spec that results in this rendering?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Thursday Breakout (2:30pm?)

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions