Bug 246283 – The size of <img> with `contain:size` and css `aspect-ratio`

• Component: CSS
• Status: RESOLVED FIXED

[cathiechen]

Created attachment 462909 [details]
test-case.html

```
<img style="contain: size; aspect-ratio: 90 / 53;" src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg">
```

See the test above, when an `<img>` with contain and aspect-ratio, what size it should have?

Chromium and Gecko: 0 x 0.
WebKit: container width x height, respects to the value of CSS aspect-ratio.

Not quite sure which one is correct, need to dig into the specifications.

[1] https://w3c.github.io/csswg-drafts/css-contain-2/#containment-size
[2] https://w3c.github.io/csswg-drafts/css-sizing-4/#preferred-aspect-ratio

[cathiechen]

It also causes failures in:
imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html

[Radar WebKit Bug Importer]

<rdar://problem/101254198>

[Oriol Brufau]

See https://drafts.csswg.org/css-contain/#size-containment

> Replaced elements must be treated as having a natural width and height of 0 and no natural aspect ratio.

'aspect-ratio: 90 / 53' is still obeyed, but if the natural sizes are 0 then I don't think it can have much effect?

[cathiechen]

Checked this on commit 81d93da03d83c8e0e7d641030972ee2cf7c3c798, Tue May 16 01:30:00 2023, this has been fixed.