2037673 - Add closest-corner and farthest-corner to circle() and ellipse()

Status: RESOLVED FIXED

(Core :: Layout: Floats, enhancement)

Description

[Boris Chiou [:boris]]

Both circle() and ellipse() use <radial-size>.

Per spec from [css-image-3], the <radial-size> is:

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}
<radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side

And the extension from [css-image-4]

<radial-size> = <radial-extent>{1,2} | <length-percentage [0,∞]>{1,2}

So we have to follow the new syntax, to add farthest-corner to circle() and ellipse(). The Stylo side is here, and the shape radius computation in Gecko is here. We should extend the syntax to include farthest-corner and implement it for shape-outside (note: It seems clip-path and offset-path use the same code path so they should support it as well).

Comment 1

[Diego Ciudad Real Escalante [:descalante]]

Attachment: Bug 2037673 - Add farthest-corner and closest-corner to circle() and ellipse(). r=boris

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5b69273b2abc
https://hg.mozilla.org/integration/autoland/rev/0f6870090736
Add farthest-corner and closest-corner to circle() and ellipse(). r=boris,firefox-style-system-reviewers,layout-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ffb9665ac72d
https://hg.mozilla.org/integration/autoland/rev/5c21859a2bad
Revert "Bug 2037673 - Add farthest-corner and closest-corner to circle() and ellipse(). r=boris,firefox-style-system-reviewers,layout-reviewers" for causing mochitest failures at test_property_syntax_errors.html

Comment 5

[rperta]

Backed out for causing mochitest failures at test_property_syntax_errors.html
Backout link
Push with failures
Failure log(s)

Comment 6

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

Failed to create upstream wpt PR due to merge conflicts. This requires fixup from a wpt sync admin.

Comment 7

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

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

Comment 8

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

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

Comment 9

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/e06cd32e8995

Comment 10

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

Upstream PR was closed without merging

Comment 11

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

Upstream PR was closed without merging

Comment 12

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

Upstream PR merged by moz-wptsync-bot

Comment 13

[Sebastian Zartner [:sebo]]

[Why is this notable]: Two new keywords for existing CSS functions.
[Affects Firefox for Android]: yes
[Suggested wording]: The circle() and ellipse() functions accept two new keywords closest-corner and farthest-cornerfor their radial size.
[Links (documentation, blog post, etc)]:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/circle
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/ellipse

Sebastian

Comment 14

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

See comment 13.

Comment 15

[Pascal Chevrel (relman team) -> :pascalc]

Note added to our 153 nightly release notes in the Web Standards section with this wording:

The circle() and ellipse() functions accept two new keywords closest-corner and farthest-corner for their radial size.

I am keeping the relnote-firefox? flag set until we include this note in our final 153 release notes, thanks.

Comment 16

[Pascal Chevrel (relman team) -> :pascalc]

I am keeping the relnote-firefox? flag set until we include this note in our final 153 release notes, thanks.

(Change of internal process)

Comment 17

[Sebastian Zartner [:sebo]]

Regarding the documentation on MDN, note that the two new keywords were put behind a pref in bug 2045278.

Sebastian

Comment 18

[Hamish Willee]

FF153 MDN docs work for this can be tracked in https://github.com/mdn/content/issues/44459 (Thanks @sebo for the heads up ^^^^).

FWIW I found the description of the closest-corner values in the spec to be a little confusing for ellipse:

The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.

For a circle() that is clear. For ellipse() it sort of implies (to me) that the shape of the ellipse is calculated based on closest-side, then the ellipse is scaled up in its current aspect-ratio until it touches the corner. My test code instead shows that the radius is calculated from the centre, and that is what is used for the ellipse in the particular radial direction.
I am assuming I just don't get the spec. Adding a question though in case you can explain easily where I'm going wrong.

Comment 19

[Diego Ciudad Real Escalante [:descalante]]

Hi! I agree this behaviour is not very clear from the spec which is why we put it behind a pref for release. Here is an issue tracking the possible spec resolution (and some more discussion here). I think what's most likely going to happen is ellipse either uses 0 or 2 <radial-size> arguments and the scaling part of the definition gets dropped from the closes/farthest corner case. I believe scaling will get dropped because a) that's also how webkit implements it too, and b) this definition allows for the x and y semiaxis to compete to resolve which aspect ratio is ultimately chosen. Apologies if this isn't the most helpful but this is my current understanding of the matter. And feel free to needinfo me again if necessary :)

Comment 20

[Hamish Willee]

Thanks for your help - just what I needed. FYI I'll leave my docs reflecting what the implementation does for now: if everyone does something differnent than the spec that is what MDN documents.

Comment 21

[Sebastian Zartner [:sebo]]

Diego, could it be that there was no Intent to Prototype mail sent for this change?
The Chrome team is ready to ship this feature and currently wondering whether others are planning to work on this.

Sebastian

Comment 22

[Boris Chiou [:boris]]

I expect TYLin is working on this project now, so ni? to TYLin.

Comment 23

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

I'm not working on shape function at the moment. Boris, do you mind sending the Intent to Prototype? https://wiki.mozilla.org/ExposureGuidelines

Comment 24

[Boris Chiou [:boris]]

https://groups.google.com/a/mozilla.org/g/dev-platform/c/8ym1D6YOI6E

intent to prototype and ship for circle()
intent to prototype for ellipse()