Intent to Ship: Support path() and shape() in shape-outside

[Chromestatus]

Contact emails

cg...@chromium.org

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 (e.g., 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 (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).

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.

[Jason Leo]

> 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.

The summary mistakenly says Firefox and Safari already support this feature; they don't. It's not updated in the Chrome status entry.

> Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=2017356)

This should be Positive(they put it into interop-2026-shape); Updated in the Chrome status entry

[Alex Russell]

Hey Jason,

Cool too this being implemented. We discussed this briefly at this morning's API OWNERS call and were hoping you might be able to file explicit standards position requests with Mozilla and WebKit. It's also not clear what the developer interest here is. Your note links to the Interop feature set for 2026, but looking at the tests included in Interop, I don't see WebKit failing anything here:

https://wpt.fyi/results/?label=master&label=experimental&aligned&view=interop&q=label%3Ainterop-2026-shape

And I do see a blog post from them mentioning the feature:

https://webkit.org/blog/16794/the-css-shape-function/

Is it shipped in WebKit?

Best,

Alex

[一丝]

Safari (WebKit) does not support `shape-outside: shape()`, see also: https://github.com/WebKit/WebKit/pull/59434/changes#diff-368e881f578fe9017c4b4c4eaceab1a352ed6c3e26f5c7469ca49f1bccb9146c

[Noam Rosenthal]

On Wed, Apr 22, 2026 at 6:22 PM 一丝 <yio...@gmail.com> wrote:

Safari (WebKit) does not support `shape-outside: shape()`, see also: https://github.com/WebKit/WebKit/pull/59434/changes#diff-368e881f578fe9017c4b4c4eaceab1a352ed6c3e26f5c7469ca49f1bccb9146c

And I do see a blog post from them mentioning the feature:

https://webkit.org/blog/16794/the-css-shape-function/

To be clear, when they published this blog post they supported clip-path: shape() and offset-path: shape(), which is what chromium currently supports as well.

[Jason Leo]

Hi Alex,

> were hoping you might be able to file explicit standards position requests with Mozilla and WebKit

I think I may only need to send position requests to WebKit, as Mozilla already add path and shape into interop-2026-shape

> https://webkit.org/blog/16794/the-css-shape-function/

This post is only for clip-path, in fact, we already support both in clip-path, too.

> Is it shipped in WebKit?

No, and even worse, the safari will crash if it sees `shape(...)` inside `shape-outside` until the recently fixed PR, and you can check here to see that they are not supported.

Best regards,

Jason

[Mike Taylor]

On 4/22/26 10:36 a.m., Jason Leo wrote:

Hi Alex,

> were hoping you might be able to file explicit standards position requests with Mozilla and WebKit

I think I may only need to send position requests to WebKit, as Mozilla already add path and shape into interop-2026-shape

We don't consider a feature being in-scope to be an exception to filing a standards position - would you mind filing one for Mozilla as well?

(back in 2023, I had specifically asked Mozilla about this, and they requested that we continue to file official standards position issues regardless - and to highlight that the feature is an Interop focus area)

--
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 blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/fe168709-7de8-4e69-a715-c1a533999e5dn%40chromium.org.

[Jason Leo]

Yes, I have filed both.

https://github.com/mozilla/standards-positions/issues/1393

https://github.com/WebKit/standards-positions/issues/650

Mike Taylor <mike...@chromium.org>于2026年4月24日 周五07:47写道：