> 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
<https://github.com/WebKit/WebKit/pull/59434/changes>, and you
can check here
<https://github.com/WebKit/WebKit/blob/a5f61994499a9a688bd4fe13c8abf6666cc98fac/Source/WebCore/style/values/shapes/StyleShapeOutside.cpp#L84>
to
see that they are not supported.
Best regards,
Jason
On Wednesday, April 22, 2026 at 11:19:38 PM UTC+8 Alex Russell wrote:
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
<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
On Tuesday, April 21, 2026 at 8:23:44 AM UTC-7 Jason Leo wrote:
> 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
<https://bugzilla.mozilla.org/show_bug.cgi?id=2017356>);
Updated in the Chrome status entry
On Tuesday, April 21, 2026 at 12:32:02 AM UTC+8
Chromestatus wrote:
*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
<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22>
*Web Feature ID*
shape-outside
<https://webstatus.dev/features/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
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?*
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 <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/fe168709-7de8-4e69-a715-c1a533999e5dn%40chromium.org
<https://groups.google.com/a/chromium.org/d/msgid/blink-dev/fe168709-7de8-4e69-a715-c1a533999e5dn%40chromium.org?utm_medium=email&utm_source=footer>.
