Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cathiechen opened this issue Jul 6, 2022 · 6 comments
Open

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

cathiechen opened this issue Jul 6, 2022 · 6 comments
Assignees
@tabatkins @fantasai
Labels
css-sizing-4

Comments

@cathiechen
Copy link

cathiechen commented Jul 6, 2022 •
edited
Loading

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

  1. 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.

  1. 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.

  1. 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>

<div id="target">
    <div style="width:200px;"></div>
</div>

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
Copy link
Author

cc @BorisChiou @davidsgrogan @rwlbuis

@davidsgrogan
Copy link
Member

davidsgrogan commented Jul 6, 2022 •
edited
Loading

  1. 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.

  2. Agree, should be 30px

  3. 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
Copy link
Author

Hi Dave,
Thanks for the swift reply!

  1. 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
Copy link
Member

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
Copy link
Author

cathiechen commented Jul 7, 2022 •
edited
Loading

@davidsgrogan Thanks for the confirmation!

I think the priority order is clear to me now :

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

@cathiechen cathiechen mentioned this issue Jul 7, 2022
Merged
@Loirooriol
Copy link
Contributor

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).

@cathiechen cathiechen mentioned this issue Jul 13, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tabatkins tabatkins

@fantasai fantasai

Labels
css-sizing-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@hober @tabatkins @fantasai @davidsgrogan @Loirooriol @cathiechen