[meta] Implement conic gradients from CSS Image Values Level 4
Categories
(Core :: CSS Parsing and Computation, enhancement, P1)
Tracking
()
People
(Reporter: lea, Assigned: ntim)
References
(Depends on 2 open bugs, Blocks 2 open bugs, )
Details
(4 keywords, Whiteboard: gfx-noted [layout:backlog:2020])
Attachments
(2 obsolete files)
Comment 2•9 years ago
|
||
Updated•9 years ago
|
Comment 4•9 years ago
|
||
Comment 5•9 years ago
|
||
Assignee | ||
Updated•9 years ago
|
Comment hidden (me-too) |
Comment 7•9 years ago
|
||
Comment 8•9 years ago
|
||
Comment 9•9 years ago
|
||
Reporter | ||
Comment 10•9 years ago
|
||
Comment hidden (me-too) |
Updated•8 years ago
|
Updated•7 years ago
|
Comment 14•7 years ago
|
||
Comment hidden (advocacy) |
Comment 16•7 years ago
|
||
Comment hidden (advocacy) |
Updated•6 years ago
|
Comment hidden (advocacy) |
Comment 20•6 years ago
|
||
Comment 21•6 years ago
|
||
Comment 22•6 years ago
|
||
Comment 23•6 years ago
|
||
Comment 24•6 years ago
|
||
Updated•5 years ago
|
Updated•5 years ago
|
Comment 25•5 years ago
|
||
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•5 years ago
|
||
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•5 years ago
|
||
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 hidden (advocacy) |
Comment 29•5 years ago
|
||
(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
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 30•5 years ago
|
||
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 31•5 years ago
|
||
Depends on D61599
Comment 32•5 years ago
|
||
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•5 years ago
|
||
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.
Assignee | ||
Comment 34•5 years ago
•
|
||
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).
Updated•5 years ago
|
Assignee | ||
Updated•4 years ago
|
Comment 35•4 years ago
|
||
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
Assignee | ||
Comment 36•4 years ago
•
|
||
If everything goes well, this should be available to everyone from Firefox 83 without any preference to enable, see bug 1632351. 🎉
Assignee | ||
Comment 37•4 years ago
|
||
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)
Assignee | ||
Updated•4 years ago
|
Description
•