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 Web Feature ID 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, object-fit, 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. 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? 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 (eg links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (eg, 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. -- 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.
