Intent to Ship: CSS conic-gradient()

[Florin Malita]

Contact emails

fma...@chromium.org

Explainer

https://css-tricks.com/snippets/css/css-conic-gradient/

Spec

https://drafts.csswg.org/css-images-4/#conic-gradients

While Images 4 is still a WD, CSSWG has cleared conic-gradient for shipping: [1], [2].

[1] https://github.com/w3c/csswg-drafts/issues/2383

[2] https://www.w3.org/2018/03/07-css-minutes.html#item12

Summary

Conic gradients build upon existing CSS gradient/color stops syntax, and provide an angular/sweep distribution of the colors (around a given circle). They are useful for a number of effects on the Web that cannot be trivially emulated in other ways (e.g. pie charts).

Link to “Intent to Implement” blink-dev discussion

https://groups.google.com/a/chromium.org/d/msg/blink-dev/-z66SwKdklc/5t-NBchECQAJ

Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Demo link

https://leaverou.github.io/conic-gradient/

Debuggability

On par with existing CSS gradients.

Risks

Interoperability and Compatibility

Compatibility risk: minimal.  This is a new feature, but a supporting polyfill (see Activation below) has been around for a while.  Both this implementation and the polyfill are spec-compliant though, so no compatibility issues are expected.

Interoperability risk: low.  Conic gradients follow the syntactic model of existing gradients, and have been present in CSS Images 4 drafts for about 5 years, with no known/open issues in recent times.  Chromium's experimental implementation has been stable for about 1 year, and the only known issues are related to quality of rasterization on certain GPU configs.  CSSWG has recently cleared the feature for shipping, and a Safari implementation is in development.

Edge: No signals (https://developer.microsoft.com/en-us/microsoft-edge/platform/status/conicgradients/)

Firefox: No signals (https://bugzilla.mozilla.org/show_bug.cgi?id=1175958)

Safari: In development (https://webkit.org/status/#feature-conic-gradients)

Web developers: Positive. Multiple demos, articles, and supportive comments.

Ergonomics

Standalone usage, similar to other CSS gradient types.

Activation

Lea Verou's cross-platform polyfill (https://leaverou.github.io/conic-gradient/) comes in handy while other implementors catch up.

Is this feature fully tested by web-platform-tests?

Not yet: http://crbug.com/821004

Entry on the feature dashboard

https://www.chromestatus.com/feature/5706155347148800

[TAMURA, Kent]

LGTM1.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADgYMVdxHShnxO0By0gQFYheBHQGsvZkM-tjzLrAxohzm-tbnw%40mail.gmail.com.

--

TAMURA Kent
Software Engineer, Google

[Chris Harrelson]

LGTM2

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqELGoqkosM_01s6_%3DfhB%2BiQ33TjZnxH5HTh3%3DOMSOH-fA%40mail.gmail.com.

[Daniel Bratell]

LGTM3 

Please prioritize upstreaming those tests to wpt.

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8uoOJ0pziTmBb_S_E3FZkPgceBwLkNSsQ8GSKrmhadqg%40mail.gmail.com.

--

/* Opera Software, Linköping, Sweden: CET (UTC+1) */

[Florin Malita]

On Wed, Mar 14, 2018 at 5:11 AM Daniel Bratell <bra...@opera.com> wrote:

LGTM3 

Please prioritize upstreaming those tests to wpt.

Thanks, will do.

 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/op.zfuzsyt8rbppqq%40cicero2.linkoping.osa.