967231 - ::before styles override ::first-line styles

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[Koen Kivits]

Attachment: testfirstline.html

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.

Comment 1

[Boris Zbarsky [:bzbarsky]]

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>.

Comment 2

[Boris Zbarsky [:bzbarsky]]

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

[Koen Kivits]

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.

Comment 4

[Boris Zbarsky [:bzbarsky]]

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

[Ilya]

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.

Comment 6

[Boris Zbarsky [:bzbarsky]]

> The ::first-line rules aren't applied to the 2nd and 4th divs

That's bug 317081, yes.