Skip to content

Add partial implementation notes for align-self, justify-self, and place-self properties on absolute positioned elements#29342

Open
captainbrosset wants to merge 2 commits intomdn:mainfrom
captainbrosset:place-self-abspos
Open

Add partial implementation notes for align-self, justify-self, and place-self properties on absolute positioned elements#29342
captainbrosset wants to merge 2 commits intomdn:mainfrom
captainbrosset:place-self-abspos

Conversation

@captainbrosset
Copy link
Copy Markdown
Contributor

@captainbrosset captainbrosset commented Mar 25, 2026

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
Copy link
Copy Markdown
Contributor

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

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
Copy link
Copy Markdown
Contributor

@ddbeck ddbeck left a comment

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

css/properties/align-self.json
Comment on lines +517 to +519
"impl_url": "https://crbug.com/376097648",
"partial_implementation": true,
"notes": "Only works when the element has a non-auto inset."
Copy link
Copy Markdown
Contributor

@ddbeck ddbeck Mar 27, 2026

Choose a reason for hiding this comment

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

I think these need to be in the "bug" style rather than the implementation style, something like shown below.

But the more serious issue here is something like, "what does "work" mean?

It might be easier to explain if we invert the formulation, but I don't know what to fill in for the … here:

Suggested change
"impl_url": "https://crbug.com/376097648",
"partial_implementation": true,
"notes": "Only works when the element has a non-auto inset."
"partial_implementation": true,
"notes": "If `inset: auto` applies to the element, then … . See [bug 376097648](https://crbug.com/376097648)"

@captainbrosset
Copy link
Copy Markdown
Contributor Author

captainbrosset commented Mar 30, 2026

@fantasai is this something you can help us on?

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

Reviewers

@ddbeck ddbeck ddbeck requested changes

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.

2 participants

@captainbrosset @ddbeck