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 </features#tags:svg>, object-fit </features#tags:object-fit>,
object-position </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.
/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.
