1824041 - Implement <color-interpolation-method> for linear-gradient (and radial gradient, etc)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Daniel Holbert [:dholbert]]

css-images-4 defines linear-gradient with an optional <color-interpolation-method> as part of the grammar:

linear-gradient() = linear-gradient(
  [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
  <color-stop-list>
)

https://www.w3.org/TR/css-images-4/#linear-gradients
https://drafts.csswg.org/css-images-4/#linear-gradients

The <color-interpolation-method> is defined in css-color-4:
https://www.w3.org/TR/css-color-4/#color-interpolation-method
https://drafts.csswg.org/css-color-4/#color-interpolation-method

and it looks like e.g. in lab or in hsl or in hsl longer (where "longer" is an optional <hue-interpolation-method> subcomponent)

Filing this bug to track this feature. Some WPT tests already exist, see bug 1784848 and https://wpt.live/css/css-images/parsing/gradient-interpolation-method-computed.html

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a testcase, expected to render some lime-to-blue gradient in all of the bordered rectangles.

The first and second gradient should render the same (the first is implicitly srgb, the second explicitly srgb). I think the others are all supposed to look different, though maybe there's some overlap.

WebKit (epiphany) renders the same gradient in each rectangle, which I suspect means they parse the interpolation method but don't actually use it? [EDIT: WebKit-in-Safari does render this properly -- see comment 3]

Chrome renders most of them clearly-differently (which is probably correct).

Firefox only renders the first one, because we don't parse this syntax yet, I think.

Comment 2

[Daniel Holbert [:dholbert]]

(This feature is required by several tests that are included in the interop-2023 suite, BTW -- see bug 1784848.)

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #1)

WebKit (epiphany) renders the same gradient in each rectangle, which I suspect means they parse the interpolation method but don't actually use it?

This^ was epiphany (aka "Web") version 42.4, powered by WebKitGTK 2.38.5
However, Safari 16.3 does seem to support this properly - they render the same varying gradients as Chrome does.

Comment 6

[Daniel Holbert [:dholbert]]

In general, please don't use Bugzilla to post links to your tools/tutorials that happen to be related to a particular bug/feature. Thanks.

(If you're posting something as a testcase for a bug, that's different of course; but that's not necessary here.)

Comment 7

[Tiaan Louw]

Implemented in Bug 1838740