[csswg-drafts] [css-align] `normal` self-alignment for abspos tables should behave as `start` (#11285)

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

== [css-align] `normal` self-alignment for abspos tables should behave as `start` ==
https://drafts.csswg.org/css-align/#justify-abspos, https://drafts.csswg.org/css-align/#align-abspos

> For all other absolutely-positioned boxes, [normal](https://drafts.csswg.org/css-align/#valdef-justify-self-normal) behaves as stretch.

That's not the case in Blink, `normal` behaves as `start` for abspos tables, and that makes sense to me.

```html
<!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>
```

![](https://github.com/user-attachments/assets/678b9259-4d74-40fe-8146-cdbaec058c4b)

There are tests for Blink's behavior:
 - https://wpt.fyi/results/css/css-align/abspos/table-justify-self-stretch.html
 - https://wpt.fyi/results/css/css-align/abspos/table-align-self-stretch.html

<details><summary>This is consistent with the interoperable flexbox behavior</summary>

```html
<!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>
```

![](https://github.com/user-attachments/assets/403b9cc1-1f6c-4e5f-baf4-8501e54442ed)

</details>

<details><summary>Blink also uses <code>justify-self: normal</code> to explain the table shrink-to-fit size in block layout</summary>

```html
<!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>
```

![](https://github.com/user-attachments/assets/5285fc8f-7539-422a-af9c-d51f59c4668b)

</details>





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


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

Received on Wednesday, 27 November 2024 21:20:14 UTC