[css-sizing-4] min/max size transfers across aspect-ratio #6071

fantasai · 2021-03-03T20:08:51Z

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.

fantasai · 2021-03-17T18:13:52Z

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.

fantasai · 2021-03-17T18:20:54Z

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.

cbiesinger · 2021-03-17T19:07:12Z

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 - [css-flexbox-1] be clearer about aspect ratio without definite cross size case #6109). If flexing, will distort image, but you asked for it (flex-grow defaults to 0)

This reverts commit 174c8fdaa25c49ca36b702598f3fc08f72cc4f29. Reason for revert: see w3c/csswg-drafts#6071 (comment) Original change's description: > [AspectRatio] Fix flex-aspect-ratio-026.html in legacy > > Implement min/max size transfers for replaced elements: > https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers > > Mark both flex-aspect-ratio-025.html and flex-aspect-ratio-026.html as > passing for legacy and update these tests to take both main and cross > size padding into account. > > Add flex-aspect-ratio-027.html to verify that min/max-size transfer does not always happen just because aspect-ratio is present. > > Bug: 1164135 > Change-Id: I20a26cbe256ae5d6a66c5763c7b12f814a3d7ef6 > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2721723 > Commit-Queue: Rob Buis <rbuis@igalia.com> > Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> > Cr-Commit-Position: refs/heads/master@{#859812} Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1

This reverts commit 174c8fdaa25c49ca36b702598f3fc08f72cc4f29 and 674680c9a1a7f1e34ace0e050ea0276006252671. Reason for revert: see w3c/csswg-drafts#6071 (comment) This CL keeps the useful WPT test changes for flex-aspect-ratio-025.html and flex-aspect-ratio-026.html. Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1

bfgeek · 2021-03-25T00:39:33Z

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>

… CSS2+Flexbox. #6071

This reverts commit 174c8fdaa25c49ca36b702598f3fc08f72cc4f29 and 674680c9a1a7f1e34ace0e050ea0276006252671. Reason for revert: see w3c/csswg-drafts#6071 (comment) This CL keeps the useful WPT test changes for flex-aspect-ratio-025.html and flex-aspect-ratio-026.html. Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773267 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Rob Buis <rbuis@igalia.com> Cr-Commit-Position: refs/heads/master@{#867495}

This reverts commit 174c8fd and 674680c. Reason for revert: see w3c/csswg-drafts#6071 (comment) This CL keeps the useful WPT test changes for flex-aspect-ratio-025.html and flex-aspect-ratio-026.html. Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773267 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Rob Buis <rbuis@igalia.com> Cr-Commit-Position: refs/heads/master@{#867495}

Automatic update from web-platform-tests Revert r859812 and r860306 This reverts commit 174c8fdaa25c49ca36b702598f3fc08f72cc4f29 and 674680c9a1a7f1e34ace0e050ea0276006252671. Reason for revert: see w3c/csswg-drafts#6071 (comment) This CL keeps the useful WPT test changes for flex-aspect-ratio-025.html and flex-aspect-ratio-026.html. Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773267 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Rob Buis <rbuis@igalia.com> Cr-Commit-Position: refs/heads/master@{#867495} -- wpt-commits: 52c2635ca8e3e94e18d3da6c409001d25abfba63 wpt-pr: 28149

rwlbuis · 2021-05-17T09:48:22Z

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 - [css-flexbox-1] be clearer about aspect ratio without definite cross size case #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

rwlbuis · 2021-05-18T06:31:41Z

Ah, never mind, I see those tests got corrected.

fantasai · 2021-09-07T22:47:05Z

I think this was fixed in a5044be @cbiesinger let me know if the spec seems to be correct now?

JaneOri · 2022-08-21T03:12:44Z

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?

This reverts commit 174c8fdaa25c49ca36b702598f3fc08f72cc4f29 and 674680c9a1a7f1e34ace0e050ea0276006252671. Reason for revert: see w3c/csswg-drafts#6071 (comment) This CL keeps the useful WPT test changes for flex-aspect-ratio-025.html and flex-aspect-ratio-026.html. Bug: 1164135 Change-Id: I6a36d40c7e74eed6ab333a5bebcf6d1471d7d1b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773267 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Rob Buis <rbuis@igalia.com> Cr-Commit-Position: refs/heads/master@{#867495} GitOrigin-RevId: cb947d5c1bf9a3bf12f62a6e153eeb49b7533198

fantasai added the css-sizing-4 label Mar 3, 2021

chromium-wpt-export-bot mentioned this issue Mar 19, 2021

Revert r859812 and r860306 web-platform-tests/wpt#28149

Merged

fantasai added a commit that referenced this issue Mar 25, 2021

[css-sizing-4] Fix aspect-ratio min/max transfer rules to not violate…

a5044be

… CSS2+Flexbox. #6071

fantasai added Closed Accepted by Editor Discretion Commenter Response Pending labels Sep 7, 2021

tabatkins mentioned this issue Sep 8, 2021

Export bots are constantly recreating/rebasing commits, causing issue spam web-platform-tests/wpt#30406

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-sizing-4] min/max size transfers across aspect-ratio #6071

[css-sizing-4] min/max size transfers across aspect-ratio #6071

fantasai commented Mar 3, 2021

fantasai commented Mar 17, 2021

fantasai commented Mar 17, 2021

cbiesinger commented Mar 17, 2021

bfgeek commented Mar 25, 2021

rwlbuis commented May 17, 2021 •

edited

Loading

rwlbuis commented May 18, 2021

fantasai commented Sep 7, 2021

JaneOri commented Aug 21, 2022

[css-sizing-4] min/max size transfers across aspect-ratio #6071

[css-sizing-4] min/max size transfers across aspect-ratio #6071

Comments

fantasai commented Mar 3, 2021

fantasai commented Mar 17, 2021

fantasai commented Mar 17, 2021

cbiesinger commented Mar 17, 2021

bfgeek commented Mar 25, 2021

rwlbuis commented May 17, 2021 • edited Loading

rwlbuis commented May 18, 2021

fantasai commented Sep 7, 2021

JaneOri commented Aug 21, 2022

rwlbuis commented May 17, 2021 •

edited

Loading