317081 - :first-line pseudo-element not applied to first in-flow block descendant

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Gary Turner]

User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7

When using :firt-line pseudo child on a block element where the first line occurs in the first child (a block element), the firat-line rules are not applied to the child.

Reproducible: Always

Steps to Reproduce:
1.Make a block element where :first-line style rules are attached. Eg.,
div:first-line {}
2.In html, make a block element the first child,
<div>
  <p>this is a first line.</p>
</div>
3.

Actual Results:  
The first line rules are ignored, and default values used.

Expected Results:  
:first-line rules should apply to the firat line of p.

Results are same in 1.5b1, Mozilla/5.0(X11; U; Linux i686; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4

test case:
<style type="text/css">
ul:first-line,
div:first-line {
    color: green;
    }

.control:first-line {
    color: red;
    }
</style>
=======
  <ul>
    <li>xyz</li>
    <li>xyz</li>
    <li class="control">xyz</li>
  </ul>
  <div>
    <p>xyz</p>
    <p class="control">xyz</p>
  </div>
=================
From http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo
The "first formatted line" of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first line of the DIV in <DIV><P>This line...</P></DIV> is the first line of the P (assuming that both P and DIV are block-level).

Comment 1

[Gary Turner]

Attachment: minimal test case

Comment 2

[Boris Zbarsky [:bzbarsky]]

Note that this changed from CSS2 to CSS2.1.

Comment 3

[Gary Turner]

(In reply to comment #2)
> Note that this changed from CSS2 to CSS2.1.
> 
Will you pleases expand on that?  What is the significence?  Shouldn't http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo apply?

Comment 4

[bluepheasant]

Note that webkit passes the test case. 

Implement this could be usefull for webdeveloppers, for example instead of doing
ul > li:first-child {} we could simply do ul::first-line {}.

Comment 5

[Boris Zbarsky [:bzbarsky]]

> Will you pleases expand on that?  What is the significence?

None, other than that we implement the CSS2 definition of ::first-line so far.  That means no nested ::first-lines and not nesting the outer first-line into block kids...

At some point we basically need to rewrite first-line from scratch to do what css2.1 is asking for.

Comment 6

[Marko Mrdjenovic]

Wondering if this will get looked at any time soon now that CSS 2.1 is a W3C recommendation...

Comment 7

[Gérard Talbot]

URL set to
http://test.csswg.org/suites/css2.1/latest/html4/first-line-selector-004.htm

Bug summary set to:
:first-line pseudo-element not applied to first in-flow block descendant

(In reply to bluepheasant from comment #4)

> (...) for example instead of doing
> ul > li:first-child {} we could simply do ul::first-line {}.

We have at least 1 test on this:
http://test.csswg.org/suites/css2.1/latest/html4/first-line-selector-015.htm

Comment 8

[Gérard Talbot]

The issue exists under Firefox 17.0.1, buildID = 20121129151900, under Linux KDE 4.9.4, i686 (32bits)

Confirming and marking as NEW

Comment 9

[Arkadiusz Michalski (Spirit)]

I recall only that this bug still exist, checked Firefox Nightly 29. I see that Chrome 32 have the same problem, but IE11 no.

Btw I want submit another bug for ::firt-line. Selectors Level 3 and CSS 2.1 said:

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line "Hello".  

But in Firefox (and IE) inline-block for parent will match, only Chrome works without this bug.  

I make two test case, when Firefox has bugs:

<!DOCTYPE html>
<html>

<head>

	<style>

		div {border: 5px solid green; margin-top: 5px; width: 630px}

		.block::first-line {color: blue;}
		.block p::first-line {font-weight: bold;}

	</style>

</head>

<body>

	<div class="block">
		<p>First line in DIV and P at the same time (blue and bold).</p>	<!-- Bug in Firefox and Chrome -->
		<p>First line in P (bold, without blue).</p>
	</div>

	<div class="block">First line in DIV (blue)
		<p style="display: inline-block;">	<!-- Bug in Firefox and IE -->
			First line in P with inline-block (only bold, not blue)<br>
			Second line in P after BR (without bold and without blue)
		</p>
		still first line in DIV<br>
		This should be second line in DIV (without bold and without blue).
	</div>

</body>

</html>

I don't check this behaviour for other dispaly type, like table-cell. First line (without any characters), inheritance (when some part of real element nested in pseudoelement) and other things looks like correct.

Comment 10

[Boris Zbarsky [:bzbarsky]]

> Btw I want submit another bug

Then please submit another bug....

Comment 12

[ilya.streltsin]

I'm not sure which behavior is correct in the second case in Arkadiusz's example: the spec says that the first line of the inline-block can't *count as* the first formatted line of its block ancestor, but it also doesn't say that the inline-block should necessary be *excluded* from the first line of the ancestor. The inline-block as a whole belongs to the first line box of the parent block, so why couldn't it _inherit_ its style?

But the fact that this bug (shown in the first example) has existed for 13 years and is still "new" is depressing. Is it really so hard to fix?

Comment 15

[Emilio Cobos Álvarez (:emilio)]

My draft patch in bug 1465474 fixes this, so will set it as a dependency tentatively, if I ever get to finish it.

Comment 16

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is relatively low, S3. However, the bug has 3 duplicates.
:emilio, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.