Closed Bug 1823463 Opened 1 year ago Closed 3 months ago

[css-shapes-2] Implement shape() function for clip-path


(Core :: CSS Parsing and Computation, enhancement)




126 Branch
Tracking Status
relnote-firefox --- nightly+
firefox126 --- fixed


(Reporter: dholbert, Assigned: boris)


(Blocks 2 open bugs)


(Keywords: dev-doc-complete)


(3 files)

css-shapes-2 defines a shape() function:

...which the spec seems to describe as being syntactic sugar for the harder-to-read path() function.

Some tests already exist for this, e.g. this test which happens to be part of the interop-2023-cssmasking effort:
(Here's the pull request that added that test, for reference.)

(Note that all of our current subtest passes in that^ test are trivial; they're just testing for invalid syntax to be rejected. We do reject it, because we don't recognize the syntax at all.)

Keywords: dev-doc-needed
Blocks: 1841284
No longer blocks: interop-2023-cssmasking
Severity: -- → S3

We will handle the interpolation between shape() and path() later in
this patch series.

Also, PathCommand will reuse GenericShapeCommand. We will do that in the
next patch.

Also, we don't have Unkonwn type, so we have to do some minor
refactoring in BuildPath(), and templatize this function so we can use
it for both shape() and path().

This patch doesn't change the behavior.

Note that we instantiate BuildPath() with CSSFloat for now. Once we
instantiate it for StyleAngle and LengthPercentage (i.e. shape()), we
have to tweak this function more. Let's do that in the next patch.

Assignee: nobody → boris.chiou
Attachment #9387949 - Attachment description: Bug 1823463 - Support shape() for clip-path property in style (wip). → Bug 1823463 - Support shape() for clip-path property in style.
Attachment #9387951 - Attachment description: Bug 1823463 - Render clip-path:shape() (wip). → Bug 1823463 - Render clip-path:shape().
Blocks: 1884424
Summary: [css-shapes-2] Implement shape() function → [css-shapes-2] Implement shape() function for clip-path
Pushed by
Support shape() for clip-path property in style. r=emilio
Make PathCommand as the specialization of GenericShapeCommand. r=emilio
Render clip-path:shape(). r=emilio
Created web-platform-tests PR for changes under testing/web-platform/tests
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 126 Branch
Duplicate of this bug: 1841284
Upstream PR merged by moz-wptsync-bot

:boris could you consider nominating this for a release note? (Process info)
We could include it in the nightly release notes.

Flags: needinfo?(boris.chiou)

Release Note Request (optional, but appreciated)
[Why is this notable]: This is a new feature on Firefox. We support shape() function on clip-path property now. It provides a better CSS syntax for path commands (compared with path(), which uses SVG Path string syntax).
[Affects Firefox for Android]: Yes
[Suggested wording]: Support shape() function on clip-path property.
[Links (documentation, blog post, etc)]:

relnote-firefox: --- → ?
Flags: needinfo?(boris.chiou)

Thanks, added to the Fx126 nightly release notes, please allow 30 minutes for the site to update.
Keeping the relnote-firefox flag as ? to keep it on the radar for inclusion in the final Fx126 release notes

MDN docs have been updated and the shape() function documentation is now available. The related work can be tracked via the doc issue
Thanks a lot Boris for your timely help with all my questions!

You need to log in before you can comment on or make changes to this bug.