Skip to content

[css-align] normal self-alignment for abspos tables should behave as start #11285

Closed
@Loirooriol

Description

@Loirooriol

https://drafts.csswg.org/css-align/#justify-abspos, https://drafts.csswg.org/css-align/#align-abspos

For all other absolutely-positioned boxes, normal behaves as stretch.

That's not the case in Blink, normal behaves as start for abspos tables, and that makes sense to me.

<!DOCTYPE html>
<style>
div { display: inline-block; position: relative; border: solid; width: 100px; height: 100px; }
table { position: absolute; inset: 0; background: cyan; }
</style>
<div><table style="place-self: normal"><td>table</td></table></div>
<div><table style="place-self: stretch"><td>table</td></table></div>

There are tests for Blink's behavior:

This is consistent with the interoperable flexbox behavior
<!DOCTYPE html>
<style>
div { display: inline-flex; border: solid; width: 100px; height: 100px; }
table { background: cyan; }
</style>
<div><table style="align-self: normal"><td>table</td></table></div>
<div><table style="align-self: stretch"><td>table</td></table></div>

Blink also uses justify-self: normal to explain the table shrink-to-fit size in block layout
<!DOCTYPE html>
<style>
div { display: inline-block; border: solid; width: 100px; height: 100px; }
table { background: cyan; }
</style>
<div><table style="justify-self: normal"><td>table</td></table></div>
<div><table style="justify-self: stretch"><td>table</td></table></div>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions