1481510 - :first-line fails on multiline pseudo-element

Status: RESOLVED DUPLICATE of bug 317081

(Core :: CSS Parsing and Computation, defect)

Description

[Ana Tudor]

Attachment: expected result & what we get in Chrome, Edge (left) vs. actual result in Firefox (right)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180621125625

Steps to reproduce:

1. Put some text in a pseudo-element.

div { counter-increment: c }

div:before { content: "step " counter(c,decimal-leading-zero) }

2. Set the pseudo-element's display to block and restrict its width.

3. Set some different styles for the :first-line of the div.

div:first-line {
  color: red;
  font: 0.5em trebuchet ms, sans-serif;
}




Actual results:

The :first-line styles are ignored in Firefox (other browsers do not have this issue).

Note that if we set display: inline-block, the color set for the :first-line is applied but not the font-size set inside the same block.

Live test https://codepen.io/thebabydino/pen/GBXoWb


Expected results:

The :first-line styles should have been applied on the first line of the multiline :before pseudo-element, as it happens in Chrome and Edge.

Comment 1

[Abe - QA (:Abe_LV)]

This is reproducible using the live test page.  Firefox  has a different result than Chrome and Edge

Test environment:
----------------
Version 	63.0a1
Build ID 	20180810100128
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This is bug 317081. If you have ::before as a block it creates it's own first-line, disregarding the one from the parent.

If you set it as an inline-block we behave correctly: the style tree would be element -> ::first-line -> ::before, and thus the font-size on the ::before pseudo-element overrides the font-size of the ::first-line.

Chrome doesn't apply ::first-line on inline-blocks, and Edge recently removed their support, see all the funny test-cases in bug 1465474.

In any case, I plan to hopefully eventually get to bug 1465474, which would align us a bit more with WebKit and Chrome in this regard, probably fixing this test-case and bug 317081.

Sorry this bit you, but ::first-line is a whole mess both interop-wise and spec-wise :(.