[css-sizing-4] The priority of different minimum and maximum sizes

cathiechen commented 2 years ago

Now, we have different kinds of minimum/maximum sizes:

Per [1], the "Definite minimum/maximum sizes" has higher priority than the "Automatic Content-based Minimum Sizes".
```
<!DOCTYPE html>
<style>
#target {
    background: green;
    height: 100px;
    aspect-ratio: 1 / 1;
    max-width: 30px;
}
</style>
<div id="target">
<div style="width:200px;"></div>
</div>
```
The definite maximum width is 30px, the Automatic Content-based Minimum width is 200px, so the calculated width of target should be 30px, IIUC. Tested in Chromium, WebKit and Gecko, the calculated width of target is 200px. I think we need a test for it if we have an agreement here.
Per [2], the "Definite minimum/maximum sizes" has higher priority than the "Transferred Min/Max Sizes".

<!DOCTYPE html>
<style>
    #target {
        background: green;
        height: 100px;
        aspect-ratio: 1 / 1;
        max-height: 50px;
        max-width: 30px;
    }
</style>

<div id="target"></div>

The "Definite maximum width" is 30px, the "Transferred Max width" is 50px, so the width of target should be 30px. WebKit is 50px, Chromium and Gecko is 30px. Need a WPT test for it here.

It seems we have not defined the priority of "Transferred Min/Max Sizes" and "Automatic Content-based Minimum Sizes" explicitly.


<!DOCTYPE html>
<style>
#target {
    background: green;
    height: 100px;
    aspect-ratio: 1 / 1;
    max-height: 30px;
}
</style>


The "Transferred Max width" is 30px, and the "Automatic Content-based Minimum width" is 200px.
The behavior of the engines are consistent, all are 200px.
I do not have a strong opinion here, if the agreement is 200px, need a WPT test for it.

[1] https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum
[2] https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers

cathiechen commented 2 years ago

cc @BorisChiou @davidsgrogan @rwlbuis

davidsgrogan commented 2 years ago

Explicit min-size beats automatic min-size, ~~but auto min-size beats explicit max-size, which is why all engines say 200px~~. I think min beating max comes all the way from CSS2, due to the ordering of steps 2 and 3 in https://drafts.csswg.org/css2/#min-max-widths. Maybe something in css-sizing-3 reorganizes or restates that, but I didn't see it at a quick glance.
Agree, should be 30px
~~I think it's 200px because of the same reason from 1: mins beat maxes always, no matter where the mins or maxes ultimately came from~~

Edited to scratch out parts I now think are wrong.

cathiechen commented 2 years ago

Hi Dave, Thanks for the swift reply!

Explicit min-size beats automatic min-size, but auto min-size beats explicit max-size, which is why all engines say 200px. I think min beating max comes all the way from CSS2, due to the ordering of steps 2 and 3 in https://drafts.csswg.org/css2/#min-max-widths. Maybe something in css-sizing-3 reorganizes or restates that, but I didn't see it at a quick glance.

Thanks! Now I understand it:)

In https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum, it says:

In order to avoid unintentional overflow, the automatic minimum size in the ratio-dependent axis of a box with a preferred aspect ratio that is neither a replaced element nor a scroll container is its min-content size capped by its maximum size.

For the case 1, if the min-content(200px) is capped by the maximum size(30px), so the auto min-size is 30px. Maybe we need to reword a little bit here?

davidsgrogan commented 2 years ago

No, I think my first comment was wrong. You're right, the spec calls for explicit max sizes to beat auto min sizes. It appears that Blink just doesn't do that. It sets the min-width to min-intrinsic and never again checks for an explicit max-width.

cathiechen commented 2 years ago

@davidsgrogan Thanks for the confirmation!

I think the priority order is clear to me now :

automatic minimum size (Need to be capped by the maximum size)
Transferred Min/Max Sizes (Affect the maximum size)
The definite minimum/maximum sizes (Beats Transferred Min/Max Sizes)

I think I can start to work on the WPT tests for these:)

Loirooriol commented 2 years ago

The automatic minimum size is clamped by maximums in grid and flex layout, so I think it should be the same in the aspect-ratio case (as the spec already says).

w3c / csswg-drafts

[css-sizing-4] The priority of different minimum and maximum sizes #7461