Chromium partially supports {align,justify,place}-self with absolute positioning#29342
Open
captainbrosset wants to merge 4 commits into
Open
Chromium partially supports {align,justify,place}-self with absolute positioning#29342captainbrosset wants to merge 4 commits into
{align,justify,place}-self with absolute positioning#29342captainbrosset wants to merge 4 commits into
Conversation
…ace-self properties
github-actions
Bot
added
data:css
Contributor
|
Tip: Review these changes grouped by change (recommended for most PRs), or grouped by feature (for large PRs). |
ddbeck
requested changes
Mar 27, 2026
Contributor
ddbeck
left a comment
ddbeck
left a comment
There was a problem hiding this comment.
This is a weird case when it comes to partial_implementation. Our guidelines don't require us to set it. But there are multiple vendor bugs, so maybe it's still partial anyway.
I'm left wondering: if everyone agrees this is buggy behavior, why did everyone implement it the same way? 🤔
Contributor
Author
|
@fantasai is this something you can help us on? |
This comment was marked as outdated.
This comment was marked as outdated.
Co-authored-by: Daniel D. Beck <daniel@ddbeck.com>
Contributor
|
I have applied Daniel's suggestion now, which makes sense to me. @captainbrosset Should we go ahead and merge, even if we haven't heard back from @fantasai? Edit: I realize I had a typo in my previous message. |
caugner
changed the title
{align,justify,place}-self with absolute positioning
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds partial implementation flags and notes for
align-self,justify-self, andplace-selffor all browsers, when they apply to absolutely positioned elements.I tested this in Safari, Firefox, and Chrome, and discussed with Mozilla engineers @dshin-moz and @emilio.
My understanding is that there's a missing piece in all browsers where you can't just apply the above properties and expect them to work on their own. They also require a non-auto
insetvalue.Test results and supporting details
Test case: https://bug2026174.bmoattachments.org/attachment.cgi?id=9557965
The red box should be centered in the gray box.
Code:
Adding
inset:0;on the child element makes it work.I'm not entirely sure I'm reading the spec correctly though, and the placement of auto-inset abspos elements may actually be correct. But, WPT seems to show browser differences in this area at least: https://wpt.fyi/results/css/css-align/abspos/align-self-static-position-001.html?label=experimental&label=master&aligned
Related issues