RESOLVED FIXED 261847
REGRESSION(266134@main): 3D border-style have very low contrast with very dark border-color 
https://bugs.webkit.org/show_bug.cgi?id=261847
Summary REGRESSION(266134@main): 3D border-style have very low contrast with very dar...
Jeff Johnson
Reported 2023-09-20 15:45:18 PDT
Created attachment 467795 [details] Screenshot of Safari Technology Preview This bug exists in Safari Technology Preview 178 and 179. I'm not sure when exactly it was introduced. I noticed it because my own web site uses border-style groove. See the attached screenshots of https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#result from Safari, Chrome, Firefox and Safari Technology Preview. They're all basically the same, except for Safari Technology Preview with border-style groove, ridge, inset, and outset.
Attachments
Screenshot of Safari Technology Preview (39.30 KB, image/png)
2023-09-20 15:45 PDT, Jeff Johnson 		no flags
Details
Screenshot of Safari (39.33 KB, image/png)
2023-09-20 15:45 PDT, Jeff Johnson 		no flags
Details
Screenshot of Google Chrome (46.28 KB, image/png)
2023-09-20 15:46 PDT, Jeff Johnson 		no flags
Details
Screenshot of Firefox (42.38 KB, image/png)
2023-09-20 15:46 PDT, Jeff Johnson 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jeff Johnson
Comment 1 2023-09-20 15:45:42 PDT
Created attachment 467796 [details] Screenshot of Safari
Jeff Johnson
Comment 2 2023-09-20 15:46:06 PDT
Created attachment 467797 [details] Screenshot of Google Chrome
Jeff Johnson
Comment 3 2023-09-20 15:46:19 PDT
Created attachment 467798 [details] Screenshot of Firefox
Radar WebKit Bug Importer
Comment 4 2023-09-20 17:09:49 PDT
<rdar://problem/115812372>
Karl Dubost
Comment 5 2023-09-20 19:05:36 PDT
The Regression has been introduced by Bug 258725
Tim Nguyen (:ntim)
Comment 6 2023-09-21 00:43:51 PDT
I personally think the STP rendering is an improvement, since we actually respect the border-color instead of hardcoding to gray. We could probably increase the contrast of the shades a bit though.
Tim Nguyen (:ntim)
Comment 7 2023-09-21 00:54:19 PDT
Tweaking Color::lightened / Color::darkened should solve this.
Tim Nguyen (:ntim)
Comment 8 2023-09-21 01:36:28 PDT
Here's Gecko's algorithm to compute those colors: https://searchfox.org/mozilla-central/rev/077fc34d03b85b09add26b5f99f1a3a3a72c8720/gfx/wr/webrender/res/cs_border_segment.glsl#112-132
Tim Nguyen (:ntim)
Comment 9 2023-09-21 08:58:16 PDT
Pull request: https://github.com/WebKit/WebKit/pull/18022
EWS
Comment 10 2023-09-21 11:20:44 PDT
Committed 268265@main (a4497016d608): <https://commits.webkit.org/268265@main> Reviewed commits have been landed. Closing PR #18022 and removing active labels.
Karl Dubost
Comment 11 2023-09-21 15:28:48 PDT
Paper Trail To note that an issue has been opened on CSS WG. https://github.com/w3c/csswg-drafts/issues/9393
Note You need to log in before you can comment on or make changes to this bug.