Thanks Swarup for investigating this, it's exciting
The DevTools bug you pointed to (
<https://bugzilla.mozilla.org/show_bug.cgi?id=1841237>
https://bugzilla.mozilla.org/show_bug.cgi?id=1841239) covers adding an
editor for `path()`, so sebo filed another one that will be specific to
`shape()`: https://bugzilla.mozilla.org/show_bug.cgi?id=2006301
On Thursday, December 11, 2025 at 9:21:00 PM UTC+1 Swarup Ukil wrote:
> *Summary*:
>
> The CSS shape() function allows authors to define responsive custom shapes
> for CSS properties that accept basic-shapes (i.e. clip-path and
> offset-path). Notably, shape() is similar to path(); per spec, shape() can
> be thought of as a superset to path(), where any path() can be converted
> into a shape(). Particularly, the shape() function uses a set of commands
> that correspond to equivalent path() commands. For example the following
> path() and shape() commands are equivalent:
>
> -
>
> path("M 15 15 H 25 V -15 Z")
> -
>
> shape(from 15px 15px, hline to 25px, vline to -15px, close)
>
> The merit of shape() is that while path() reuses SVG path syntax to
> describe a wide range of arbitrary shapes, it equally inherits the
> limitations of SVG’s such as only allowing the px unit. Comparatively,
> shape() can achieve similar results while utilizing more standard CSS
> syntax, allowing the full range of CSS functionality, such as additional
> units (i.e. % or vw) and math functions. Example of additional robustness
> shape() provides over path():
> https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path#shape_versus_path_functions
> .
>
> *The meta bug shape()*:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1910328
> *Bug to turn on by default*:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1982941
> *Specification*: https://drafts.csswg.org/css-shapes-1/#shape-function
>
> *Platform coverage*: All.
> *Preference*:
> <https://searchfox.org/mozilla-central/source/modules/libpref/init/StaticPrefList.yaml#8340>
> layout.css.basic-shape-shape.enabled
> <https://searchfox.org/firefox-main/source/modules/libpref/init/StaticPrefList.yaml#10103>,
>
> enabled by default on Nightly.
> *DevTools bug*: <https://bugzilla.mozilla.org/show_bug.cgi?id=1841237>
> https://bugzilla.mozilla.org/show_bug.cgi?id=1841239
> *Link to standards-positions discussion*:
> https://github.com/mozilla/standards-positions/issues/1153
>
> *Other browsers*:
>
> -
>
> Blink 135 – shipped:
>
> https://groups.google.com/a/chromium.org/g/blink-dev/c/AliA6N9kaxo/m/YIlLj-0iAgAJ
>
> -
>
> WebKit 18.4 – shipped:
> https://webkit.org/blog/16574/webkit-features-in-safari-18-4/
>
> *web-platform-tests*: motion and css-masking use shape():
>
> 1.
>
> css/css-shapes/shape-functions/shape-function-*.html
> 2.
>
> css/css-masking/clip-path/clip-path-shape-[001-011].html
> 3.
>
>
>
> css/css-masking/animations/clip-path-interpolation-shape-control-points.html
> 4.
>
> css/css-masking/clip-path/clip-path-shape-hline-vline-keywords.html
> 5.
>
> css/css-masking/clip-path/animations/clip-path-shape-*.html
> 6.
>
> motion/animation/offset-path-interpolation-008.html
> 7.
>
> css/motion/parsing/offset-path-shape-*.html
>
> As of firefox 148, we intend to turn shape() on by default on all
> platforms. It has been developed behind the
> layout.css.basic-shape-shape.enabled
> <https://searchfox.org/firefox-main/source/modules/libpref/init/StaticPrefList.yaml#10103>
>
> preference. Status in other browsers mentioned above.
> Best,
> Swarup
--
You received this message because you are subscribed to the Google Groups
"[email protected]" 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/mozilla.org/d/msgid/dev-platform/6d4e9434-7a42-4a63-b33c-24439cc11a94n%40mozilla.org.
