HTML spec has CSS rule that is arbitrary and doesn't match reality: table, td, th { border-color: gray; }

[dholbert]

The HTML spec requires the following CSS rule for table rendering:

table, td, th { border-color: gray; }

https://html.spec.whatwg.org/multipage/rendering.html#tables-2

However, in practice, no browser actually implements that. Testcase:
https://bug1530048.bmoattachments.org/attachment.cgi?id=9046083

Observations from viewing that testcase in various engines:

• Firefox, Edge, and IE don't have any version of that rule (in standards mode[1]) -- they leave border-color at its initial value (currentcolor, i.e. black) for table, td, and th.
• Chrome and Safari seem to apply that HTML rule for table, but not for td or th, which makes for weird/inconsistent results if you make borders show up on all of these elements as shown in my testcase.

Perhaps we should just remove this rule from the spec, because nobody implements it as-written? I imagine it was for backwards-compatibility at some point, but clearly the web doesn't depend on it.

[1] Note: Firefox technically has a more-extreme version of the HTML spec's rule, but it only applies in quirks mode.

[dholbert]

Here's a slightly more comprehensive test:
https://bug1530048.bmoattachments.org/attachment.cgi?id=9046453

In this testcase:

• I'm using a non-default color:teal declaration, to make it easier to see where we're using currentColor (which is the initial value for border-color).
• I'm testing border-style:solid and also* border-style:inset and outset (the more traditional table border styles).
• I'm testing a case with explicit border-color:pink to see if that's honored (it is, in all browsers I tested).

This testcase clearly demonstrates the following:

• Firefox, Edge, and IE11 all have the default border-color: currentColor behavior for the table borders here -- no special UA-stylesheet rule, and no magic behavior.
• Chrome and Safari, in contrast, do have a UA-stylesheet rule (but not the one from the HTML5 spec), and they do have some magic behavior:
  -- Their UA stylesheet rule is table { border-color: grey} (shown in Chrome's devtools).
  -- And the magic behavior has to do with how they resolve the initial border-color value on their td and th elements. If the td or th has border-style:solid or dashed or dotted (as shown in top part of the testcase), then they use the actual current CSS color value, as you would expect. But if the element has border-style:inset or outset, then they use a very light grayish color (not literally gray but the much-lighter rgb(238, 238, 238)) for no clear reason.

[dholbert]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=935708 and https://bugs.webkit.org/show_bug.cgi?id=195015 on the Chrome/Safari (Blink/WebKit) magic behavior for td and th border coloring.

[dholbert]

...and I filed https://bugs.chromium.org/p/chromium/issues/detail?id=935729 and https://bugs.webkit.org/show_bug.cgi?id=195016 to remove the Chrome/Safari (Blink/Webkit) table { border-color: grey } UA stylesheet rule, assuming that this spec change is agreed upon.

And I'll plan on removing Firefox's quirks-mode-specific [all table parts] { border-color:gray } rule in https://bugzilla.mozilla.org/show_bug.cgi?id=1530048 .

[annevk]

So assuming the other implementers do not object, all that remains here is removing table, td, th { border-color: gray; }? Did you write web-platform-tests by any chance?

[dholbert]

So assuming the other implementers do not object, all that remains here is removing table, td, th { border-color: gray; }?

That's the only change I'm aware of needing here, yeah.

Did you write web-platform-tests by any chance?

Not yet, but I'm planning on including some in https://bugzilla.mozilla.org/show_bug.cgi?id=1530048

[dholbert]

Here are my WPT testcases:
standards-mode testcase: https://dholbert.github.io/tests/tables/table-border-3s.html
quirks-mode testcase: https://dholbert.github.io/tests/tables/table-border-3q.html

reference case: https://dholbert.github.io/tests/tables/table-border-3-ref.html

(As far as I know, these standards/quirks-mode testcases only differ from each other in current Firefox (until I land bug 1530048). No other browser cares about quirks vs. standards mode here.)

[annevk]

Thanks for taking care of all the hard work @dholbert! If anyone wants to take on a PR against the HTML Standard source resource, it should be relatively straightforward to remove the line of CSS mentioned in #4391 (comment).

[dholbert]

I posted a pull request to remove this rule -- it's #4398. Hopefully I did things right -- @annevk, let me know if there's anything else I should do.