[css-sizing-4] Aspect ratio supplying the missing intrinsic size axis is weird

[cbiesinger]

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

If a replaced element’s only intrinsic dimension is an intrinsic width or an intrinsic height, giving it a preferred aspect ratio also gives it an intrinsic height or width, whichever was missing, by transferring the existing size through the preferred aspect ratio.

This is different from how an intrinsic aspect ratio behaves. For example, <svg viewBox="0 0 1 1" width="100" /> will not have an intrinsic height, but <img src='data:image/svg,<svg viewBox="0 0 1 1" width="100" />' style='aspect-ratio: 1/1'> will have an intrinsic height per the spec. This seems weird?

[fantasai]

@cbiesinger Can you identify any case in which an image with an intrinsic width and an aspect-ratio behaves differently from one with an intrinsic width, intrinsic height, and intrinsic aspect ratio?

Because per https://www.w3.org/TR/css-images-3/#sizing-terms if you have an intrinsic aspect ratio and either an intrinsic width or height, you also have the missing intrinsic dimension. This paragraph is just saying that this consequence also applies for an explicit aspect ratio.

In general, objects cannot have only two intrinsic dimensions, as any two automatically define the third. However some types of replaced elements, such as form controls, can have an intrinsic width and an intrinsic height, but no intrinsic aspect ratio.

[cbiesinger]

So in Blink's internal implementation, having one of intrinsic width and height, and an aspect ratio, will not supply the third as an intrinsic size. However, I have not been able to think of a case where that is web exposed, so this may not matter.

[AmeliaBR]

Here's the relevant SVG spec text: https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS

It requires that an intrinsic aspect ratio is calculated from explicit width & height (if they're in absolute units), but does not say anything about calculating sizes from the aspect ratio. We should probably update the wording to talk about "natural" dimensions, not "intrinsic", to match the new CSS text.

The only place where the intrinsic/natural sizes could be exposed directly, as far as I know, is in the naturalHeight and naturalWidth properties of an image element. And browsers are already inconsistent in what they report here: Chrome calculates out a value using the CSS method; Firefox reports 0 for null values. There's an HTML bug somewhere about fixing this...

CSS, as Fantasai notes, will take an aspect ratio + a single explicit size and automatically calculate out the other size dimension. So for CSS layout it is effectively the same, but the language should be consistent (e.g., natural vs intrinsic).