Closed Bug 1481510 Opened Last year Closed Last year

:first-line fails on multiline pseudo-element

Categories

(Core :: CSS Parsing and Computation, defect)

61 Branch
defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 317081

People

(Reporter: ana.tudor.lhnh, Unassigned)

Details

Attachments

(1 file)

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.
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
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
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 :(.
Status: NEW → RESOLVED
Closed: Last year
Resolution: --- → DUPLICATE
Duplicate of bug: 317081
You need to log in before you can comment on or make changes to this bug.