1904106 - [css-images] Incorrect rendering of <color-interpolation-method> on (linear|radial|conical)-gradient

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Evan Wallace [:evanw]]

Attachment: firefox-gradient-bugs.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:127.0) Gecko/20100101 Firefox/127.0

Steps to reproduce:

The work that was enabled by https://bugzilla.mozilla.org/show_bug.cgi?id=1861363 is a great start! But Firefox's support for <color-interpolation-method> on (linear|radial|conical)-gradient is still incomplete and currently has rendering bugs.

Open the attached file (firefox-gradient-bugs.html) and compare "Your browser" to "Correct".

Actual results:

Firefox's rendering of these CSS gradients doesn't match the "Correct" rendering (specifically on Firefox version 127.0.1 on macOS).

Expected results:

Firefox's rendering of CSS gradients should match other browsers (specifically Chrome and Safari both match the "Correct" rendering while Firefox doesn't). I would upload screenshots but your bug reporting tool only seems to support attaching a single file?

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report!

(In reply to Evan Wallace [:evanw] from comment #0)

I would upload screenshots but your bug reporting tool only seems to support attaching a single file?

(right, bugzilla only allows you to attach one file at a time, yeah; but you can post more attachments in additional comments; there should be an "attach new file" button above your first comment here. But no need; I can reproduce what you describe, and I can post a screenshot for convenience. I can confirm that Chrome and Safari both match the "correct" expectations in your testcase, too (though interestingly, gnome-web/epiphany [using a WebKit snapshot on Linux] fails sections 1, 2, and 3; and they look similar to Firefox's failure on sections 2 and 3, at least).

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox Nightly's rendering of reporter's testcase

Here's how the reporter's testcase looks in Firefox Nightly 129.0a1 (2024-06-20) (64-bit), on Ubuntu 22.04.

Section 1 looks nearly-correct but has a few small areas in each piece where Firefox draws a cyan color when the expectation is for a splash of rainbow. (indicated by red arrows)

And the other sections all have more-substantial mismatches

Comment 3

[Tiaan Louw [:tlouw]]

@evanw Can you share how the reference gradients were generated?

Comment 4

[Evan Wallace [:evanw]]

I generated them using some code I wrote (esbuild) that approximates modern CSS for older browsers. These specific gradients are from esbuild's CSS gradient test page: https://esbuild.github.io/gradient-tests/

Comment 5

[一丝]

@Evan Concerning “1. Rainbow using longer hue”:

In fact, previous implementations of Chrome, Firefox, and Safari were wrong.

They have recently been fixed:

• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1939948
• Chrome: https://issues.chromium.org/issues/387475844#comment2

Regarding several other test cases, Firefox 137 has been fixed. Specifically, I think @jfkthame might know in which version it was fixed.

---

There are some other bugs in the esbuild conversion, I'll submit an issue later.

Comment 6

[一丝]

Attachment: longer-hue.png

Here are the test results for Mac Firefox 137 and Mac Chrome 135.

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to 一丝 from comment #5)

Regarding several other test cases, Firefox 137 has been fixed. Specifically, I think @jfkthame might know in which version it was fixed.

Some issues with increasing/decreasing hue were fixed in Firefox 135 (bug 1934203); gradients with "longer hue" were fixed in Firefox 136 (bug 1939948, as 一丝 mentions); and Firefox's rendering for the "Premultiplied alpha" gradient was fixed a few days ago in bug 1944054 (so this fix will appear in Firefox 137).

As far as I can see, these gradients now all render correctly in both Firefox (Nightly) and Chrome (Canary). Safari (including Tech Preview) still has incorrect behavior on the "longer hue" example (see https://bugs.webkit.org/show_bug.cgi?id=285382), as does the esbuild "reference".

So I think we can resolve this as fixed at this point, or am I overlooking something further?

Comment 8

[Jonathan Kew [:jfkthame]]

Resolving as FIXED, per comment 7.