[css-sizing] Should `aspect-ratio: <ratio>` obey `box-sizing` on replaced elements with auto preferred sizes?

[Loirooriol]

So my understanding from #4951 and https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-ratio is that these tests are wrong:

• http://wpt.live/css/css-sizing/aspect-ratio/replaced-element-013.html

  <!-- Replaced elements should always use content-box sizing for the purpose of
       aspect ratio. -->
  <img src="support/20x50-green.png" style="aspect-ratio: 20/50; background: green; padding-right: 80px; padding-bottom: 50px; box-sizing: border-box;">

• http://wpt.live/css/css-sizing/aspect-ratio/replaced-element-014.html

  <!-- Replaced elements should always use content-box sizing for the purpose of
       aspect ratio. -->
  <img src="support/20x50-green.png" style="aspect-ratio: 20/50; background: green; padding-right: 80px; padding-bottom: 50px; box-sizing: border-box; max-height: 100px;">

Since aspect-ratio doesn't have auto, then it should obey box-sizing.

But of course the tests are part of interop-2021 and all browsers are passing them.

I'm not sure if there has been some amendment to align with browsers.

[Loirooriol]

So to be specific, https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-ratio says

• <ratio> The box’s preferred aspect ratio is the specified ratio of width / height. Size calculations involving the aspect ratio work with the dimensions of the box specified by box-sizing.

The tests have the default min-width: auto that behaves as 0, which is floored to 80px to avoid a negative content width, then this is transferred to a min border-box height of 80px / (20/50) = 200px. But the tests expects 100px instead.

Browsers are passing the tests for different reasons:

• Gecko totally ignores aspect-ratio: <ratio> (treats it as auto) on replaced elements with width: auto; height: auto.

• WebKit obeys aspect-ratio: <ratio>, but on replaced elements with width: auto; height: auto it applies the ratio to the content-box regardless of box-sizing, e.g.

  <style>canvas { aspect-ratio: 10/25; background: green; padding-right: 40px; padding-bottom: 25px; box-sizing: border-box }</style>
  <canvas width="10" height="25" style="min-width: 40px; width: auto"></canvas>
  <canvas width="10" height="25" style="min-width: 40px; width: 0px"></canvas>

  

• Blink obeys aspect-ratio: <ratio> and respects box-sizing, but only when a min/max constraint is violated, e.g.

  <style>canvas { aspect-ratio: 10/25; background: green; padding-right: 40px; padding-bottom: 25px; box-sizing: border-box; }</style>
  <canvas width="10" height="25" style="min-width: 50px"></canvas>
  <canvas width="10" height="25" style="min-width: 51px"></canvas>

  

Agenda+ to ratify the spec or align with some browser.