[csswg-drafts] [css-align] Browser don't prioritize auto margins over stretch self-alignment for abspos (#11229)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align] Browser don't prioritize auto margins over stretch self-alignment for abspos ==
https://drafts.csswg.org/css-align/#justify-abspos

> - For replaced absolutely-positioned boxes, the [normal](https://drafts.csswg.org/css-align/#valdef-justify-self-normal) keyword behaves as [start](https://drafts.csswg.org/css-align/#valdef-self-position-start).
> 
> -  For all other absolutely-positioned boxes, [normal](https://drafts.csswg.org/css-align/#valdef-justify-self-normal) behaves as stretch. Additionally, if neither inset in this axis is [auto](https://drafts.csswg.org/css-position-3/#valdef-top-auto), but [width](https://drafts.csswg.org/css-sizing-3/#propdef-width) ([height](https://drafts.csswg.org/css-sizing-3/#propdef-height), for [vertical writing modes](https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode)) is [auto](https://drafts.csswg.org/css-sizing-3/#valdef-width-auto), auto margins are treated as zero.
> 
>     **(In non-[normal](https://drafts.csswg.org/css-align/#valdef-justify-self-normal) cases, auto margins are prioritized over the [self-alignment properties](https://drafts.csswg.org/css-align/#self-alignment-properties), as usual.)**

No browser is doing this:


```html
<!DOCTYPE html>
<style>
.wrapper { position: relative; width: 50px; height: 50px; border: 3px solid; }
.abspos { position: absolute; inset: 0; width: auto; height: auto; background: cyan; margin: auto }
.abspos::before { content: ""; display: block; width: 25px; height: 25px; }
</style>
<div class="wrapper"><div class="abspos" style="place-self: auto"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: normal"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: stretch"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: start"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: center"></div></div>
<div class="wrapper"><div class="abspos" style="place-self: end"></div></div>
```

| Spec | Blink | [Servo#34264](https://github.com/servo/servo/pull/34264) | FF nightly | WebKit |
| - | - | - | - | - |
| ![](https://github.com/user-attachments/assets/f4067b4c-471d-4c3d-9409-ac5b66f76166) | ![](https://github.com/user-attachments/assets/6f6ddffc-0bae-4f73-817c-f621023bc85a) | ![image](https://github.com/user-attachments/assets/404c9c8a-7b7a-4f66-b89f-ee703da3af82) | ![image](https://github.com/user-attachments/assets/d06b31aa-49ae-464f-bf34-df62c463e3e6) | ![image](https://github.com/user-attachments/assets/96919385-7320-40fa-8c5a-bc5a26d10a76) |

CC @dshin-moz

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11229 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 18 November 2024 12:10:12 UTC