[css-sizing-4] The priority of different minimum and maximum sizes
@fantasai is already working on this.
Since Dec 12, 2023.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Now, we have different kinds of minimum/maximum sizes:
- The Definite minimum/maximum sizes
- Transferred Min/Max Sizes
- Automatic Content-based Minimum 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>
<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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.