Intent to Ship: CSS shape() function

262 views
Skip to first unread message

Chromestatus

unread,
Jan 22, 2025, 2:42:34 PMJan 22
to blin...@chromium.org, nrose...@chromium.org

Contact emails

nrose...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-shapes-2/#shape-function

Summary

shape() allows responsive custom shapes in CSS properties that accept a shape, currently limited to clip-path. It lets the author define a series of commands, equivalent to the commands in path(), but where the commands accept responsive units (e.g. % or vw), as well as any CSS values such as custom properties or rather than pixel-values. See https://drafts.csswg.org/css-shapes-2/#shape-function



Blink component

Blink>CSS

TAG review

None

TAG review status

Pending

Risks



Interoperability and Compatibility

None



Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1153)

WebKit: Positive (https://bugs.webkit.org/show_bug.cgi?id=238371) Safari has already implemented this, available in STP.

Web developers: Positive See citations: https://jamesmcgrath.net/scaling-svg-clippath/ https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/ https://stackoverflow.com/questions/29495919/how-to-apply-clippath-to-a-div-with-the-clippath-position-being-relative-to-the https://stackoverflow.com/questions/31210466/convert-svg-path-data-to-0-1-range-to-use-as-clippath-with-objectboundingbox https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive

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?

None



Debuggability

None



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned&q=shape (anything beginning with shape-) https://wpt.fyi/results/css/css-masking/clip-path?label=master&label=experimental&aligned&q=shape and https://wpt.fyi/results/css/css-masking/clip-path/animations?label=master&label=experimental&aligned&q=shape (clip-path-shape-*)



Flag name on about://flags

CSSShapeFunction

Finch feature name

CSSShapeFunction

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40829059

Estimated milestones

Shipping on desktop 135
DevTrial on desktop 134
Shipping on Android 135
DevTrial on Android 134
Shipping on WebView 135


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

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5172258539307008?gate=5143998661132288

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6759c7eb.2b0a0220.2dfede.0004.GAE%40google.com


This intent message was generated by Chrome Platform Status.

Daniel Clark

unread,
Jan 22, 2025, 7:00:41 PMJan 22
to Chromestatus, blin...@chromium.org, nrose...@chromium.org

The TAG review link is missing but I see you’ve got one in progress here: https://github.com/w3ctag/design-reviews/issues/1033

 

Regarding the tests:

I am trying to understand why these are still mostly failing in Chrome Experimental. The CSSShapeFunction flag has status “experimental” so I’d expect it to be enabled for the Chrome Experimental WPT results, but in the links you shared most of the subtests for shape() still don’t pass. Are the tests or implementation still in flux, or do you know of something else I might be missing here?

 

As a sidenote, Firefox also seems to have done some work on this: https://bugzilla.mozilla.org/show_bug.cgi?id=1823463. Some but not all of the tests are passing on Firefox Nightly.

 

-- Dan Clark

--
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/67914a1a.2b0a0220.236503.0179.GAE%40google.com.

Noam Rosenthal

unread,
Jan 23, 2025, 4:01:28 AMJan 23
to Daniel Clark, Chromestatus, blin...@chromium.org
On Thu, Jan 23, 2025 at 12:00 AM Daniel Clark <dan...@microsoft.com> wrote:

The TAG review link is missing but I see you’ve got one in progress here: https://github.com/w3ctag/design-reviews/issues/1033


Oops thanks!
 

 

Regarding the tests:

> https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned&q=shape (anything beginning with shape-) https://wpt.fyi/results/css/css-masking/clip-path?label=master&label=experimental&aligned&q=shape and https://wpt.fyi/results/css/css-masking/clip-path/animations?label=master&label=experimental&aligned&q=shape (clip-path-shape-*)

I am trying to understand why these are still mostly failing in Chrome Experimental. The CSSShapeFunction flag has status “experimental” so I’d expect it to be enabled for the Chrome Experimental WPT results, but in the links you shared most of the subtests for shape() still don’t pass. Are the tests or implementation still in flux, or do you know of something else I might be missing here?


The version that's shown in wpt.fyi is not up to date yet. 100% of the tests pass on Canary.

As a sidenote, Firefox also seems to have done some work on this: https://bugzilla.mozilla.org/show_bug.cgi?id=1823463. Some but not all of the tests are passing on Firefox Nightly.


Nice! I was actually not aware of this. 

Domenic Denicola

unread,
Jan 26, 2025, 9:56:53 PMJan 26
to blink-dev, Chromestatus, Noam Rosenthal
This overall seems promising, but a few inline comments. The only blocking one is the question about open spec edits.

On Thursday, January 23, 2025 at 4:42:34 AM UTC+9 Chromestatus wrote:
Contact emails nrose...@chromium.org

Explainer None

I was able to piece together an explainer by looking through the spec and its examples. In the future, pointing to them a bit more directly, or pulling them out into a paragraph or two, would be helpful.
 


Specification https://drafts.csswg.org/css-shapes-2/#shape-function

Summary

shape() allows responsive custom shapes in CSS properties that accept a shape, currently limited to clip-path. It lets the author define a series of commands, equivalent to the commands in path(), but where the commands accept responsive units (e.g. % or vw), as well as any CSS values such as custom properties or rather than pixel-values. See https://drafts.csswg.org/css-shapes-2/#shape-function



Blink component Blink>CSS

TAG review None

TAG review status Pending

Risks


Interoperability and Compatibility

None



Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1153)

