Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Loirooriol opened this issue Nov 27, 2024 · 1 comment
Closed

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

Loirooriol opened this issue Nov 27, 2024 · 1 comment
Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

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>
@Loirooriol Loirooriol added the css-align-3 Current Work label Nov 27, 2024
@Loirooriol Loirooriol mentioned this issue Dec 22, 2024
Open
@fantasai
Copy link
Collaborator

@Loirooriol I believe this is fixed by 2a82852 lmk if not.

@Loirooriol Loirooriol added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Mar 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @Loirooriol