1852513 - Render gradients with different color interpolation methods

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, enhancement)

Description

[Tiaan Louw [:tlouw]]

CSS now supports specifying a color interpolation method for gradients (linear, radial and conical)

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

Currently WebRender only supports rendering gradients with linear sRGB interpolation.

Interpolation is still linear for each of the source components, but once converted to sRGB, they might not be linear any more.

Comment 1

[Ashley Hale [:ahale]]

How does the gfx code receive this new mode setting? Or do we need to do the plumbing for that through the Gecko to WebRender interface?

This sounds like it can either be a LUT for several stops along the gradient (to fit the curve closely) or new shader code converting the color space for each pixel (which may be slower than the LUT for SWGL on old devices that need software rendering).

Comment 2

[Tiaan Louw [:tlouw]]

The new data is stored inside the StyleGradient struct and the color interpolation is stored here:
https://searchfox.org/mozilla-central/source/__GENERATED__/layout/style/ServoStyleConsts.h#13578
Interpolation method is stored for each gradient type: linear, radial, conical.

AFAICT the data ends up here: https://searchfox.org/mozilla-central/rev/699a7704521354cac1e6a0679029c89ca899e25c/layout/painting/nsCSSRenderingGradients.cpp#1212 where the display lists are created for gradients. From there to WR, I'm not entirely sure.

As for rendering method, I think checking on how other browsers handle it might be worth it.

For an idea of what the color space conversions look like, have a look here:
https://searchfox.org/mozilla-central/rev/699a7704521354cac1e6a0679029c89ca899e25c/servo/components/style/color/convert.rs

Some of the conversions are just a few math operations, but worst case the color components go through 3-4 matrix transforms.

Comment 3

[Ashley Hale [:ahale]]

Attachment: Bug 1852513 - Propagate color-interpolation-method data for gradients from Gecko to WebRender r?gw

Comment 4

[Ashley Hale [:ahale]]

Attachment: Bug 1852513 - Use more gradient color stops for interpolation r?tlouw

Comment 5

[Ashley Hale [:ahale]]

Attachment: red to white missing components gradient in Edge

Comment 6

[Ashley Hale [:ahale]]

Attachment: red to white missing components gradient in Chrome

Comment 7

[Ashley Hale [:ahale]]

Attachment: red to white missing components gradient in Firefox with 32 stops

Comment 8

[Ashley Hale [:ahale]]

Attachment: red to white missing components gradient in Firefox with 32 stop pairs (start/end)

Comment 9

[Ashley Hale [:ahale]]

Note for those following along: I'm primarily using https://codepen.io/web-dot-dev/pen/JjBXEQL as a test for the new layout.css.gradient-color-interpolation-method.enabled code path, because it hits the most edge cases in my testing (as shown above in previous attachments).

Comment 10

[Ashley Hale [:ahale]]

Possibly related bugs that should benefit from more color stops but are out of scope for the current enablement criteria:

• https://bugzilla.mozilla.org/show_bug.cgi?id=939387
• https://bugzilla.mozilla.org/show_bug.cgi?id=1248178

Comment 11

[Ashley Hale [:ahale]]

Attachment: red to white missing components gradient in Firefox with 32 stop pairs (start/end) and some fixes

Attached the current way my patch renders the same test, almost correct.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d55b7b5e620c
Use more gradient color stops for interpolation r=tlouw,emilio

Comment 13

[Natalia Csoregi [:nataliaCs]]

Backed out for causing gradient-eval-* failures

• backout: https://hg.mozilla.org/integration/autoland/rev/6320d7617d1b38847345e9032d5feab0452bf60a
• push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&test_paths=%2Fcss%2Fcss-images%2Fgradient&revision=d55b7b5e620c02e1dae5c648e8e6e1949ac87503
• push where tier 1 fails appeared: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&selectedTaskRun=TOutcfz0TN-AVFUC6_7tGQ.0&searchStr=linux%2C18.04%2Cx64%2Cwebrender%2Copt%2Cweb%2Cplatform%2Ctests%2Ctest-linux1804-64-qr%2Fopt-web-platform-tests-reftest%2Cwr2&test_paths=%2Fcss%2Fcss-images%2Fgradient&revision=86b37d608b6dff619ef21dd6df25970d2f35504f
• failure log: https://treeherder.mozilla.org/logviewer?job_id=434670949&repo=autoland&lineNumber=12025

