[csswg-drafts] [css-align][css-sizing] Should `place-self: stretch` and `width: stretch` result in different size for abspos? (#11293)

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

== [css-align][css-sizing] Should `place-self: stretch` and `width: stretch` result in different size for abspos? ==
```html
<!DOCTYPE html>
<style>
article { display: inline-block; border: solid; width: 50px; height: 50px; position: relative }
article > * { background: cyan; display: block; position: absolute; top: 10px; left: 10px; }
article > *::before { content: ""; display: block; width: 20px; height: 20px }
.stretch-legacy { width: -webkit-fill-available; width: -moz-available; height: -webkit-fill-available; height: -moz-available }
</style>
<article><canvas width="20" height="20" style="place-self: start"></canvas></article>
<article><canvas width="20" height="20" style="place-self: stretch"></canvas></article>
<article><canvas width="20" height="20" style="place-self: end"></canvas></article>
<article><canvas width="20" height="20" style="width: stretch; height: stretch"></canvas></article>
<article><canvas width="20" height="20" class="stretch-legacy"></canvas></article>
<br>
<article><div style="place-self: start"></div></article>
<article><div style="place-self: stretch"></div></article>
<article><div style="place-self: end"></div></article>
<article><div style="width: stretch; height: stretch"></div></article>
<article><div class="stretch-legacy"></div></article>
```

| | |
| - | - |
| Blink | ![](https://github.com/user-attachments/assets/26220d29-33e9-4517-912a-3bc87bd23117) |
| WebKit | ![](https://github.com/user-attachments/assets/bf8654e7-66d8-4158-8f9b-67465ccea84a) |
| Gecko | ![](https://github.com/user-attachments/assets/ef4c1204-af36-4801-b4b0-023fcc5f0158) |

All browsers exhibit some differences between a `stretch` self-alignment vs a stretch size (or vendor-prefixed equivalent).

But the spec implies otherwise: https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing

> Formally, its behavior is the same as specifying an [automatic size](https://drafts.csswg.org/css-sizing-3/#automatic-size) together with a [self-alignment property](https://drafts.csswg.org/css-align-3/#self-alignment-properties) value of [stretch](https://drafts.csswg.org/css-sizing-4/#valdef-width-stretch) (in the relevant axis), except that the resulting box, which can end up not exactly fitting its [alignment container](https://drafts.csswg.org/css-align-3/#alignment-container), can be subsequently aligned by its actual self-alignment property value.

I plan to implement the spec in Servo, it's easier to have a single stretch behavior rather than doing different things depending on the property.

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


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

Received on Thursday, 28 November 2024 20:27:38 UTC