csswg-drafts
csswg-drafts copied to clipboard
w3c
[css-sizing-4] min/max size transfers across aspect-ratio
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers
Sizing constraints in either axis (the origin axis) are transferred through the preferred aspect ratio to the other axis (the destination axis) as follows:
First, any definite minimum size is converted and transferred from the origin to destination axis. This transferred minimum is capped by any definite preferred or maximum size in the destination axis.
Then, any definite maximum size is converted and transferred from the origin to destination. This transferred maximum is floored by any definite preferred or minimum size in the destination axis as well as by the transferred minimum, if any.
I think these should be defined as only impacting automatic or content-based sizes, rather than being defined as being an independent constraint clamped by the preferred size, because e.g. Flexbox makes a distinction between a size constraint applied to the "minimum size" vs a size constraint applied to the "preferred size" and it's otherwise not clear how this independent constraint would apply.
We need to go through https://drafts.csswg.org/css-flexbox/#min-size-auto and make sure that the new text is consistent with that; replaced elements at least should not have new behavior because of the new css-sizing-4 text.
Key point: a flex item that has min-width: 0 has no minimum for flex shrinkage. Any constraints transferred through the aspect ratio have an effect on the minimum size only if they are applied via min-width: auto or min-width: min-content etc. They can still affect the flex base size also, if that is an automatic or content-based size, but they're not an independent minimum in the same way that min-width is.
So the css-sizing-4 text is wrong here.
So after discussing with fantasai, the css-sizing-4 transferred min/max size text should not apply in flexbox/grid. Instead, only the sizing inside those specs should apply. For flex:
- Minimum sizes already applied per spec as part of content size suggestion in min-size: auto; should not apply for an explicit min size for compat with replaced elements
- Maximum size only taken into account for flex base size (spec text does not mention this explicitly if cross size is indefinite but is part of max-content computation - https://github.com/w3c/csswg-drafts/issues/6109). If flexing, will distort image, but you asked for it (flex-grow defaults to 0)
What happens with grid minimum sizes here? E.g:
<!DOCTYPE html>
<div style="display: grid; width: 0; height: 0; position: relative;">
<div style="overflow: hidden; min-width: 100px; min-height: 50px; aspect-ratio: 1/1; background: red;">
</div>
<div style="position: absolute; width: 100%; height: 100%; background: green; grid-area: 1/1/1/1;"></div>
</div>
<!DOCTYPE html>
<div style="display: grid; width: 0; height: 0; position: relative;">
<div style="overflow: hidden; min-width: 50px; min-height: 100px; aspect-ratio: 1/1; background: red;">
</div>
<div style="position: absolute; width: 100%; height: 100%; background: green; grid-area: 1/1/1/1;"></div>
</div>
So after discussing with fantasai, the css-sizing-4 transferred min/max size text should not apply in flexbox/grid. Instead, only the sizing inside those specs should apply. For flex:
- Minimum sizes already applied per spec as part of content size suggestion in min-size: auto; should not apply for an explicit min size for compat with replaced elements
- Maximum size only taken into account for flex base size (spec text does not mention this explicitly if cross size is indefinite but is part of max-content computation - #6109). If flexing, will distort image, but you asked for it (flex-grow defaults to 0)
Can somebody check if this makes existing aspect-ratio + flex test expectations invalid? For example: https://wpt.fyi/results/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html https://wpt.fyi/results/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
I think this was fixed in https://github.com/w3c/csswg-drafts/commit/a5044beab5cd35e6eee2b6252dd788bf889880b8 @cbiesinger let me know if the spec seems to be correct now?
This codepen (created Dec 31st 2021) https://codepen.io/propjockey/pen/VwMPYNw?editors=1100
Used to render this:
But now aspect-ratio is not respecting max-height
Is it because of these changes?
It was really useful to emulate a conceptual element-fit: contain;... could we please consider allowing it again, or having a path to enable similar behavior?