[task 2023-11-02T11:33:45.710Z] 11:33:45     INFO - TEST-START | /css/css-images/gradient/gradient-eval-002.html
[task 2023-11-02T11:33:45.713Z] 11:33:45     INFO - PID 18211 | 1698924825712	Marionette	INFO	Testing http://web-platform.test:8000/css/css-images/gradient/gradient-eval-002.html == http://web-platform.test:8000/css/css-images/gradient/gradient-eval-002-ref.html
[task 2023-11-02T11:33:45.925Z] 11:33:45     INFO - PID 18211 | 1698924825923	Marionette	INFO	Allowed 0-10000 pixels different, maximum difference per channel 1-2
[task 2023-11-02T11:33:45.967Z] 11:33:45     INFO - TEST-UNEXPECTED-PASS | /css/css-images/gradient/gradient-eval-002.html | Testing http://web-platform.test:8000/css/css-images/gradient/gradient-eval-002.html == http://web-platform.test:8000/css/css-images/gradient/gradient-eval-002-ref.html

Comment 14

[Ashley Hale [:ahale]]

Technically not causing failures - it caused tests to pass that previously failed, per discussion with tlouw I've removed the meta files for those tests which had been expecting failure, since we now expect them to pass.

I've refined the patch slightly to correct one other test which had pixel colors that deviated just a little too much, so it now uses 128 color stops instead of 32 to more closely follow the correct color curves, this might increase cpu usage a little on load but I doubt it will even show up on perf tests.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/910d9a3cb77f
Use more gradient color stops for interpolation r=tlouw,emilio

Comment 16

[Natalia Csoregi [:nataliaCs]]

Backed out for causing failures on css-color-4-colors-default-to-oklab-gradient.html

• backout: https://hg.mozilla.org/integration/autoland/rev/2b6cc98f762f304bdff80a83d87711e247a2ea2b
• push: https://treeherder.mozilla.org/jobs?repo=autoland&revision=910d9a3cb77f09ec36ab615e00049c4e807280dd
• failure log:
  • TEST-UNEXPECTED-FAIL | /css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html | Testing http://web-platform.test:8000/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html == http://web-platform.test:8000/css/css-images/gradient/oklab-gradient-ref.html
  • REFTEST ERROR | file:///builds/worker/workspace/build/tests/reftest/tests/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html | drawSnapshot failed: [Exception... "Data conversion failed because significant data would be lost" nsresult: "0x80460003 (NS_ERROR_LOSS_OF_SIGNIFICANT_DATA)" location: "<unknown>" data: no]

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/269afd5c7d29
Use more gradient color stops for interpolation r=tlouw,emilio

Comment 18

[Serban Stanca [:SerbanS]]

Backed out for causing wr failures in oklab-gradient.html.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | /css/css-images/gradient/oklab-gradient.html | Testing http://web-platform.test:8000/css/css-images/gradient/oklab-gradient.html == http://web-platform.test:8000/css/css-images/gradient/oklab-gradient-ref.html

Comment 19

[Ashley Hale [:ahale]]

I've updated the tests to tolerate slightly more color deviation because on MOZ_HEADLESS=1 they deviate a bit more than the current limits, but without MOZ_HEADLESS they are well within tolerances already, which is why my local test results did not match try as it uses MOZ_HEADLESS=1.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/48de4f46ad5b
Use more gradient color stops for interpolation r=tlouw,emilio

Comment 21

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43070 for changes under testing/web-platform/tests

Comment 22

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/48de4f46ad5b

Comment 23

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 24

[Brian Thomas Smith [:bsmth]]

Hi there. Is it expected that interpolation using longer cycles 360 degrees if the start and stop colors are identical? For example:

Is it expected that the following is solid red or a gradient that cycles 360 degrees?

background: conic-gradient(in hsl longer hue, 
  hsl(0, 100%, 50%), 
  hsl(0, 100%, 50%)
);

This came up because of doc fixes prompted by Nightly changes. Context here: https://github.com/mdn/content/pull/30275#issuecomment-1812051921

Comment 25

[Tiaan Louw [:tlouw]]

Thanks for reporting the issue. That is indeed a bug, but predates the gradient rendering in different color spaces, so I filed a bug for the fix here in bug 1864851

Comment 26

[Brian Thomas Smith [:bsmth]]

Super, thank you for the clarification.