Bug 261847 - REGRESSION(266134@main): 3D border-style have very low contrast with very dark border-color
Summary: REGRESSION(266134@main): 3D border-style have very low contrast with very dar...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) Unspecified
: P2 Normal
Assignee: Tim Nguyen (:ntim)
URL:
Keywords: BrowserCompat, InRadar
Depends on: 258725
Blocks:
  Show dependency tree / graph
 
Reported: 2023-09-20 15:45 PDT by Jeff Johnson
Modified: 2023-09-21 15:28 PDT (History)
8 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Jeff Johnson 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.
Comment 1 Jeff Johnson 2023-09-20 15:45:42 PDT 
Created attachment 467796 [details]
Screenshot of Safari
Comment 2 Jeff Johnson 2023-09-20 15:46:06 PDT 
Created attachment 467797 [details]
Screenshot of Google Chrome
Comment 3 Jeff Johnson 2023-09-20 15:46:19 PDT 
Created attachment 467798 [details]
Screenshot of Firefox
Comment 4 Radar WebKit Bug Importer 2023-09-20 17:09:49 PDT 
<rdar://problem/115812372>
Comment 5 Karl Dubost 2023-09-20 19:05:36 PDT 
The Regression has been introduced by Bug 258725
Comment 6 Tim Nguyen (:ntim) 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.
Comment 7 Tim Nguyen (:ntim) 2023-09-21 00:54:19 PDT 
Tweaking Color::lightened / Color::darkened should solve this.
Comment 8 Tim Nguyen (:ntim) 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
Comment 9 Tim Nguyen (:ntim) 2023-09-21 08:58:16 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/18022
Comment 10 EWS 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.
Comment 11 Karl Dubost 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