[css-backgrounds] Clarification proposal for border colors

The border style spec (http://dev.w3.org/csswg/css-backgrounds/#the-border-style) is implemented in probably all browsers and has being around for quite a long time.

I observed that the description of the behavior for 'groove’ value (and the complementary 'ridge') is a bit vague about what the UA is
supposed to do.

Quoting: "Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly
lighter and darker than the ‘border-color’.)"

I think the 'two colors' part could be more descriptive.

What if we changed it to be clearer and write something like:
“The light color should be a percentage of the darker color, between 20% to 50% of its absolute value. And the darker color a percentage in a range of 70% to 90% of border color."

Another issue is that the behavior for black border could be explicit. I think we could follow up with: "In case the border color is black, a shade of gray must be used as the lighter color."

When I faced this issue last December, the following web engines would fail to display a styled black border properly (i.e. would only render a solid black border): WebKit, Blink, Servo.

This issue in the spec has been previously raised by Simon Sapin in:
https://lists.w3.org/Archives/Public/www-style/2013May/0529.html

Finally, we could suggest an algorithm to make it easier for browser implementors to have a defined behavior, as follows:

"
Here is an algorithm example that you *may* use:
- if color different from zero: scale original border color by 1/3 for
lighter and 2/3 for darker color.
- In case the color is black, fix channel colors as 30% and 70% of
platform definition of black.
“

This would make the spec clearer and the suggested range for light/darker color would be compatible with the following engines:
Firefox, IE, Opera (pre-Blink), Servo (probably WebKit too, but if it is not, I can fix it pretty easily).

The suggested algorithm could be used by implementors willing to make changes.

For reference, I fixed both Servo (https://github.com/servo/servo/pull/4324/files), WebKit (https://bugs.webkit.org/attachment.cgi?id=242456&action=prettypatch) and offered a patch for Blink (https://codereview.chromium.org/759373002/).

The Blink fix was denied based on ‘…I think the question is whether we want to change from one behavior to another when there's no spec for it…'

As far I can tell, the only browser that won't render a grooved black border element is Chrome/Blink. Safari nightly should be ok as it has the fix mentioned before (same goes for servo).

For a test case, please check;
http://codepen.io/Savago/pen/wBKRaX


Best regards


Adenilson Cavalcanti