Demote current browser support for display: contents to reflect catastrophic bug

[jensimmons]

Currently, Can I Use shows that display: contents is supported in many browsers — solid green for all. https://caniuse.com/#feat=css-display-contents

But, most of these implementations have a catastrophic bug, that means no one should be using it. The whole point of using display: contents is to make semantic, accessible HTML and yet still be able to apply layout as if the markup were different... markup that would be convenient for layout, but terrible for a11y. Do the good markup for a11y, apply display: contents, and get the best of both worlds. Except, at the moment, all implementations of display: contents remove the markup that has display: contents applied completely from the accessibility tree. Which is far worse for a11y. Rendering display: contents useless.

I believe that these browsers that have display: contents implemented incorrectly should get a yellow-green / 'partially implemented' box, with a note explaining the problem. Then when the problem is fixed, they can earn back the full-green, yes box.

Here's an article on the problem:
https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

Chrome's bug: https://bugs.chromium.org/p/chromium/issues/detail?id=835455
Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1455357
Webkit: https://bugs.webkit.org/show_bug.cgi?id=185679

I believe Edge is refusing to (or considering refusing to) implement display: contents until it's fixed in other browsers to help prevent web developers from using it until this bug is fixed.

[jensimmons]

This problem is fixed in Firefox 62.

[meyerweb]

I agree completely that the entries should be partial-green instead of fully-supported green, for all the reasons Jen mentioned.

[jensimmons]

Done.