1786160 - [css-shapes-1] Implement xywh() function

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

The CSS Shapes 1 specification defines an xywh() function to create a rectangular shape.

This bug is meant to implement that function.

Sebastian

Comment 1

[Boris Chiou [:boris]]

wpt

1. https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-images/object-view-box-xywh.html
2. https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html
3. https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-images/object-view-box-interpolation.html
4. and in the parsing test, https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-images/object-view-box-parsing.html

Comment 2

[Boris Chiou [:boris]]

We may have to support this as well for motion-1.

Comment 3

[Daniel Holbert [:dholbert]]

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

We may have to support this as well for motion-1.

In particular, this is required for these WPTs which contribute to the interop-2023 "Motion Path" focus area:
https://wpt.fyi/results/css/motion/offset-path-shape-xywh-001.html
https://wpt.fyi/results/css/motion/offset-path-shape-xywh-002.html

Both of those tests use offset-path: xywh(...).

Comment 4

[Boris Chiou [:boris]]

And it seems like there is no test case of rect() and xywh() for clip-path in WPT. (But there are tests of shape() for clip-path in WPT.) So I will add some tests of xywh() for clip-path as well in this bug.

Comment 5

[Boris Chiou [:boris]]

Attachment: Bug 1786160 - Support xywh() in style.

Also, add layout.css.basic-shape-xywh.enabled and enable it on Nightly

Comment 6

[Boris Chiou [:boris]]

Attachment: Bug 1786160 - Support xywh() for offset-path.

And rename some functions, e.g. BuildInsetPath as BuildRectPath and
ComputeInsetRadii as ComputeRectRadii, because we would like to use it for
inset()/xywh()/rect(). All of them define the similar rectangles.

Also, tweak the tests:

1. tweak offset-path-shape-xywh-001.html to avoid the element just at
   the bottom-right corner of path because there is no tangent angle at this
   point. Its direction angle could be 90deg or 180deg, depends on the
   implementation.
2. tweak offset-path-shape-xywh-002.html and
   offset-path-shape-xywh-002-ref.html together because it seems the
   original ref file is incorrect. The test was added by Blink and the
   implementation of xywh() in Blink uses the height of the reference box to
   resolve the precentage value of the width of the transformed box.
   It doesn't make sense because we should use the width of the reference box
   to resolve it. So tweak the test and its reference file together
   based on Gecko's result.

Comment 7

[Boris Chiou [:boris]]

Attachment: Bug 1786160 - Support xywh() for clip-path.

The fuzzy in the test happens on the round because we use the different way
to draw the round of clip-path (compared to border-radius property) in
the render backend, so there are some tiny differences.

Comment 8

[Boris Chiou [:boris]]

Attachment: Bug 1786160 - Rename inset as rect in ShapeUtils.

We would like to use these function for all rectangular shape, i.e.
inset()/xywh()/rect(). So rename them to avoid confusion.

No behavior change.

Comment 9

[Boris Chiou [:boris]]

Attachment: Bug 1786160 - Add test to make sure the animations of offset-path:xywh() run on the compositor.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/66865edf765b
Support xywh() in style. r=emilio
https://hg.mozilla.org/integration/autoland/rev/7bb336a7878e
Rename inset as rect in ShapeUtils. r=emilio
https://hg.mozilla.org/integration/autoland/rev/fb419d8b4ca6
Support xywh() for offset-path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/0aa826684137
Support xywh() for clip-path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/98306fe9e124
Add test to make sure the animations of offset-path:xywh() run on the compositor. r=hiro

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/40925 for changes under testing/web-platform/tests

Comment 12

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/66865edf765b
https://hg.mozilla.org/mozilla-central/rev/7bb336a7878e
https://hg.mozilla.org/mozilla-central/rev/fb419d8b4ca6
https://hg.mozilla.org/mozilla-central/rev/0aa826684137
https://hg.mozilla.org/mozilla-central/rev/98306fe9e124

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 14

[Dipika]

MDN doc updates for this feature can be tracked via this issue: https://github.com/mdn/content/issues/28286 (in review).
Thank you for your help, Boris!