1175958 - (conic-gradients) [meta] Implement conic gradients from CSS Image Values Level 4

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P1)

Description

[Lea Verou]

Conic gradients [1] are useful for a number of effects on the Web that cannot be emulated in any other way (see [2]). They can be implemented in Cairo via mesh gradients. Please implement them.

[1]: http://www.w3.org/TR/css4-images/#conic-gradients
[2]: http://leaverou.github.io/conic-gradient

Comment 2

[Jeff Muizelaar [:jrmuizel]]

(In reply to Lea Verou from comment #0)
> Conic gradients [1] are useful for a number of effects on the Web that
> cannot be emulated in any other way (see [2]). They can be implemented in
> Cairo via mesh gradients. Please implement them.
> 
> [1]: http://www.w3.org/TR/css4-images/#conic-gradients
> [2]: http://leaverou.github.io/conic-gradient

Conic gradients are not natively supported by Direct2D, CoreGraphics and Cairo which means this is a bunch of work and without an implementation in other browsers not a high priority right now.

Comment 3

[Lea Verou]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #2)

> Conic gradients are not natively supported by Direct2D, CoreGraphics and
> Cairo which means this is a bunch of work and without an implementation in
> other browsers not a high priority right now.


1. Re:Cairo, see above. See also [1], where conical gradients are actually mentioned as an example of a use case.
2. Have you investigated how much work it would be? Of course you can’t draw much from one instance, but the complexity seems manageable, based on my brief experience implementing a (partial) polyfill [2]. All it requires is an arc command, which all three (Direct2D, CoreGraphics, Cairo) do provide. The rest (color interpolation, compositing) are there already.

[1]: http://libregraphicsworld.org/blog/entry/mesh-gradients-in-cairo-now-official
[2]: http://leaverou.github.io/conic-gradient/

Comment 4

[Jeff Muizelaar [:jrmuizel]]

(In reply to Lea Verou from comment #3)
> (In reply to Jeff Muizelaar [:jrmuizel] from comment #2)
> 
> > Conic gradients are not natively supported by Direct2D, CoreGraphics and
> > Cairo which means this is a bunch of work and without an implementation in
> > other browsers not a high priority right now.
> 
> 
> 1. Re:Cairo, see above. See also [1], where conical gradients are actually
> mentioned as an example of a use case.

Our in-tree version of cairo doesn't support mesh gradients. Updating cairo is currently blocked
on switching away from cairo to Skia for rendering on Windows.

> 2. Have you investigated how much work it would be? Of course you can’t draw
> much from one instance, but the complexity seems manageable, based on my
> brief experience implementing a (partial) polyfill [2]. All it requires is
> an arc command, which all three (Direct2D, CoreGraphics, Cairo) do provide.
> The rest (color interpolation, compositing) are there already.

I haven't investigated how much work it would be. Can you describe how the polyfill works?

Comment 5

[Sreenivasulu S]

Conic gradients are quite powerful in creating cool looking effects.
Definitely, it is a useful in the toolkit of a web developer.
This is needed to be implemented in all all the browsers: Chrome, Opera, Firefox, IE, Safari.

Comment 6

[vinci]

+1. This would be very useful for static pie charts.

Comment 7

[Jeff Muizelaar [:jrmuizel]]

(In reply to vinci from comment #6)
> +1. This would be very useful for static pie charts.

Do you have an example of what you have in mind?

Comment 8

[Markus Stange [:mstange]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #7)
> Do you have an example of what you have in mind?

See http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/#future-pie-charts and the rest of the article.

Comment 9

[Robert Kaiser]

For another description of the pie chart thing, view https://air.mozilla.org/view-source-tuesday-pm-session/ starting at 1:03 (or starting at 1:32 is you are only interested in conic gradients).

Oh and even animated ones and pie charts with multiple slices work fine with conic gradients, not just static ones as mentioned in comment #6. And yes, if you look at who presented that talk and who filed this bug, you will find some similarity. ;-)

Comment 10

[Lea Verou]

(In reply to vinci from comment #6)
> +1. This would be very useful for static pie charts.

Not just static. Once gradient interpolation is implemented, this would be animatable too.

@Jeff: Direct2D 1.1 does support mesh gradients, so this should be easy(ish) to implement on Windows. From my discussions with other Mozilla graphics guys it seems that the main roadblock here is Core Graphics, though I've heard from Apple guys that they have requested something similar from the CG team. When it will be implemented, who knows. But it should be noted that Microsoft has put conical gradients on the backlog for Edge [1].

[1]: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8471413-implement-conic-gradients-from-css-image-values-le

Comment 11

[Glenn Jorde]

+1

Comment 12

[David Baron :dbaron:]

blink-dev intent to implement thread:
https://groups.google.com/a/chromium.org/d/topic/blink-dev/-z66SwKdklc/discussion

Comment 13

[yisibl]

https://bugzilla.mozilla.org/show_bug.cgi?id=1352643

Comment 14

[keith]

Other browsers have started to implement conic gradients:

In development for blink (and useable in Chrome stable behind "Experimental Web Platform Features" flag):
https://www.chromestatus.com/features/5706155347148800

In development for webkit: 
https://webkit.org/status/#feature-conic-gradients

Comment 15

[akshay.malhotra17]

Kindly add conic gradient implementation.

Comment 16

[j.j.]

Chrome intents to ship conic-gradient now:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ySuNvyaB8jY

Comment 17

[Sreenivasulu S]

Glad to see the conic gradients are getting shipped in Chrome.
Finally, Lea Verou's push to get these in the browser is fruitful.
Congrats Lea Verou for your efforts!

Comment 18

[David Baron :dbaron:]

Conic gradients were cleared to ship in https://lists.w3.org/Archives/Public/www-style/2018Mar/0021.html

Comment 19

[captlid]

I would like conic gradients implemented too. 

I am writing a script where a pie chart will change each color's size based on form oninput typed in by the user that calculates percentages.

Comment 20

[Sander]

Latest Safari Technical Preview supports conical gradients: https://webkit.org/blog/8414/release-notes-for-safari-technology-preview-66/

Comment 21

[Jeff Muizelaar [:jrmuizel]]

(In reply to captlid from comment #19)
> I would like conic gradients implemented too. 
> 
> I am writing a script where a pie chart will change each color's size based
> on form oninput typed in by the user that calculates percentages.

I'd recommend just using SVG for this. Using conical gradients will be much more expensive to draw than solid slices of a pie.

Comment 22

[Estelle Weyl]

https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient (BCD and Interactive examples need to be merged, but complete)

Comment 23

[Sebastian Zartner [:sebo]]

Very detailed description, Estelle! As far as I know (and please correct me if that info is not valid anymore), dev-doc-needed is kept until a feature is implemented in Gecko to signal that the compatibility data needs to be adjusted and the feature mentioned in the release notes. So I'm resetting it.

Sebastian

Comment 24

[captlid]

> I'd recommend just using SVG for this. Using conical gradients will be much
> more expensive to draw than solid slices of a pie.

What features of svg would be the best for this then?

Desktop Chrome finally enabled conic gradients!!!

I finally got this working, works in firefox, my friend's iphone 6. Had no other devices to test on. 
https://codepen.io/captlid/pen/BvZybM

Uses css clip and runs calculations and logic for slices bigger than 50%.

Seems to work fast enough without lag issues.

Comment 25

[Will Delphia]

In addition to pie charts, conic gradients can be used to cool effect with border image.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

Comment 26

[adamjagosz]

Border image might not be the best bet as it is incompatible with border-radius. But setting a conic-gradient as a background of a wrapping div with the padding the width of the intended border might work.

Example of conic gradient used for a gradient border:
https://codepen.io/hyvyys/pen/pXxvGO

Comment 27

[thewebkid]

I am working on a gradient tool that combines all three gradients into one tool. http://preview.thewebkid.com/gradients

My hope is you will open chrome (http://preview.thewebkid.com/gradients), explore my tool, see the value, and implement this. I am going to write an animation engine next and take this public in the coming weeks. I really do not want to have to write a convoluted polyfill for this, but I will if you guys don't prioritize this.

Chrome nailed this a year ago. Edge gave up and will by default support it when they adopt webkit.

Will you? Or will you be forced to adopt webkit eventually also?

Hope not...

Comment 28

[tobz.nz]

Firefox is now the last major browser not supporting conic-gradient (since Edge has switched to Chromium).
It has so many use cases. Please implement it.

Comment 29

[Sebastian Zartner [:sebo]]

(In reply to thewebkid from comment #27)

Chrome nailed this a year ago. Edge gave up and will by default support it when they adopt webkit.

Will you? Or will you be forced to adopt webkit eventually also?

As much as I'd like to see this feature implemented, this bug report is not for "I'd also like to have this" comments nor for forcing Mozilla to implement it, see points 2 and 4 of the Bugzilla Etiquette. Keep in mind that the implementation of features always depends on resources and priorities.

So, I suggest, instead of writing comments here, just vote for it, ask in the forums, and/or on IRC to keep the noise here down.

I really do not want to have to write a convoluted polyfill for this, but I will if you guys don't prioritize this.

Please note that there are already some polyfills like the one from Lea, the reporter of this feature request.

As Jessie didn't respond to the needinfo request, I remove it now.

Sebastian

Comment 30

[Tim Nguyen :ntim]

Attachment: Bug 1175958 - Implement conic-gradient for WebRender graphics backend.

Comment 31

[Tim Nguyen :ntim]

Attachment: Bug 1175958 - Implement parsing for conic-gradient in style system.

Depends on D61599

Comment 32

[Phabricator Automation]

Comment on attachment 9125284 [details]
Bug 1175958 - Implement parsing for conic-gradient in style system.

Revision D62148 was moved to bug 1614202. Setting attachment 9125284 [details] to obsolete.

Comment 33

[Phabricator Automation]

Comment on attachment 9125269 [details]
Bug 1175958 - Implement conic-gradient for WebRender graphics backend.

Revision D61599 was moved to bug 1614890. Setting attachment 9125269 [details] to obsolete.

Comment 34

[Tim Nguyen :ntim]

If you're on Nightly, there's an implementation you can try out behind the layout.css.conic-gradient.enabled preference. It should be available on Beta either today or tomorrow.

If you're using Windows, you also have to enable gfx.webrender.all since it's not implemented for Direct2D yet (see bug 1617396).

Comment 35

[Sean Voisen (:svoisen)]

Now that we triage by severity, setting priority to P1 to reflect backlog prioritization on this bug as either in-progress, or planned development in the near term. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla

Comment 36

[Tim Nguyen :ntim]

If everything goes well, this should be available to everyone from Firefox 83 without any preference to enable, see bug 1632351. 🎉

Comment 37

[Tim Nguyen :ntim]

I'll mark this as resolved fixed to avoid confusion, since this reached release about 2 weeks ago.

Remaining bugs are:

• printing support (bug 1617039)
• very slight rendering issues (bug 1625917 also affecting chromium, bug 1652751)