Re: [blink-dev] Intent to Ship: object-fit and object-position apply to SVG documents in and

Wed, 30 Sep 2026 08:20:08 -0700

I think this needs to work for cross-origin objects before shipping,
could you please implement the TODO?

Also, a feature for responsively sized iframes was recently shipped, should
this layout feature apply to those iframes?

On Tue, Sep 29, 2026 at 7:22 AM Felipe Erias <[email protected]> wrote:

> Thank you.
>
> This Intent is only about <embed> and <object>, which are the cases
> covered by WPT tests and supported by other browsers (already implemented
> in Firefox, open bug in WebKit).
>
> My first CL placed this change in LayoutEmbeddedContent, so it would have
> also applied to iframes. This did not have any actual impact because
> iframes don't report natural dimensions, and the code was moved to
> LayoutEmbeddedObject in a second CL.
>
> The current implementation does not yet support the case where the SVG
> comes from a different site and is rendered in a separate process:
> <object data="https://other-site.net/chart.svg"; style="width: 400px;
> height: 400px; object-fit: contain"></object>
>
> This is a known limitation, noted with a TODO in
> LayoutEmbeddedObject::ReplacedContentRectFrom:
> // TODO(crbug.com/41302806): Only works for same-origin content
> (LocalFrame).
>
> Best,
> Felipe
>
> On Tuesday, 22 September 2026 at 05:46:57 UTC+9 Stephen Chenney wrote:
>
>> On Mon, Sep 21, 2026 at 3:03 PM Mike Taylor <[email protected]> wrote:
>>
>>>
>>> On 9/20/26 10:54 p.m., Chromestatus wrote:
>>>
>>> *Contact emails*
>>> [email protected]
>>>
>>> *Specification*
>>>
>>> https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
>>>
>>> *Summary*
>>> SVG documents loaded through <object> or <embed> are sized and
>>> positioned inside the element's content box according to the CSS object-fit
>>> and object-position properties, the same way <img> content is. Previously
>>> Chrome ignored both properties for embedded SVG documents and always
>>> stretched the document viewport to the whole content box.
>>>
>>> *Blink component*
>>> Blink>SVG
>>> <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ESVG%22>
>>>
>>> *Web Feature ID*
>>> object-fit <https://webstatus.dev/features/object-fit>
>>>
>>> *Motivation*
>>> Authors use object-fit and object-position to control how replaced
>>> content is scaled and placed inside its box.
>>> https://drafts.csswg.org/css-images-3/#the-object-fit
>>> https://drafts.csswg.org/css-images-3/#the-object-position Currently,
>>> Chrome applies them to images and videos but ignores them for SVG documents
>>> loaded through <object> or <embed>, which are always stretched to fill the
>>> element. The fix has been implemented behind the
>>> SVGEmbeddedAsReplacedElement flag since M141. This entry ships it by
>>> default.
>>>
>>> *Initial public proposal*
>>> *No information provided*
>>>
>>> *Search tags*
>>> svg <http:///features#tags:svg>, object-fit
>>> <http:///features#tags:object-fit>, object-position
>>> <http:///features#tags:object-position>
>>>
>>> *TAG review*
>>> *No information provided*
>>>
>>> *TAG review status*
>>> Not applicable
>>>
>>> *Goals for experimentation*
>>> None
>>>
>>> *Risks*
>>>
>>>
>>> *Interoperability and Compatibility*
>>> With the initial values (object-fit: fill; object-position: 50% 50%) the
>>> replaced content rect is the whole content box, so pages that do not set
>>> these properties render as before. Rendering changes where authors
>>> intentionally set object-fit / object-position on an <object>/<embed>
>>> hosting an SVG document. Firefox already applies both properties in this
>>> case; Safari not yet (https://bugs.webkit.org/show_bug.cgi?id=317804).
>>> Rendering also changes in fullscreen, where the UA stylesheet sets
>>> object-fit: contain for a fullscreen <object>/<embed>. This is tested by
>>> https://wpt.fyi/results/fullscreen/rendering/backdrop-object.html
>>> (Firefox and Safari time out on that test for harness reasons, test can be
>>> verified manually on Firefox.) Only <object> and <embed> are affected;
>>> <iframe> is unchanged, as in Firefox. Known limitation: SVG documents
>>> hosted in an out-of-process frame are not covered and keep the old
>>> behaviour.
>>>
>>> Could you elaborate on why the OOPIF behavior differs? Sometimes SVG is
>> embedded in an iframe and I would expect sizing to work the same in that
>> context.
>>
>>>
>>>
>>> *Gecko*: Shipped/Shipping (https://wpt.fyi/results/css/css-images) See
>>> the related WPT tests in the css-images folders.
>>>
>>> *WebKit*: No signal (https://bugs.webkit.org/show_bug.cgi?id=317804) Bug
>>> still in the NEW status.
>>>
>>> Can we request an official signal from WebKit please?
>>>
>>>
>>> *Web developers*: No signals
>>>
>>> *Other signals*:
>>>
>>> *WebView application risks*
>>>
>>> Does this intent deprecate or change behavior of existing APIs, such
>>> that it has potentially high risk for Android WebView-based applications?
>>> None.
>>>
>>>
>>> *Debuggability*
>>> No changes, as object-fit and object-position are already supported by
>>> DevTools.
>>>
>>> *Will this feature be supported on all six Blink platforms (Windows,
>>> Mac, Linux, ChromeOS, Android, and Android WebView)?*
>>> Yes
>>>
>>> *Is this feature fully tested by web-platform-tests
>>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?*
>>> Yes
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-001e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-001o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-002e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-002o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-003e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-003o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-004e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-004o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-005e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-005o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-006e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-contain-svg-006o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-001e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-001o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-002e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-002o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-003e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-003o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-004e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-004o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-005e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-005o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-006e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-cover-svg-006o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-dyn-aspect-ratio-001.html
>>> https://wpt.fyi/results/css/css-images/object-fit-dyn-aspect-ratio-002.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-001e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-001o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-002e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-002o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-003e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-003o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-004e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-004o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-005e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-005o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-006e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-fill-svg-006o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-001e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-001o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-002e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-002o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-003e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-003o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-004e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-004o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-005e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-005o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-006e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-none-svg-006o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-001e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-001o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-002e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-002o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-003e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-003o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-004e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-004o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-005e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-005o.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-006e.html
>>> https://wpt.fyi/results/css/css-images/object-fit-scale-down-svg-006o.html
>>>
>>> *Flag name on about://flags*
>>> SVGEmbeddedAsReplacedElement
>>>
>>> *Finch feature name*
>>> SVGEmbeddedAsReplacedElement
>>>
>>> *Rollout plan*
>>> Will ship enabled for all users
>>>
>>> *Requires code in //chrome?*
>>> False
>>>
>>> *Tracking bug*
>>> https://issues.chromium.org/41302806
>>>
>>> *Estimated milestones*
>>> Shipping on desktop 157
>>> Shipping on Android 157
>>> Shipping on WebView 157
>>>
>>> *Anticipated spec changes*
>>>
>>> Open questions about a feature may be a source of future web compat or
>>> interop issues. Please list open issues (e.g. links to known github issues
>>> in the project for the feature specification) whose resolution may
>>> introduce web compat/interop risk (e.g., changing to naming or structure of
>>> the API in a non-backward-compatible way).
>>> None.
>>>
>>> *Link to entry on the Chrome Platform Status*
>>> https://chromestatus.com/feature/4886345347629056?gate=4869870255734784
>>>
>>> This intent message was generated by Chrome Platform Status
>>> <https://chromestatus.com>.
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "blink-dev" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To view this discussion visit
>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6ab09c5b.60d96795.386b54.0022.GAE%40google.com
>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6ab09c5b.60d96795.386b54.0022.GAE%40google.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "blink-dev" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>>
>> To view this discussion visit
>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/93ad2edf-af73-4e2e-a3e9-81700e2aeb0e%40chromium.org
>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/93ad2edf-af73-4e2e-a3e9-81700e2aeb0e%40chromium.org?utm_medium=email&utm_source=footer>
>>> .
>>>
>> --
> You received this message because you are subscribed to the Google Groups
> "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/500023cb-1801-472e-8543-591b8a030ecdn%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/500023cb-1801-472e-8543-591b8a030ecdn%40chromium.org?utm_medium=email&utm_source=footer>
> .
>

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw93uXhaKbqwCsh9t0feiXLaaKfoE47C5MQi50T4kJfBjA%40mail.gmail.com.

Reply via email to