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

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.