[csswg-drafts] [css-sizing-4] aspect-ratio min-content size with % width (#5549)

cbiesinger has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-4] aspect-ratio min-content size with % width ==
https://drafts.csswg.org/css-sizing-4/#aspect-ratio

Usually, aspect-ratio is supposed to behave like a replaced element with that ratio. However, there is one behavior difference:

If a replaced element has a percentage width, the min-content size becomes 0:
https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/layout/layout_replaced.cc;l=912;drc=df8f58d9311eb29e65394e437a156b00fafc9a67;bpv=1;bpt=1

This is not the case with aspect-ratio, and when combined with contain-intrinsic-size this can lead to undesired effects, quoting from an email I got:

> 1. Go to https://dvoytenko.github.io/aspect-ratio-css/#x-intrinsic-and-float
> 2. Make the window smaller. Around innerWidth=300 you can see things pretty well.
> 3. Observe that both "Native", "Emulated" and "Images" sections are identical and things are as expected.
> 4. Now, in DevTools disable `max-width: 100%;` from `.intrinsic-and-float .outer-cell {}` rule.
> 5. Observe that all "Emulated" and "Images" are the same. But "Native" now expanded to the full size in the contain-intrinsic-size.

Should this behavior be spec'd for aspect-ratio?

@dvoytenko @bfgeek @fantasai 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5549 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 September 2020 17:35:37 UTC