[css-lists][css-pseudo] Interaction of ::marker and ::first-line

[Loirooriol]

CSS Lists defines ::marker as

Markers are placed at the beginning of their originating element’s content, before the ::before pseudo-element (if it exists). ::marker pseudo-elements are inline by default, though certain values for list-style-position on the list item can make the marker box positioned, which can have an effect on the computed value of display.

This seems to imply that, as inline content, ::marker is inside ::first-line by default.

But I did a test (https://jsfiddle.net/x6416ote/) and browsers don't do this.

ul { color: red; list-style: inside }
li::first-line { color: green; background: yellow }

• All Firefox, Chrome and Edge paint the marker with red color. It does not inherit green color from li::first-line despite theoretically being an inline content at the beginning of the li.
• On Firefox, the yellow background starts after the bullet. So it seems what happens is that the bullet is always treated as out-of-flow, and thus is not inside ::first-line.
• On Chrome and Edge, the yellow background starts before the bullet. So it seems the bullet is inside ::first-line despite not inheriting from it.
• Interestingly, on Edge, the marker has green color when it has list-style-position: outside, despite theoretically being an out-of-flow content and the yellow background starting after the bullet.

[Loirooriol]

Inheritance for a ''::marker'' pseudo-element ignores any ''::first-line'' styles

@fantasai But what if you use ::first-line { background: yellow }, does the yellow area cover the marker?

[Loirooriol]

BTW, seems I forgot I filed this issue and filed a duplicate, which has more discussion: #4506

@MatsPalmgren had some complaints against excluding the ::marker in ::first-line