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

Fri, 02 Oct 2026 09:34:52 -0700

This Intent was initially about enabling the current implementation by 
default, but I agree that it should also work for cross-origin objects 
before shipping.

The remaining gap is out-of-process frames. I am implementing the fix and 
will upload the CLs shortly.

This feature only covers SVG documents in <object> and <embed>. It will not 
apply to responsively-sized iframes, at least not in this Intent. The CSS 
Sizing 4 spec limits responsive sizing to HTML documents in iframes, and 
excludes SVG documents for the time being:

> Note: Currently, the HTML <meta> element appearing in the <head> of an 
HTML document is the only way for an embedded document to opt into this 
feature in HTML. This means that SVG documents in <iframe> cannot do so.

https://drafts.csswg.org/css-sizing-4/#iframe-frame-sizing 

On Thursday, 1 October 2026 at 00:20:13 UTC+9 Chris Harrelson wrote:

> 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/008228d2-dbae-4647-a30f-21c0e0a1383fn%40chromium.org.

Reply via email to