RESOLVED FIXED 285382
Incorrect "extension" of CSS gradient with "longer hue" interpolation into regions beyond the first/last color stop 
https://bugs.webkit.org/show_bug.cgi?id=285382
Summary Incorrect "extension" of CSS gradient with "longer hue" interpolation into re...
Jonathan Kew
Reported 2025-01-04 04:06:56 PST
See attached example and description. The CSS spec[1] is clear that when coloring a gradient, > Before the first color stop, the gradient line is the color of the first color stop, and after the last color stop, the gradient line is the color of the last color stop. Therefore, if the first color stop is not at (or before) zero, there will be a region of solid color from the beginning of the gradient line to the first color stop, using the color of that first stop. Similarly, if the last color stop falls before the end of the gradient line, there will be a region of solid color at the end. However, when using "longer hue" interpolation, webkit renders such cases incorrectly, applying unwanted interpolation in these regions that should have solid first or last color. (See also Gecko issue https://bugzilla.mozilla.org/show_bug.cgi?id=1939948 and Blink issue https://issues.chromium.org/issues/387475844.) [1] https://drafts.csswg.org/css-images-4/#coloring-gradient-line
Attachments
testcase describing and illustrating the bug (3.05 KB, text/html)
2025-01-04 04:07 PST, Jonathan Kew 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jonathan Kew
Comment 1 2025-01-04 04:07:24 PST
Created attachment 473772 [details] testcase describing and illustrating the bug
Radar WebKit Bug Importer
Comment 2 2025-01-11 04:07:12 PST
<rdar://problem/142738948>
Simon Fraser (smfr)
Comment 3 2025-06-03 20:19:01 PDT
This happens because we follow the "longer hue" logic at https://www.w3.org/TR/css-color-4/#hue-longer for the 0-25% range and the 75% to 100% ranges as well as the stops in between (code in `interpolateColorComponents()`). I'm a little surprised that going from red to red with `longer hue` hits all the colors, but that's what other browsers do.
Simon Fraser (smfr)
Comment 4 2025-06-03 20:24:38 PDT
This is tested by css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002.html
Simon Fraser (smfr)
Comment 5 2025-06-03 21:08:59 PDT
Pull request: https://github.com/WebKit/WebKit/pull/46303
EWS
Comment 6 2025-06-04 22:26:11 PDT
Committed 295860@main (ae2fd930ce5b): <https://commits.webkit.org/295860@main> Reviewed commits have been landed. Closing PR #46303 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.