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

Revert "[AspectRatio] Fix flex-aspect-ratio-026.html in legacy"

Revert r859812 and r860306

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>

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

Revert r859812 and r860306

Bug 1699663 [wpt PR 28149] - Revert r859812 and r860306, a=testonly

@fantasai

Capturing some thoughts from discussing with @fantasai and @bfgeek today:

auto preferred sizes defers to transferred constraints (min/max)
transferred constraints defer to explicit (non-auto) in-axis preferred sizes and constraints
in-axis automatic minimum defers to in-axis constraints only (ignores transferred constraints)

Some examples, all with aspect-ratio: 1/1:

max-height: 100px; width: auto; clamps the width to 100px (transferred constraint)
max-height: 100px; max-width: 200px; clamps the width to 100px (transferred constraint; you get two maxes, so the smaller one effectively applies)
max-height: 100px; width: 200px; the width is 200px (explicit width wins over transferred constraint)
max-height: 100px; min-width: 200px; the width is 200px (transferred max-height is floored by the explicit min-width, effectively becoming a max-width:200px)
max-height: 100px; min-width: auto; uses the auto minimum; the 100px doesn't clamp it.

@tabatkins

@tabatkins For the width: auto there needs to be a distinction between width: auto; justify-self: initial and width: auto; justify-self: stretch.

E.g. width: auto; justify-self: stretch should behave the same as width: stretch (a more explicit constraint than the transferred constraint).

[layout] Fix two aspect-ratio tests.

Given:

max-height: 100px; min-width: auto; uses the auto minimum; the 100px doesn't clamp it.

The tests:

css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
css/css-sizing/aspect-ratio/flex-aspect-ratio-039.html

Are incorrect I believe. Basically a transferred constraint is clamping the min-intrinsic size in these two test cases.

Bug 1912834 [wpt PR 47578] - [layout] Fix two aspect-ratio tests., a=…

This issue seems quite focused on flexbox but browsers don't agree in this basic non-flexbox testcase and I'm not sure who is right. I think #6071 (comment) means that it's WebKit who is right?

Details

<!DOCTYPE html>
<style>canvas { background: #000; aspect-ratio: 1 }</style>
<canvas height="10" width="30" style="height: 5px"></canvas>
<canvas height="10" width="30" style="height: 9px"></canvas>
<canvas height="10" width="30" style="height: 10px"></canvas>
<canvas height="10" width="30" style="height: 11px"></canvas>
<canvas height="10" width="30" style="height: 15px"></canvas>
<br>
<canvas height="10" width="30" style="min-height: 5px"></canvas>
<canvas height="10" width="30" style="min-height: 9px"></canvas>
<canvas height="10" width="30" style="min-height: 10px"></canvas>
<canvas height="10" width="30" style="min-height: 11px"></canvas>
<canvas height="10" width="30" style="min-height: 15px"></canvas>
<br>
<canvas height="10" width="30" style="max-height: 5px"></canvas>
<canvas height="10" width="30" style="max-height: 9px"></canvas>
<canvas height="10" width="30" style="max-height: 10px"></canvas>
<canvas height="10" width="30" style="max-height: 11px"></canvas>
<canvas height="10" width="30" style="max-height: 15px"></canvas>
<br>
<canvas height="10" width="30" style="width: 20px"></canvas>
<canvas height="10" width="30" style="width: 29px"></canvas>
<canvas height="10" width="30" style="width: 30px"></canvas>
<canvas height="10" width="30" style="width: 31px"></canvas>
<canvas height="10" width="30" style="width: 40px"></canvas>
<br>
<canvas height="10" width="30" style="min-width: 20px"></canvas>
<canvas height="10" width="30" style="min-width: 29px"></canvas>
<canvas height="10" width="30" style="min-width: 30px"></canvas>
<canvas height="10" width="30" style="min-width: 31px"></canvas>
<canvas height="10" width="30" style="min-width: 40px"></canvas>
<br>
<canvas height="10" width="30" style="max-width: 20px"></canvas>
<canvas height="10" width="30" style="max-width: 29px"></canvas>
<canvas height="10" width="30" style="max-width: 30px"></canvas>
<canvas height="10" width="30" style="max-width: 31px"></canvas>
<canvas height="10" width="30" style="max-width: 40px"></canvas>

Gecko	WebKit, Servo	Blink

Edit: changed Servo to align with WebKit, WPT: https://wpt.fyi/results/css/css-sizing/aspect-ratio/replaced-element-043.html

Bug 1699663 [wpt PR 28149] - Revert r859812 and r860306, a=testonly

Bug 1912834 [wpt PR 47578] - [layout] Fix two aspect-ratio tests., a=…

Navigation Menu

Repository navigation

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

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

fantasai commented on Mar 17, 2021

fantasai commented on Mar 17, 2021

cbiesinger commented on Mar 17, 2021

bfgeek commented on Mar 25, 2021

9 remaining items

tabatkins commented on Jul 22, 2024

bfgeek commented on Jul 23, 2024

bfgeek commented on Aug 15, 2024

Loirooriol commented on Oct 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions