Bug 261847

Summary:

REGRESSION(266134@main): 3D border-style have very low contrast with very dark border-color

Product:

WebKit

Reporter:

Jeff Johnson <opendarwin>

Component:

Layout and Rendering

Assignee:

Tim Nguyen (:ntim) <ntim>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

akeerthi, bfulgham, karlcow, ntim, simon.fraser, vitaly, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=258725

Bug Depends on:

258725

Bug Blocks:

Attachments:

Description	Flags
Screenshot of Safari Technology Preview	none
Screenshot of Safari	none
Screenshot of Google Chrome	none
Screenshot of Firefox	none

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