[css-pseudo] ::first-line and line-height #2282

Specs: https://www.w3.org/TR/css-pseudo-4/#first-line-pseudo

The part of the specs related to the issue raised:

The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:

- all font properties (see [CSS3-FONTS])
- the color and opacity properties (see [CSS3COLOR])
- all background properties (see [CSS3BG])
- any typesetting properties that apply to inline elements (see [CSS3TEXT])
- all text decoration properties (see [CSS3-TEXT-DECOR])
- any inline layout properties that apply to inline elements (see [CSS3LINE])
- any other properties defined to apply to ::first-line by their respective specifications

I'm opening this ticket because I've recently used the ::first-line pseudo element and realized that the line-height property for that pseudo element:

• is implemented in a different way in each browser
• doesn't behave as I was expecting (inline VS block)

A short code sample to explain: https://codepen.io/OxyDesign/pen/bc9238f85b871ba1059bc43c953c7a46
(The pseudo element ::first-line has a smaller line-height)

• Chrome (63) applies the reduced line-height
• Firefox (58) doesn't apply the reduced line-height
• Safari (10) applies the reduced line-height but only if the line is not broken with a <br>, in that case it doesn't apply the reduced line-height
• Internet Explorer (I could only have a quick look at 9, 10 and 11) seems to follow the same logic as Chrome

So that might not be really clear on that point because each browser seems to have its own interpretation.

The second point is that the specs says that it should "behaves similar to that of an inline-level element". I was expecting this to behave as a block-level element. I understand that ::first-letter should behave as an inline-element as it's part of the text content of a block and is just a part of the line. But ::first-line is clearly supposed to use the whole width available. Anything that is on this line is included in the ::first-line definition, therefore should behave like a block in my humble opinion.

The code samples shows that the first line has a smaller font-size, so indeed I wanted to apply a smaller line-height which is not applied by FF and (partially) by Safari because as an inline-level element it shouldn't. But I think this behavior would make only sense for the ::first-letter as it's part of a line and we don't want the line to be shrink by the ::first-letter's line-height. But in the ::first-line case there is no possibility that any other content would be in the same line without being a part of the ::first-line pseudo element so that shouldn't behave like that I think.