WebKit: Positive (https://bugs.webkit.org/show_bug.cgi?id=238371) Safari has already implemented this, available in STP.

Web developers: Positive See citations: https://jamesmcgrath.net/scaling-svg-clippath/ https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/ https://stackoverflow.com/questions/29495919/how-to-apply-clippath-to-a-div-with-the-clippath-position-being-relative-to-the https://stackoverflow.com/questions/31210466/convert-svg-path-data-to-0-1-range-to-use-as-clippath-with-objectboundingbox https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive

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?

None



Debuggability

None


Do we currently have any special DevTools support for clip-path()? If so, we might want to consumer the same thing for shape(). 



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)? Yes

Is this feature fully tested by web-platform-tests? Yes

https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned&q=shape (anything beginning with shape-) https://wpt.fyi/results/css/css-masking/clip-path?label=master&label=experimental&aligned&q=shape and https://wpt.fyi/results/css/css-masking/clip-path/animations?label=master&label=experimental&aligned&q=shape (clip-path-shape-*)



Flag name on about://flags CSSShapeFunction

I don't think this is an about://flags flag. (At least, I don't see one in my Chrome Dev.) Probably it's best to remove this from ChromeStatus.
 


Finch feature name CSSShapeFunction

Requires code in //chrome? False

Tracking bug https://issues.chromium.org/issues/40829059

Estimated milestones Shipping on desktop 135 DevTrial on desktop 134 Shipping on Android 135 DevTrial on Android 134 Shipping on WebView 135

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

None

https://github.com/w3c/csswg-drafts/labels/css-shapes-2 has quite a lot of open issues. Several of them relate to shape(), I believe:
Could you comment on these (and any others I might have missed) to let us know if any of them reflect either (a) potential backward-incompatible changes (#10647 seems especially scary in that regard), or (b) mismatches between the currently live spec and our implementation? If they are just potential future backward-compatible enhancements then that's fine, but I can't tell at a glance whether that's the case for all of them.

Noam Rosenthal

unread,
Jan 27, 2025, 6:08:19 AMJan 27
to Domenic Denicola, blink-dev, Chromestatus
On Mon, Jan 27, 2025 at 2:56 AM Domenic Denicola <dom...@chromium.org> wrote:
This overall seems promising, but a few inline comments. The only blocking one is the question about open spec edits.

On Thursday, January 23, 2025 at 4:42:34 AM UTC+9 Chromestatus wrote:
Contact emails nrose...@chromium.org

Explainer None

I was able to piece together an explainer by looking through the spec and its examples. In the future, pointing to them a bit more directly, or pulling them out into a paragraph or two, would be helpful.

Aye. Since the spec was written before the explainer trend (2020-ish) I thought it would be more useful if the spec explained itself... 
 
Debuggability

None


Do we currently have any special DevTools support for clip-path()? If so, we might want to consumer the same thing for shape(). 

We do not. I've updated the debuggability section, there is an open bug for this: https://issues.chromium.org/issues/40787656
 



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)? Yes

Is this feature fully tested by web-platform-tests? Yes

https://wpt.fyi/results/css/css-shapes/shape-functions?label=master&label=experimental&aligned&q=shape (anything beginning with shape-) https://wpt.fyi/results/css/css-masking/clip-path?label=master&label=experimental&aligned&q=shape and https://wpt.fyi/results/css/css-masking/clip-path/animations?label=master&label=experimental&aligned&q=shape (clip-path-shape-*)



Flag name on about://flags CSSShapeFunction

I don't think this is an about://flags flag. (At least, I don't see one in my Chrome Dev.) Probably it's best to remove this from ChromeStatus.
Aye, removing.
 
 


Finch feature name CSSShapeFunction

Requires code in //chrome? False

Tracking bug https://issues.chromium.org/issues/40829059

Estimated milestones Shipping on desktop 135 DevTrial on desktop 134 Shipping on Android 135 DevTrial on Android 134 Shipping on WebView 135

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

None

https://github.com/w3c/csswg-drafts/labels/css-shapes-2 has quite a lot of open issues. Several of them relate to shape(), I believe:
This is going to be asynchronously resolved in the next day or two. The resolution is purely technical as it reflects what both WebKit & Chromium implemented and already tested in the WPTs. 
I've closed these, it's leftovers for things that were fixed in one bulk PR. 
This one is not actionable and doesn't affect shape(), it's about path().
We might do this in the future, but it would be compatible with the current spec. 
 
