Intent to prototype and ship: support shape() in basic-shape

[Swarup Ukil]

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: layout.css.basic-shape-shape.enabled, enabled by default on Nightly.
DevTools bug: 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 preference. Status in other browsers mentioned above.

Best,
Swarup

[Nicolas Chevobbe]

Thanks Swarup for investigating this, it's exciting

The DevTools bug you pointed to (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