Contact emails [email protected]
Specification https://drafts.csswg.org/css-shapes/#shape-outside-property Summary Adds support for the path() and shape() shape functions in the CSS shape-outside property. These functions allow developers to define float exclusion shapes using rectangle coordinates, aligning Chrome with Firefox and Safari which already support this feature. Blink component Blink>CSS Web Feature ID shape-outside Motivation The CSS shape-outside property currently accepts basic shape functions (circle(), ellipse(), inset(), polygon()) and the url() function for image-based shapes, but it does not support path() or the newer shape() function. This is an inconsistency in the CSS Shapes specification, since path() and shape() are already supported in other CSS properties such as clip-path and offset-path. Web developers who want to wrap text around complex, arbitrary shapes are forced to work around this limitation by using image-based workarounds (eg, transparent PNG images with url()), which are less ergonomic, harder to maintain, not responsive, and not animatable. There is no way today to use an SVG-style path string or a shape() command directly in shape-outside. Supporting path() and shape() in shape-outside brings parity with clip-path and offset-path, reduces the need for image-based hacks, and enables developers to define complex text-wrapping shapes inline in CSS. It also enables shape animation when combined with CSS transitions and animations, improving the expressiveness and capability of CSS layout. Initial public proposal No information provided TAG review No information provided TAG review status Not applicable Goals for experimentation None Risks Interoperability and Compatibility No information provided Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=2017356) WebKit: No signal 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? No information provided Debuggability No information provided Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)? No Is this feature fully tested by web-platform-tests? Yes Flag name on about://flags No information provided Finch feature name CSSShapeOutsidePathAndShapeSupport Rollout plan Will ship enabled for all users Requires code in //chrome? False Tracking bug https://issues.chromium.org/u/2/issues/502328208 Estimated milestones Shipping on desktop 149 Shipping on Android 149 Shipping on WebView 149 Shipping on iOS 149 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). No information provided Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5080980370096128?gate=6491820889604096 Links to previous Intent discussions Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69de62f9.050a0220.b4a7a.0053.GAE%40google.com 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/69e654f0.050a0220.1131c4.0549.GAE%40google.com.
