Contain:size breaks object-fit

• Component: Layout and Rendering
• Status: NEW ---

[Eric Portis]

Right now, in WebKit, applying contain:size to an element with object-fit:contain effectively disables object-fit:contain.

The CSSWG has resolved that contain:size should only affect the size of the element's box, but not affect the natural aspect-ratio of its contents (which are used by object-fit): https://github.com/w3c/csswg-drafts/issues/10116#issuecomment-2035803916

Use cases:
- Using object-fit along with auto-sizes (this issue blocks https://bugs.webkit.org/show_bug.cgi?id=253143 because of https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size)
- Making an img's box size completely determined from the "outside-in" without distorting it, e.g., in grids: https://codepen.io/eeeps/pen/PorPgvy

While the spec has not been written yet, there are Web Platform Tests for this resolution, which WebKit alone fails:

https://wpt.fyi/results/css/css-images?label=master&product=safari%5Bstable%5D&product=safari%5Bexperimental%5D&product=firefox%5Bstable%5D&product=chrome%5Bstable%5D&aligned&q=object-fit-containsize%20or%20object-fit-containcontain

[Radar WebKit Bug Importer]

<rdar://problem/131866042>