Could you comment on these (and any others I might have missed) to let us know if any of them reflect either (a) potential backward-incompatible changes (#10647 seems especially scary in that regard), or (b) mismatches between the currently live spec and our implementation? If they are just potential future backward-compatible enhancements then that's fine, but I can't tell at a glance whether that's the case for all of them.

See above, none of these would have backwards compatibility issues. As far as the spec goes the feature is complete. 

Jeffrey Yasskin

unread,
Jan 27, 2025, 2:29:58 PMJan 27
to Noam Rosenthal, Domenic Denicola, blink-dev, Chromestatus
On Mon, Jan 27, 2025 at 3:08 AM Noam Rosenthal <nrose...@chromium.org> wrote:
On Mon, Jan 27, 2025 at 2:56 AM Domenic Denicola <dom...@chromium.org> wrote:
This overall seems promising, but a few inline comments. The only blocking one is the question about open spec edits.

On Thursday, January 23, 2025 at 4:42:34 AM UTC+9 Chromestatus wrote:
... 
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).

None

https://github.com/w3c/csswg-drafts/labels/css-shapes-2 has quite a lot of open issues. Several of them relate to shape(), I believe:
... 
This one is not actionable and doesn't affect shape(), it's about path().

I think "not actionable" isn't a great way to describe this issue: Lea's suggesting that this functionality be provided as part of the `path()` function and that `shape()` not be defined at this time. That's a concrete action that affects `shape()`.

Jeffrey

Noam Rosenthal

unread,
Jan 27, 2025, 3:52:05 PMJan 27
to Jeffrey Yasskin, Domenic Denicola, blink-dev, Chromestatus
This one is not actionable and doesn't affect shape(), it's about path().

I think "not actionable" isn't a great way to describe this issue: Lea's suggesting that this functionality be provided as part of the `path()` function and that `shape()` not be defined at this time. That's a concrete action that affects `shape()`.

My bad, I mixed it with #9889. it does affect `shape()` as in proposing to do something else instead, which is described in general terms (which is what I mean by "not actionable", I should have been more specific).
It is based on issue #9889 that has been closed in favor of `shape()`.
A discussion about this issue at TPAC (see on the issue) also didn't produce anything specific/actionable, and Lea failed to raise support for doing something other than `shape()`.
In the meantime `shape()` was spec'd, had its details fleshed to the last WPT, and implemented in Safari.
I asked Lea on the issue if she still wants to pursue this alternative approach.

It's up to the API owners what to do with this information - my view is that this ship has sailed.

Noam Rosenthal

unread,
Jan 28, 2025, 5:49:02 AMJan 28
to Jeffrey Yasskin, Domenic Denicola, blink-dev, Chromestatus
On Mon, Jan 27, 2025 at 8:51 PM Noam Rosenthal <nrose...@chromium.org> wrote:

This one is not actionable and doesn't affect shape(), it's about path().

I think "not actionable" isn't a great way to describe this issue: Lea's suggesting that this functionality be provided as part of the `path()` function and that `shape()` not be defined at this time. That's a concrete action that affects `shape()`.

My bad, I mixed it with #9889. it does affect `shape()` as in proposing to do something else instead, which is described in general terms (which is what I mean by "not actionable", I should have been more specific).

Update: I'm working through this issue to gain clarity about whether it contains any objections that should change something about the `shape()` feature, and will update here when this is resolved.

Noam Rosenthal

unread,
Feb 12, 2025, 1:07:49 PMFeb 12
to blink-dev, Noam Rosenthal, Domenic Denicola, blink-dev, Chromestatus, Jeffrey Yasskin
Coming back to this: the CSSWG has resolved that we'll keep `shape()` as is, and separately in the expand `path()` to have a more restrictive (but still CSS-y) version derived from `shape()`. See resolution. 
I went over the list of [css-shapes-2] issues again and all the issues either have a resolution that matches what the implementation already does, or is a future thing that's compatible with the current `shape()` (both spec and chromium/webkit implementations).
So I'm re-instating my intent to ship `shape()` as implemented and the request for API owner approval :)


 

Jeffrey Yasskin

unread,
Feb 12, 2025, 1:28:47 PMFeb 12
to Noam Rosenthal, blink-dev, Domenic Denicola, Chromestatus, Jeffrey Yasskin
Thank you for working through that, even though it resulted in no change to this intent!

Domenic Denicola

unread,
Feb 12, 2025, 10:59:16 PMFeb 12
to blink-dev, Jeffrey Yasskin, blink-dev, Domenic Denicola, Chromestatus, Noam Rosenthal
Indeed, thanks for working through this! LGTM1.

Mike Taylor

unread,
Feb 13, 2025, 3:21:45 PMFeb 13
to Domenic Denicola, blink-dev, Jeffrey Yasskin, Chromestatus, Noam Rosenthal

LGTM2

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

Yoav Weiss (@Shopify)

unread,
Feb 18, 2025, 12:16:19 PMFeb 18
to blink-dev, Mike Taylor, Jeffrey Yasskin, Chromestatus, Noam Rosenthal, Domenic Denicola
LGTM3

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Reply all
Reply to author
Forward
0 new messages