Render gradients with different color interpolation methods
Categories
(Core :: Graphics: WebRender, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox121 | --- | fixed |
People
(Reporter: tlouw, Assigned: ahale)
References
Details
Attachments
(7 files)
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.
Assignee | ||
Comment 1•9 months ago
|
||
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).
Reporter | ||
Comment 2•9 months ago
|
||
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.
Assignee | ||
Comment 3•8 months ago
|
||
Updated•8 months ago
|
Assignee | ||
Comment 4•8 months ago
|
||
Assignee | ||
Comment 5•8 months ago
|
||
Assignee | ||
Comment 6•8 months ago
|
||
Assignee | ||
Comment 7•8 months ago
|
||
Assignee | ||
Comment 8•8 months ago
|
||
Assignee | ||
Comment 9•8 months ago
|
||
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).
Assignee | ||
Comment 10•8 months ago
|
||
Possibly related bugs that should benefit from more color stops but are out of scope for the current enablement criteria:
Assignee | ||
Comment 11•8 months ago
|
||
Attached the current way my patch renders the same test, almost correct.
Comment 12•8 months ago
|
||
Pushed by tlouw@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/d55b7b5e620c Use more gradient color stops for interpolation r=tlouw,emilio
Comment 13•8 months ago
|
||
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
Assignee | ||
Comment 14•7 months ago
|
||
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•7 months ago
|
||
Pushed by tlouw@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/910d9a3cb77f Use more gradient color stops for interpolation r=tlouw,emilio
Comment 16•7 months ago
|
||
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•7 months ago
|
||
Pushed by ahale@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/269afd5c7d29 Use more gradient color stops for interpolation r=tlouw,emilio
Comment 18•7 months ago
|
||
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
Assignee | ||
Comment 19•7 months ago
|
||
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•7 months ago
|
||
Pushed by ahale@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/48de4f46ad5b Use more gradient color stops for interpolation r=tlouw,emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43070 for changes under testing/web-platform/tests
Comment 22•7 months ago
|
||
bugherder |
Upstream PR merged by moz-wptsync-bot
Comment 24•7 months ago
|
||
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
Reporter | ||
Comment 25•7 months ago
|
||
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
Reporter | ||
Updated•7 months ago
|
Comment 26•7 months ago
|
||
Super, thank you for the clarification.
Description
•