The default bug view has changed. See this FAQ.

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

NEW
Unassigned

Status

()

Core
CSS Parsing and Computation
12 years ago
2 years ago

People

(Reporter: Gary Turner, Unassigned)

Tracking

(Blocks: 2 bugs, {testcase})

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

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

12 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

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

Updated

12 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

11 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?
Assignee: dbaron → nobody
QA Contact: ian → style-system

Comment 4

9 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.
Blocks: 605520

Comment 6

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

Comment 7

4 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

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

Updated

2 years ago
Blocks: 1119676
You need to log in before you can comment on or make changes to this bug.