focus-visible styles do not match browsers.

[emilio]

https://html.spec.whatwg.org/#phrasing-content-3 has:

:focus-visible { outline: auto }

Which expands to:

:focus-visible {
  outline-color: currentColor;
  outline-style: auto;
  outline-width: medium; /* Effectively 3px */
}

But that doesn't match browsers. Gecko is the closest:

https://searchfox.org/mozilla-central/rev/7e34cb7a0094a2f325a0c9db720cec0a2f2aca4f/layout/style/res/ua.css#166-168

:focus-visible {
  outline: 1px auto;
}

Chromium has:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=1164;drc=ee67ee8e3ec9423a38f983787945fc24a8f01cf8

:focus-visible {
  outline: auto 1px -webkit-focus-ring-color;
}

WebKit has:

https://searchfox.org/wubkat/rev/04d104d7176e293d46980abffc6b2e2fe310a343/Source/WebCore/css/html.css#1249-1255

:focus-visible {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    outline: auto 3px -webkit-focus-ring-color;
#else
    outline: auto 5px -webkit-focus-ring-color;
#endif
}

Would there be any interest of harmonizing this? -webkit-focus-ring-color is a non-standard system color, which could be stadardized e.g., in w3c/csswg-drafts#5900.

Note that I don't think this causes serious compat issues in the wild, but I think it would be nice to be interoperable here. Someone filed a bug on the lack of interop here.

What's the reason for the different border widths in WebKit @smfr?

cc @lilles / @tabatkins / @whatwg/css