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

NEW
Unassigned

Status

()

13 years ago
a month ago

People

(Reporter: gary.kk5st, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 4 bugs, {testcase})

1.0 Branch
testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

13 years ago
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).
(Reporter)

Comment 1

13 years ago
Created attachment 203621 [details]
minimal test case

Updated

13 years ago
Assignee: nobody → dbaron
Component: General → Style System (CSS)
Keywords: testcase
Product: Firefox → Core
QA Contact: general → ian
Version: unspecified → 1.0 Branch
Note that this changed from CSS2 to CSS2.1.
(Reporter)

Comment 3

13 years ago
(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

11 years ago
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 {}.
> 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

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

Comment 7

6 years ago
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
Summary: ::first-line does not collapse to first block child → :first-line pseudo-element not applied to first in-flow block descendant

Comment 8

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

Confirming and marking as NEW
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 98 → All
Hardware: x86 → All
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.
> Btw I want submit another bug

Then please submit another bug....
Blocks: 1119676
Duplicate of this bug: 1351595

Updated

11 months ago
Blocks: 1443969

Comment 12

6 months ago
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?
Duplicate of this bug: 1481510
Depends on: 1465474
My draft patch in bug 1465474 fixes this, so will set it as a dependency tentatively, if I ever get to finish it.
You need to log in before you can comment on or make changes to this bug.