[css-shapes-2] Implement shape() function for clip-path
Categories
(Core :: CSS Parsing and Computation, enhancement)
Tracking
()
People
(Reporter: dholbert, Assigned: boris)
References
(Blocks 2 open bugs)
Details
(Keywords: dev-doc-complete)
Attachments
(3 files)
css-shapes-2 defines a shape() function:
https://drafts.csswg.org/css-shapes-2/#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:
https://wpt.fyi/results/css/css-masking/parsing/clip-path-shape-parsing.html
(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.)
|
Reporter | |
Updated•1 year ago
|
|
Assignee | |
Updated•9 months ago
|
|
|
Assignee | |
Updated•9 months ago
|
|
|
Assignee | |
Comment 1•4 months ago
|
||
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.
|
|
Assignee | |
Comment 2•4 months ago
|
||
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 | |
Comment 3•4 months ago
|
||
|
|
Assignee | |
Updated•4 months ago
|
|
||
Updated•4 months ago
|
|
|
||
Updated•4 months ago
|
|
|
Assignee | |
Updated•4 months ago
|
Pushed by bchiou@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/7f73d7224fdc Support shape() for clip-path property in style. r=emilio https://hg.mozilla.org/integration/autoland/rev/266fe352539f Make PathCommand as the specialization of GenericShapeCommand. r=emilio https://hg.mozilla.org/integration/autoland/rev/27f7a56246fb Render clip-path:shape(). r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/45191 for changes under testing/web-platform/tests
|
||
Comment 6•3 months ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/7f73d7224fdc
https://hg.mozilla.org/mozilla-central/rev/266fe352539f
https://hg.mozilla.org/mozilla-central/rev/27f7a56246fb
Upstream PR merged by moz-wptsync-bot
|
||
Comment 9•3 months ago
|
||
:boris could you consider nominating this for a release note? (Process info)
We could include it in the nightly release notes.
|
|
Assignee | |
Comment 10•3 months ago
|
||
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)]:
https://drafts.csswg.org/css-shapes-2/#shape-function
https://drafts.fxtf.org/css-masking-1/#the-clip-path
|
|
||
Comment 11•3 months ago
|
||
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
|
|
||
Updated•2 months ago
|
|
||
Comment 12•29 days ago
|
||
MDN docs have been updated and the shape() function documentation is now available. The related work can be tracked via the doc issue https://github.com/mdn/content/issues/33081.
Thanks a lot Boris for your timely help with all my questions!
Description
•