[css-borders] Standardize groove/ridge/inset/outset border-color computations

[nt1m]

It would be good to standardize those.

WebKit honors the border-color and uses a specific algorithm that has contrast issues: https://bugs.webkit.org/show_bug.cgi?id=261847

Chromium does not honor the border-color afaik and hardcodes to gray.

Gecko honors the border-color and doesn't have contrast issues: https://searchfox.org/mozilla-central/rev/077fc34d03b85b09add26b5f99f1a3a3a72c8720/gfx/wr/webrender/res/cs_border_segment.glsl#140

[nt1m]

This is WebKit's current algorithm with all the issues fixed: https://searchfox.org/wubkat/rev/55805b41a3fb5e16161645372e9afc06e9ca0ca5/Source/WebCore/rendering/BorderPainter.cpp#1425

[nt1m]

I just ran into this again while trying to make my site. Here are screenshots of ridge #111:

Safari:

Chrome (they've fixed the hardcoded to gray bug):

Firefox:

@bert-github @fantasai @LeaVerou @SebastianZ (editors of CSS borders) Can we make an HTML page with a matrix of border colors (including extremes like black and white which have special cases) and see which browser has the most sensible algorithm? That can then be standardized (and bikeshed on)

For #111, seems like Safari has the worse result (due to applying double luminance for very dark colors), so WebKit might not be the 100% ideal algorithm. Firefox shows too little contrast (https://bugs.webkit.org/show_bug.cgi?id=261847 would probably filed if this was used widely). Chrome seems to have a sensible result (although the super contrasty colors kind of ruins the 3D effect).

[smfr]

This is very visible on wikipedia right now:

chrome:

safari:

firefox:

[darinadler]

So not just a theoretical concern, making the website look broken in the browsers other than the one it was tested with!

[tabatkins]

I've gone ahead and started the comparison table, at https://drafts.csswg.org/css-borders-4/ridge-borders/index.html. If someone with access to Safari could add a column for their results (and add their colors to the final column), that would be great. If we need any more color comparisons, we can add those too.

[nt1m]

@tabatkins I also started this: https://gist.github.com/nt1m/9b2d322f506f8307594deba2b827e00f#file-ridge-borders-html , feel free to upload it to the CSSWG repo.

[tabatkins]

k, it's up at https://drafts.csswg.org/css-borders-4/ridge-borders/color.html