::before styles override ::first-line styles




5 years ago
3 years ago


(Reporter: koen, Unassigned)


29 Branch
Windows 7

Firefox Tracking Flags

(Not tracked)



(1 attachment)



5 years ago
Created attachment 8369662 [details]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140203030203

Steps to reproduce:

Given an element <div id="test">, apply the following CSS:

#test {
    color: green;
#test::before {
    content: "this should be red";
    color: blue;
#test::first-line {
    color: red;

I'm experiencing the issue in both the current nightly (29.0a1) and the current stable version (26).
I have attached a complete HTML file for easy testing.

Actual results:

The text "this should be red" is displayed in blue.

Expected results:

The text "this should be red" should be displayed in red.

::first-letter works just fine if used in this scenario instead of ::first-line.
IE — at least versions 10 and 11 — seems to have the same issue. Chrome displays the text correctly.
Per spec, the behavior of ::before should be exactly the same as the behavior of a span.  So the behavior should be the same as this testcase:

  <div id="test"><span>this should be red</span></div>

with this CSS:

  #test { color: green; }
  #test > span { color: blue; }
  #test::first-line { color: red }

This is styled blue in all browsers I have on hand.  Firefox and IE correctly treat the ::before case identically to this case.  Chrome does something broken with ::before, unfortunately.  Please do report the bug to them.

> ::first-letter works just fine if used in this scenario instead of ::first-line.

::first-letter goes inside child elements; this is very clearly described at 
<http://www.w3.org/TR/CSS21/selector.html#first-letter>.  You can see that if you replace the ::before with a <span> that has exactly the styles and content of the ::before.  Again, such a replacement is supposed to produce exactly the same rendering; if it doesn't, the browser in question is buggy.

But ::first-line goes _around_ child elements.  This is also very clearly described at <http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo>.
Last Resolved: 5 years ago
Resolution: --- → INVALID
Oh, and thank you for the clear bug report and clear testcase!  It made it very easy to see what was going on here, and is very much appreciated.

Comment 3

5 years ago
Thank *you* for taking the time to explain this! I reread the relevant parts of the spec and you are absolutely right. Will report the bug to Chrome.
For what it's worth, I reported https://code.google.com/p/chromium/issues/detail?id=340414 but I bet WebKit needs a bug report too... :(

Comment 5

3 years ago
Boris, if the kind of element, not the type of its generated box, is what determines the behavior of ::first-line styling, why is the same ::before treated differently in this example: http://codepen.io/SelenIT/pen/MyaBjw?editors=1100? The ::first-line rules aren't applied to the 2nd and 4th divs, although the only difference is that they have display:block for their span and ::before 'children', respectively. It is clearly not out-of-flow and doesn't fall into exceptions like table-cells or inline-blocks (https://drafts.csswg.org/css-pseudo-4/#first-text-line). So, per your explanation, I expect either the examples treating the same, either inverting the fictional nesting for both elements with display:block 'children'.

Chrome seems to do the latter for span {display:block}, but not for ::before {display:block}.

Given that CSS2.2 defines the "block-level elements" as "elements of the source document that are *formatted visually* as blocks" (https://drafts.csswg.org/css2/visuren.html#block-boxes), I suppose that the behavior of Chrome is correct in case of the span elements. It's arguable whether it's formally incorrect in case of ::before since ::before is not the "element *of the source document*". But the behavior of Firefox in case of span { display:block } and ::before { display:block } seems to contradict the spec.
> The ::first-line rules aren't applied to the 2nd and 4th divs

That's bug 317081, yes.
You need to log in before you can comment on or make changes to this bug.