1910328 - [meta] [css-shapes-1] Implement shape() function

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

This bug is meant to ship the shape() function from CSS Shapes 2.

Comment 1

[Daniel Holbert [:dholbert]]

Based on caniuse data, it looks like both Chromium and Safari shipped this recently:
https://caniuse.com/?search=shape()

So there might be some resulting competitive pressure from that in the near future.

Comment 2

[Daniel Holbert [:dholbert]]

(For reference, the relevant about:config pref here is layout.css.basic-shape-shape.enabled and it's enabled-by-default in a Nightly-only way right now. There's likely a fair bit of work to do before we're ready to let that pref ride the trains; when we get to this, it'll be worth triaging the various things marked as blocking bug 1323663, many of which are probably pieces of this feature.)

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Sebastian Zartner [:sebo] from comment #0)

This bug is meant to ship the shape() function from CSS Shapes 2.

Update: this moved from css-shapes-2 to css-shapes-1 (per csswg discussion).

The spec text is now here:
https://drafts.csswg.org/css-shapes-1/#shape-function

Comment 4

[一丝]

Chrome recently fixed this https://issues.chromium.org/issues/417852973,
Firefox and Safari have the same bug, and I'm not sure if there's a separate bugzilla to document it.

Comment 5

[Daniel Holbert [:dholbert]]

Probably not tracked yet; we would automatically generate one for failing WPT tests if the chrome big were fixed with those, but it looks like they may have used some internal-only tests instead.

I can file a bug later on (afk right now).

Comment 6

[Boris Chiou [:boris]]

I just updated the dependency to make sure our shape() matches the spec. We probably can rely on some of the wpt in css/motion and css/css-masking because offset-path and clip-path accept shape().

Comment 7

[Boris Chiou [:boris]]

