[csswg-drafts] [css-sizing] `stretch` should enforce a non-negative content size (#11076)

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

== [css-sizing] `stretch` should enforce a non-negative content size ==
```html
<!DOCTYPE html>
<div style="width: 0; height: 0">
  <div style="width: -moz-available; width: -webkit-fill-available; width: stretch;
              min-width: -moz-available; min-width: -webkit-fill-available; min-width: stretch;
              height: -moz-available; height: -webkit-fill-available; height: stretch;
              min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch;
              margin: 10px; border: 10px solid; padding: 10px"></div>
</div>
<script>
var el = document.querySelector("div > div");
document.body.prepend(el.clientWidth + " x " + el.clientHeight);
</script>
```

| Gecko | Blink | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/143aea01-47d4-4944-9500-a185aa87347d) | ![](https://github.com/user-attachments/assets/15afebda-fab8-4502-bf56-d59af8a98dae) | ![](https://github.com/user-attachments/assets/7ddd5206-c8a3-4caa-a807-ad2061405a4d) |

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)

This seems to imply a non-negative content size, but...

> Additionally, [...] a [stretch-fit size](https://drafts.csswg.org/css-sizing-3/#stretch-fit-size) causes the box to attempt to fill its containing block—​behaving as 100% **but applying the resulting size to its margin box** instead of the box indicated by [box-sizing](https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing)

This doesn't seem to imply a non-negative content size. We might guess so because `box-sizing: border-box` avoids negative content sizes, but it's not stated.

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


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

Received on Tuesday, 22 October 2024 20:12:00 UTC