Skip to content

Chromium partially supports {align,justify,place}-self with absolute positioning - #29342

Open
captainbrosset wants to merge 7 commits into
mdn:mainfrom
captainbrosset:place-self-abspos
Open

Chromium partially supports {align,justify,place}-self with absolute positioning#29342
captainbrosset wants to merge 7 commits into
mdn:mainfrom
captainbrosset:place-self-abspos

Conversation

@captainbrosset

@captainbrosset captainbrosset commented Mar 25, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds partial implementation flags and notes for align-self, justify-self, and place-self for 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 inset value.

Test results and supporting details

Test case: https://bug2026174.bmoattachments.org/attachment.cgi?id=9557965

image

The red box should be centered in the gray box.

Code:

<!DOCTYPE html>
<style>
  .parent { position: absolute; inset: 20vmin; background: gray; }
  .child { position: absolute; width: 50%; aspect-ratio: 1; background: red; justify-self: center; }
</style>
<div class="parent">
  <div class="child"></div>
</div>

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

@github-actions github-actions Bot added data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS size:m [PR only] 25-100 LoC changed labels Mar 25, 2026
@github-actions

github-actions Bot commented Mar 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Tip: Review these changes grouped by change (recommended for most PRs), or grouped by feature (for large PRs).

ddbeck
ddbeck requested changes Mar 27, 2026
View reviewed changes

@ddbeck ddbeck left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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? 🤔

Comment thread css/properties/align-self.json Outdated
@captainbrosset

captainbrosset commented Mar 30, 2026

Copy link
Copy Markdown
Contributor Author

@fantasai is this something you can help us on?

@caugner

This comment was marked as outdated.

Sign in to view
caugner and others added 2 commits May 22, 2026 13:23
@caugner

caugner commented May 22, 2026 •
edited
Loading

Copy link
Copy Markdown
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 caugner changed the title Add partial implementation notes for align-self, justify-self, and place-self properties on absolute positioned elements Chromium partially supports {align,justify,place}-self with absolute positioning May 22, 2026
ddbeck
ddbeck requested changes May 26, 2026
View reviewed changes
Comment thread css/properties/align-self.json Outdated
captainbrosset
captainbrosset commented May 26, 2026
View reviewed changes
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/align-self.json Outdated
Comment thread css/properties/justify-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/place-self.json Outdated
Comment thread css/properties/justify-self.json Outdated
@captainbrosset
Apply suggestions from code review
7a46c64 
Co-authored-by: Patrick Brosset <patrickbrosset@gmail.com>
@captainbrosset
captainbrosset requested a review from ddbeck May 26, 2026 09:41
yisibl
yisibl reviewed Jun 4, 2026
View reviewed changes
Comment thread css/properties/align-self.json
"version_added": "122"
"version_added": "122",
"partial_implementation": true,
"notes": "`align-self` only applies to absolutely positioned boxes when both insets on the appropriate axis are 0, for example `top` and `bottom`. See [bug 376097648](https://crbug.com/376097648)"

@yisibl yisibl Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it’s important to clarify that this bug only occurs when the parent element is a block; there are no issues with flex or grid.

yisibl
yisibl reviewed Jun 4, 2026
View reviewed changes
Comment thread css/properties/justify-self.json
"version_added": "122"
"version_added": "122",
"partial_implementation": true,
"notes": "`justify-self` only applies to absolutely positioned boxes when both insets on the appropriate axis are 0, for example `left` and `right`. See [bug 376097648](https://crbug.com/376097648)"

@yisibl yisibl Jun 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This appears to have been fixed in this CL (Chrome 137); please verify it again.
https://chromiumdash.appspot.com/commit/a82a54d387f4bc1c3c1c08eeda15e86a7ef4f792

@Elchi3

Elchi3 commented Aug 6, 2026

Copy link
Copy Markdown
Member

@captainbrosset Do you plan to come back to this PR? How can we unblock it?

@captainbrosset

captainbrosset commented Aug 12, 2026

Copy link
Copy Markdown
Contributor Author

@captainbrosset Do you plan to come back to this PR? How can we unblock it?

My head is not in this space anymore. I'd need to page a bunch of stuff back into memory to get back to this. So, unblocking it is really just about me finding the time to do so. Unless someone else wants to take over.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ddbeck ddbeck Awaiting requested review from ddbeck
1 more reviewer
@yisibl yisibl yisibl left review comments
Reviewers whose approvals may not affect merge requirements

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS size:m [PR only] 25-100 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@captainbrosset @caugner @Elchi3 @ddbeck @yisibl