Re: [csswg-drafts] [css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties (#10969)

> Instead, the entire value is treated as the initial value, just like for preferred and max size properties.

Apparently browsers don't use the initial value, they just use 0px.  Except for WebKit on the inline axis of grid layout, which follows the spec and resolves the percentage against 0 :facepalm: 

```html
<!DOCTYPE html>
<style>
.grid { display: grid; position: relative; gap: 5px; margin: 5px; }
.grid.width {  width: 0px;  grid-template: 25px / minmax(auto, min-content); }
.grid.height { height: 0px; grid-template: minmax(auto, min-content) / 25px; margin-bottom: 60px }
.grid > div::before { content: ""; display: block; width: 50px; height: 50px; }
.grid::after { content: ""; position: absolute; grid-area: 1 / 1 / 2 / 2; inset: 0; outline: 5px solid magenta; }
</style>
min-width: auto             <div class="grid width "><div style="min-width:  auto            "></div></div>
min-width: 0px              <div class="grid width "><div style="min-width:  0px             "></div></div>
min-width: calc(100px + 0%) <div class="grid width "><div style="min-width:  calc(100px + 0%)"></div></div>
min-height: auto            <div class="grid height"><div style="min-height: auto            "></div></div>
min-height: 0px             <div class="grid height"><div style="min-height: 0px             "></div></div>
min-height: calc(100px + 0%)<div class="grid height"><div style="min-height: calc(100px + 0%)"></div></div>
```

| Gecko | Blink | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/b1eba506-ed32-436d-8830-46978605aba4) | ![](https://github.com/user-attachments/assets/2a8327f1-052a-4b18-81f6-ca6172dc68c1) | ![](https://github.com/user-attachments/assets/0a73b1c8-f91e-48e9-a56d-8a78cbf118d2) |

For flex I'm not sure if it can be tested in the inline axis (it would need to rely on the min/max-content size of the flex container, where nobody follows the spec). But for the block axis, browsers agree it's 0:

```html
<!DOCTYPE html>
<style>
.flex { display: flex; flex-direction: column; width: 100px; margin: 5px }
.flex > div { flex-basis: 0; border: solid magenta }
.flex > div::before { content: ""; display: block; width: 50px; height: 50px }
</style>
min-height: auto            <div class="flex"><div style="min-height: auto            "></div></div>
min-height: 0px             <div class="flex"><div style="min-height: 0px             "></div></div>
min-height: calc(100px + 0%)<div class="flex"><div style="min-height: calc(100px + 0%)"></div></div>
```

| Gecko | Blink | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/c7a0cf39-67e3-4e9d-a2b6-d98438bd119e) | ![](https://github.com/user-attachments/assets/1d88b62f-50bc-4af5-95ae-42e65434aee1) | ![image](https://github.com/user-attachments/assets/452c0665-89b6-4689-a389-32bc544c18e9) |



-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10969#issuecomment-2561237584 using your GitHub account


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

Received on Tuesday, 24 December 2024 15:34:42 UTC