Bug 276681 – contain: size breaks object-fit

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[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>

[alan]

Created attachment 473977 [details]
[fast-cq]Patch

[Tim Nguyen (:ntim)]

Comment on attachment 473977 [details]
[fast-cq]Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=473977&action=review

> COMMIT_MESSAGE:1
> +Contain:size breaks object-fit 

tiny nit: formatting of the CSS property name is a bit weird. Would be good to format like this:

`contain: size` breaks `object-fit`

[alan]

Created attachment 473985 [details]
Patch

[alan]

Created attachment 473986 [details]
[fast-cq]Patch

[EWS]

Committed 289287@main (0217089631af): <https://commits.webkit.org/289287@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 473986 [details].