Re: [csswg-drafts] [css-sizing] Has #4951 been amended by a later resolution? (#11093)

So to be specific, https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-ratio says

> - [`<ratio>`](https://drafts.csswg.org/css-values-4/#ratio-value)
>    The box’s [preferred aspect ratio](https://drafts.csswg.org/css-sizing-4/#preferred-aspect-ratio) is the specified ratio of width / height. Size calculations involving the aspect ratio work with the dimensions of the box specified by [box-sizing](https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing).

The tests have the default `min-width: auto` that behaves as 0, which is floored to `80px` to avoid a negative content width, then this is transferred to a min border-box height of `80px / (20/50) = 200px`. But the tests expects 100px instead.

Browsers are passing the tests for different reasons:

 - Gecko totally ignores `aspect-ratio: <ratio>` (treats it as `auto`) on replaced elements with `width: auto; height: auto`.
 - WebKit obeys `aspect-ratio: <ratio>`, but on replaced elements with `width: auto; height: auto` it applies the ratio to the content-box regardless of `box-sizing`, e.g.

    ```html
    <style>canvas { aspect-ratio: 10/25; background: green; padding-right: 40px; padding-bottom: 25px; box-sizing: border-box }</style>
    <canvas width="10" height="25" style="min-width: 40px; width: auto"></canvas>
    <canvas width="10" height="25" style="min-width: 40px; width: 0px"></canvas>
    ```
    ![imatge](https://github.com/user-attachments/assets/b578956e-7a47-419b-b93b-5f353ca33662)


 - Blink obeys `aspect-ratio: <ratio>` and respects `box-sizing`, but only when a min/max constraint is violated, e.g.

    ```html
    <style>canvas { aspect-ratio: 10/25; background: green; padding-right: 40px; padding-bottom: 25px; box-sizing: border-box; }</style>
    <canvas width="10" height="25" style="min-width: 50px"></canvas>
    <canvas width="10" height="25" style="min-width: 51px"></canvas>
    ```
    ![imatge](https://github.com/user-attachments/assets/2908f397-4095-4d46-a3ee-fbc44238a4ad)

Agenda+ to ratify the spec or align with some browser.

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


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

Received on Sunday, 27 October 2024 12:19:41 UTC