(In reply to 一丝 from comment #4)

Chrome recently fixed this https://issues.chromium.org/issues/417852973,
Firefox and Safari have the same bug, and I'm not sure if there's a separate bugzilla to document it.

This is probably related to this wpt: https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-masking/animations/clip-path-interpolation-shape-arc-direction-agnostic-radius.html

I didn't see a bug for arc and this test failure, so we probably need to file a new bug for it.

Comment 8

[Boris Chiou [:boris]]

(In reply to Daniel Holbert [:dholbert] from comment #5)

Probably not tracked yet; we would automatically generate one for failing WPT tests if the chrome big were fixed with those, but it looks like they may have used some internal-only tests instead.

I can file a bug later on (afk right now).

The chrome issue is related to arc command with direction-agnostic size. I just filed a bug for those test failures: Bug 1982757

Comment 9

[Boris Chiou [:boris]]

Note that border-shape (https://drafts.csswg.org/css-borders-4/#border-shape-func) is not supported in Gecko yet, so this bug (and its dependencies) wouldn't cover it.

Comment 10

[Sebastian Zartner [:sebo]]

For what it's worth, I just filed bug 1982766 to track the implementation of border-shape.

Sebastian

Comment 11

[Sebastian Zartner [:sebo]]

Renaming the bug, as it turned into a meta-bug for the implementation of shape().

Boris, bug 1823463 implemented shape() for clip-path. Though, with that is the function available for all properties that take <basic-shape>s, like offset-path, shape-outside, etc. or should there be individual bugs filed for them? At least, from my testing, shape-outside doesn't support shape() yet.

Sebastian

Comment 12

[Boris Chiou [:boris]]

(In reply to Sebastian Zartner [:sebo] from comment #11)

Renaming the bug, as it turned into a meta-bug for the implementation of shape().

Boris, bug 1823463 implemented shape() for clip-path. Though, with that is the function available for all properties that take <basic-shape>s, like offset-path, shape-outside, etc. or should there be individual bugs filed for them? At least, from my testing, shape-outside doesn't support shape() yet.

Sebastian

We do have the separate bugs: Bug 1823463 is for clip-path, and bug 1884424 is for offset-path.
For offset-path, clip-path, we support all the basic-shapes (code comments).

For shape-outside, we only support: inset(), circle(), ellipse(), polygon() (code).
So this means that we still need to file new bugs to support rect(), xywh(), path(), and shape() I think. (I didn't find any restrictions on shape-outside in css-shapes-1 after this spec update, so I expect we should support all). However, shape-outside affects the float area (so I think it may need more work to support different basic shapes), and we have a separate meta bug for this property: Bug 1098939. Also, It seems WebKit and Chromium don't support shape() on shape-outside neither. Therefore, I expect the support of shape() on shape-outside shouldn't block this meta bug.

shape-inside (for CSS. note: there is a different shape-inside defined in SVG2) and border-shape are not supported yet on Gecko, and I guess we don't have a bug for shape-inside.

Comment 13

[Sebastian Zartner [:sebo]]

(In reply to Boris Chiou [:boris] from comment #12)

(In reply to Sebastian Zartner [:sebo] from comment #11)

Renaming the bug, as it turned into a meta-bug for the implementation of shape().

Boris, bug 1823463 implemented shape() for clip-path. Though, with that is the function available for all properties that take <basic-shape>s, like offset-path, shape-outside, etc. or should there be individual bugs filed for them? At least, from my testing, shape-outside doesn't support shape() yet.

Thank you for the detailed answer!

We do have the separate bugs: Bug 1823463 is for clip-path, and bug 1884424 is for offset-path.
For offset-path, clip-path, we support all the basic-shapes (code comments).

I see. Thanks for the clarification!

For shape-outside, we only support: inset(), circle(), ellipse(), polygon() (code).
So this means that we still need to file new bugs to support rect(), xywh(), path(), and shape() I think. (I didn't find any restrictions on shape-outside in css-shapes-1 after this spec update, so I expect we should support all). However, shape-outside affects the float area (so I think it may need more work to support different basic shapes), and we have a separate meta bug for this property: Bug 1098939.

Ok, so I'll file new bugs against 1098939 as needed.

Also, It seems WebKit and Chromium don't support shape() on shape-outside neither. Therefore, I expect the support of shape() on shape-outside shouldn't block this meta bug.

Fair enough.

shape-inside (for CSS. note: there is a different shape-inside defined in SVG2) and border-shape are not supported yet on Gecko, and I guess we don't have a bug for shape-inside.

Now we have, see bug 1983182. 😀

Sebastian

Comment 14

[Sebastian Zartner [:sebo]]

(In reply to Sebastian Zartner [:sebo] from comment #13)

(In reply to Boris Chiou [:boris] from comment #12)

(In reply to Sebastian Zartner [:sebo] from comment #11)

Renaming the bug, as it turned into a meta-bug for the implementation of shape().

Boris, bug 1823463 implemented shape() for clip-path. Though, with that is the function available for all properties that take <basic-shape>s, like offset-path, shape-outside, etc. or should there be individual bugs filed for them? At least, from my testing, shape-outside doesn't support shape() yet.

Thank you for the detailed answer!

We do have the separate bugs: Bug 1823463 is for clip-path, and bug 1884424 is for offset-path.
For offset-path, clip-path, we support all the basic-shapes (code comments).

I see. Thanks for the clarification!

For shape-outside, we only support: inset(), circle(), ellipse(), polygon() (code).
So this means that we still need to file new bugs to support rect(), xywh(), path(), and shape() I think. (I didn't find any restrictions on shape-outside in css-shapes-1 after this spec update, so I expect we should support all). However, shape-outside affects the float area (so I think it may need more work to support different basic shapes), and we have a separate meta bug for this property: Bug 1098939.

Ok, so I'll file new bugs against 1098939 as needed.

Done.

rect() ⇒ bug 1983185
xywh() ⇒ bug 1983187
path() ⇒ bug 1983188
shape() ⇒ bug 1983190

Sebastian