[css-pseudo] Clearer ::first-line definition

[Loirooriol]

CSS Pseudo-Elements says

The ::first-line pseudo-element describes the contents of the first formatted line of its originating element.

The first formatted line of an element must occur inside a block-level descendant in the same flow

But which block-level descendant? The spec is so vague. It should be more clear. I tried to fill the gaps with what current implementations do, I think it would be

• A block container box which has block-level boxes inside it only has a ::first-line pseudo-element if the first in-flow block-level child is also a block container with a ::first-line. In that case, the ::first-line is nested just outside the ::first-line of that child.
• A block container box which has inline-level boxes inside it always has a ::first-line pseudo-element. The ::first-line is nested inside the block container as outermost as possible, and contains the inline-level boxes in the first line box.
• No other box has a ::first-line pseudo-element.

This would make this example more understandable: https://jsfiddle.net/oyw62a3t/

<div><p></p>Foo</div>

div { color: red; }
div::first-line { color: green; }

Since the p element contains no line, the first line of the div is Foo. However, Foo is red on Firefox, Chrome and Edge. This seems strange with the current definition, but in my proposal it becomes clear.

[fantasai]

Alright, finally got around to rewriting the ::first-line section. :) It's needed serious work for ages. Thanks for the super clear outline of what the definition should look like, it's much much better now!
https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo
Lmk if there's anything left to fix; otherwise please close out the issue~

[Loirooriol]

I don't remember the details about this issue, but my proposal looks reasonable and the edits seem good :)