css conic-gradient

[jsnkuhn]

Description

From spec

A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things. The gradient functions described in this section allow an author to specify such an image in a terse syntax, so that the UA can generate the image automatically when rendering the page.

Rationale

As I've been looking through the tests for other focus areas I randomly noticed that Safari seems to be failing most of the conic-gradient tests. I'm on windows so I checked caniuse (https://caniuse.com/?search=conic) a long time ago and assumed that conic-gradients were safe to use in all browsers. If support is really this bad in Safari I think there are a few projects that I'll have to go back and drop in fall back images for.

Can someone on Safari confirm that the conic-gradient tests are broken?

Specification

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

Tests

https://wpt.fyi/results/css/css-images?label=master&label=experimental&aligned&view=subtest&q=conic

[ydaniv]

From looking at the failing tests, these are not really indicating lack of support, rather it looks like minor painting issues:

A lot of pixels have values of RGB off by 1 from the expected result.

The "tiled" test has issues which are more apparent:

[foolip]

Fuzzy matching could be used to make these tests pass, assuming some small deviations are expected.

[ydaniv]

Fuzzy matching could be used to make these tests pass, assuming some small deviations are expected.

I don't think we want to. At the end of the day these later become blockers for authors for releasing products over the web platform. These are probably best kept as failing, though not sure whether this also calls for an interop candidate 🤔

[foolip]

The question is how big the differences are, are they big enough to be observable? For normalization-conic.html the maximum pixel difference is just 1, and that's a case we often use fuzzy matching for.

Making the appropriate tests fuzzy also makes it clearer if there are any big differences left.

@jsnkuhn @ydaniv do you know of issues with conic gradients that aren't related to these failing tests? As a quick check I looked for "conic-gradient safari" on Stack Overflow, but didn't find anything.

[ydaniv]

Don't know of any.

maximum pixel difference is just 1

The "tiled" test seems quite off on the edges, perhaps AA-related issues. The rest are off by 1 on each channel, perhaps less critical.

[jsnkuhn]

nope, i don't know of any other conic-gradient issues.

Did find a webkit bug open for a bunch of failing css-image tests that does include the conic-gradient tests: https://bugs.webkit.org/show_bug.cgi?id=214456

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there was only a single mention of conic-gradient, so not enough to make the top list in #248.

The response was just "conic-gradients" with no further detail.

[nairnandu]

Thank you for proposing CSS conic-gradient for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We found that the test failures in WPT are due to very minor differences in rendering, and believe this feature is already largely interoperable.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.