When an inline element is the parent of block level elements there is an issue with outlines having an inconsistent behavior between UA and author-created values. I believe that this is based on how inline elements work with anonymous blocks.
In this case, outline-style is set to anything other than auto the outline isn’t visible when assigned, whether it’s on focus or not. This is because user-authored styles only apply to the anonymous boxes, whereas the UA styles apply to the whole inline element. See this codepen demo to see the difference. As expected, setting the inline element to inline-block also fixes the issue outline visibility issue, but there are times when the author might not have the ability to edit that.
I believe this is an interoperable issue and that author-created values should have the same behavior as UA, in that users should be able to set the outline-color and outline-style.
When an
inlineelement is the parent ofblocklevel elements there is an issue with outlines having an inconsistent behavior between UA and author-created values. I believe that this is based on how inline elements work with anonymous blocks.In this case,
outline-styleis set to anything other thanautothe outline isn’t visible when assigned, whether it’s on focus or not. This is because user-authored styles only apply to the anonymous boxes, whereas the UA styles apply to the whole inline element. See this codepen demo to see the difference. As expected, setting theinlineelement toinline-blockalso fixes the issue outline visibility issue, but there are times when the author might not have the ability to edit that.I believe this is an interoperable issue and that author-created values should have the same behavior as UA, in that users should be able to set the
outline-colorandoutline-style.