285382 2025-01-04 04:06:56 -0800 Incorrect "extension" of CSS gradient with "longer hue" interpolation into regions beyond the first/last color stop 2025-06-04 22:26:13 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED InRadar P2 Normal --- 1 jfkthame simon.fraser bfulgham karlcow ntim simon.fraser webkit-bug-importer zalan oldest_to_newest 2084854 0 jfkthame 2025-01-04 04:06:56 -0800 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 2084855 1 473772 jfkthame 2025-01-04 04:07:24 -0800 Created attachment 473772 testcase describing and illustrating the bug 2086575 2 webkit-bug-importer 2025-01-11 04:07:12 -0800 <rdar://problem/142738948> 2121579 3 simon.fraser 2025-06-03 20:19:01 -0700 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. 2121580 4 simon.fraser 2025-06-03 20:24:38 -0700 This is tested by css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002.html 2121584 5 simon.fraser 2025-06-03 21:08:59 -0700 Pull request: https://github.com/WebKit/WebKit/pull/46303 2121870 6 ews-feeder 2025-06-04 22:26:11 -0700 Committed 295860@main (ae2fd930ce5b): <https://commits.webkit.org/295860@main> Reviewed commits have been landed. Closing PR #46303 and removing active labels. 473772 2025-01-04 04:07:24 -0800 2025-01-04 04:07:24 -0800 testcase describing and illustrating the bug longer-hue-extension-bug.html text/html 3128 jfkthame PCFET0NUWVBFIGh0bWw+CjxtZXRhIGNoYXJzZXQ9dXRmLTg+Cgo8c3R5bGU+CmRpdi5zd2F0Y2gg ewogIHdpZHRoOiA0MDBweDsKICBoZWlnaHQ6IDUwcHg7CiAgZm9udC1zaXplOiAwOwp9CmRpdi50 ZXN0IHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byByaWdodCBpbiBoc2wg bG9uZ2VyIGh1ZSwKICAgICAgZ3JlZW4gMjUlLAogICAgICByZWQgMjUlLAogICAgICByZWQgNzUl LAogICAgICBwaW5rIDc1JQogICk7Cn0KLnJlZiBkaXYgewogIGRpc3BsYXk6IGlubGluZS1ibG9j azsKICBoZWlnaHQ6IDEwMCU7Cn0KLnJlZiBkaXY6bnRoLWNoaWxkKDEpLCAucmVmIGRpdjpudGgt Y2hpbGQoMykgewogIHdpZHRoOiAxMDBweDsKfQoucmVmIGRpdjpudGgtY2hpbGQoMikgewogIHdp ZHRoOiAyMDBweDsKfQouZ3JlZW4gewogIGJhY2tncm91bmQ6IGdyZWVuOwp9Ci5yZWRyZWQgewog IGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIHJpZ2h0IGluIGhzbCBsb25nZXIg aHVlLCByZWQsIHJlZAogICk7Cn0KLnBpbmsgewogIGJhY2tncm91bmQ6IHBpbms7Cn0KCnAgewog IGZvbnQ6IDE4cHgvMS41IHNhbnMtc2VyaWY7CiAgdGV4dC1zaGFkb3c6CiAgICAxcHggMXB4IDFw eCB3aGl0ZSwKICAgIC0xcHggMXB4IDFweCB3aGl0ZSwKICAgIDFweCAtMXB4IDFweCB3aGl0ZSwK ICAgIC0xcHggLTFweCAxcHggd2hpdGUKICA7Cn0Kc3BhbiB7CiAgcGFkZGluZzogM3B4OwogIHRl eHQtd3JhcDogbm93cmFwOwp9Cjwvc3R5bGU+Cgo8cD5Db25zaWRlciBhIDQwMHB4IHdpZGUgYm94 IHdpdGggYSBncmFkaWVudCBkZWZpbmVkIGJ5IGZvdXIgY29sb3Igc3RvcHM6PC9wPgoKPHByZT4K ICBsaW5lYXItZ3JhZGllbnQoCiAgICB0byByaWdodCBpbiBoc2wgbG9uZ2VyIGh1ZSwKICAgICAg Z3JlZW4gMjUlLAogICAgICByZWQgMjUlLAogICAgICByZWQgNzUlLAogICAgICBwaW5rIDc1JQog ICkKPC9wcmU+Cgo8cD5Ob3RlIHRoYXQgdGhlIGZpcnN0IGRlZmluZWQgY29sb3Igc3RvcCBpcyBu b3QgYXQgdGhlIGJlZ2lubmluZyBvZiB0aGUgY29sb3IgbGluZSwKc28gYWNjb3JkaW5nIHRvCjxh IGhyZWY9Imh0dHBzOi8vZHJhZnRzLmNzc3dnLm9yZy9jc3MtaW1hZ2VzLTQvI2NvbG9yaW5nLWdy YWRpZW50LWxpbmUiPkNvbG9yaW5nIHRoZSBHcmFkaWVudCBMaW5lPC9hPiwK4oCcW2JdZWZvcmUg dGhlIGZpcnN0IGNvbG9yIHN0b3AsIHRoZSBncmFkaWVudCBsaW5lIGlzIHRoZSBjb2xvciBvZiB0 aGUgZmlyc3QgY29sb3Igc3RvcOKAnQphcHBsaWVzIHRvIHRoZSBsZWZ0bW9zdCBxdWFydGVyIG9m IHRoZSBsaW5lLgpTaW1pbGFybHksIHRoZSBsYXN0IGNvbG9yIHN0b3AgaXMgbm90IGF0IHRoZSBl bmQgb2YgdGhlIGNvbG9yIGxpbmUsIHNvCuKAnGFmdGVyIHRoZSBsYXN0IGNvbG9yIHN0b3AsIHRo ZSBncmFkaWVudCBsaW5lIGlzIHRoZSBjb2xvciBvZiB0aGUgbGFzdCBjb2xvciBzdG9w4oCdCmFw cGxpZXMgdG8gdGhlIHJpZ2h0bW9zdCBxdWFydGVyLgo8L3A+Cgo8cD5UaGUgZXhwZWN0ZWQgcmVu ZGVyaW5nLCB0aGVyZWZvcmUsIGlzIHRvIGhhdmUgYSByZWdpb24gb2YKPHNwYW4gY2xhc3M9Z3Jl ZW4+c29saWQgZ3JlZW48L3NwYW4+CmJlZm9yZSB0aGUgZmlyc3QgY29sb3Igc3RvcCBhdCAxMDBw eCwKZm9sbG93ZWQgYnkgYSBncmFkaWVudCBmcm9tIDEwMHB4IHRvIDMwMHB4CnRoYXQgY3ljbGVz IGFsbCB0aGUgd2F5IGFyb3VuZCB0aGUgSFNMIGNvbG9yIGNpcmNsZQo8c3BhbiBjbGFzcz1yZWRy ZWQ+ZnJvbSByZWQgdGhyb3VnaCBjeWFuIGluIHRoZSBtaWRkbGUgYW5kIGJhY2sgdG8gcmVkIGFn YWluPC9zcGFuPiwKYW5kIGZpbmFsbHkgYSByZWdpb24gb2YgPHNwYW4gY2xhc3M9cGluaz5zb2xp ZCBwaW5rPC9zcGFuPgpiZXlvbmQgdGhlIGxhc3QgY29sb3Igc3RvcCBhdCAzMDBweCwgbGlrZSB0 aGlzOjwvcD4KCjxkaXYgY2xhc3M9InJlZiBzd2F0Y2giPgogIDxkaXYgY2xhc3M9Z3JlZW4+PC9k aXY+CiAgPGRpdiBjbGFzcz1yZWRyZWQ+PC9kaXY+CiAgPGRpdiBjbGFzcz1waW5rPjwvZGl2Pgo8 L2Rpdj4KCjxwPkxldOKAmXMgc2VlIGhvdyB0aGUgYnJvd3NlciBhY3R1YWxseSByZW5kZXJzIHRo ZSBjb21wbGV0ZSBleGFtcGxlIGdyYWRpZW50LgpUaGlzIHNob3VsZCBsb29rIGlkZW50aWNhbCB0 byB0aGUgcmVmZXJlbmNlIGltbWVkaWF0ZWx5IGFib3ZlOjwvcD4KCjxkaXYgY2xhc3M9InRlc3Qg c3dhdGNoIj48L2Rpdj4KCjxwPlRlc3RpbmcgY3VycmVudCByZWxlYXNlIHZlcnNpb25zIG9mIEZp cmVmb3ggKDEzMyksIENocm9tZSAoMTMxKSwgYW5kIFNhZmFyaSAoMTcuNiksCmFsbCB0aHJlZSBi cm93c2VycyBtaXMtcmVuZGVyIHRoZSBleGFtcGxlLAppbXByb3Blcmx5IGFwcGx5aW5nIGEgZ3Jh ZGllbnQgZWZmZWN0IGluIHRoZSBsZWZ0LSBhbmQgcmlnaHQtaGFuZCByZWdpb25zCnRoYXQgc2hv dWxkIGp1c3QgYmUgZmlsbGVkIHdpdGggc29saWQgc3dhdGNoZXMgb2YgdGhlIGZpcnN0IGFuZCBs YXN0CmNvbG9yIHJlc3BlY3RpdmVseS48L3A+Cgo8cD5Gb3IgdGhpcyByZW5kZXJpbmcgdG8gYmUg Y29ycmVjdCwgdGhlIGdyYWRpZW50IHdvdWxkIGhhdmUgdG8gYmUgZGVmaW5lZCB3aXRoCmFkZGl0 aW9uYWwgY29sb3Igc3RvcHMgYXQgMCUgYW5kIDEwMCUsCndoaWNoIHdvdWxkIGp1c3RpZnkgYXBw bHlpbmcg4oCcbG9uZ2VyIGh1ZeKAnS1pbnRlcnBvbGF0ZWQgY29sb3JzCmJldHdlZW4gdGhlIDAl IGFuZCAyNSUgcG9zaXRpb25zLCBhbmQgYmV0d2VlbiA3NSUgYW5kIDEwMCU6PC9wPgoKPHByZT4K ICBsaW5lYXItZ3JhZGllbnQoCiAgICB0byByaWdodCBpbiBoc2wgbG9uZ2VyIGh1ZSwKICAgICAg Z3JlZW4gMCUsCiAgICAgIGdyZWVuIDI1JSwKICAgICAgcmVkIDI1JSwKICAgICAgcmVkIDc1JSwK ICAgICAgcGluayA3NSUsCiAgICAgIHBpbmsgMTAwJQogICkKPC9wcmU+Cgo8cD5UaGlzIGFwcGVh cnMgdG8gYmUgd2hhdCB0aGUgYnJvd3NlcnMgYXJlIGN1cnJlbnRseSBkb2luZyBpbnRlcm5hbGx5 LApidXQgZm9yIHRoZSBvcmlnaW5hbCBleGFtcGxlIHRoYXQgZG9lcyBub3QgaGF2ZSB0aGUgMCUg YW5kIDEwMCUgY29sb3Igc3RvcHMsCml0IGlzIGNsZWFybHkgYW4gZXJyb3IuPC9wPgo=