[css-ui][css-pseudo] clarify outline's behavior on pseudo elements

[mattdrose]

https://drafts.csswg.org/css-ui-4/#outline-props

The outlines spec isn't clear when it comes to pseudo elements. This means that behaviour differs greatly between browsers.

Safari: Outline doesn't affect pseudo elements
Firefox: Outline will expand to include pseudo elements
Chrome: Outline will only include pseudo elements when: 1) the block is relative 2) the outline-style is auto

Codepen example: https://codepen.io/mattdrose/pen/OreqYg

I especially find Chrome's behaviour odd, and thus opened an issue. Triaging is difficult, however, since the spec is so loose on expected behaviour—you can't detect what is and isn't a bug.

I know this isn't the only issue of it's kind (outlines affect on descendant's also varies is also inconsistent). I personally believe that narrowing down outlines affect on pseudo elements and descendants would help browsers, developers, and end users alike.

[Loirooriol]

I don't think tree-abiding pseudo-elements should be treated in any special way. In your example you use position: absolute, some browsers render the outline ignoring out-of-flow descendants and some render it bigger. The exact behavior is undefined, but should be the same whether you have a pseudo-element or a normal descendant.

[mattdrose]

That makes sense to me. In which case, this can be closed in light of #2846.