693914 - :first-letter does not work for elements which have an absolutely positioned or floated child before the first letter

Status: NEW

(Core :: Layout, defect)

Description

[Andrey]

Tested on last stable (7.0.1) and last nightly build (10.0a1 (2011-10-11)).
See test case: http://jsfiddle.net/vGhUn/

First button must be uppercased and must be a red like in Chrome.

Comment 1

[Andrey]

First letter*

Comment 2

[Andrey]

Also, from http://www.w3.org/TR/CSS2/selector.html#first-letter:  If an element has ':before' or ':after' content, the ':first-letter applies to the first letter of the element including that content.

Comment 3

[:aceman]

I can see it. However notice that the letter becomes red, if you remove :position: absolute;". Maybe if position is absolute, the text is intentionally removed from the text flow and is not part of the div's content. That would be when content is not "". But when content is "", the interpretation could be different.

Comment 4

[j.j.]

aceman, NEW layout bugs should have an attached testcase. Attach one or let it UNCONFIRMED.
I haven't heard that a jsfiddle link is equivalent to that (if I'm wrong, let me know).

Comment 5

[:aceman]

Attachment: testcase

Sorry, didn't know. Attached.

Can confirm that IE8 applies the :first-letter style to 'd' in "div's".

I do not say, Firefox handles it wrongly, that is for more knowledgeable people to decide.

Comment 6

[j.j.]

Attachment: simpler testcase

Comment 7

[j.j.]

(In reply to aceman from comment #5)
> Sorry, didn't know. Attached.

No problem! Also, this kind bugs often are duplicates. Make sure you search hard before setting to NEW. There are a lot of similar bugs but I didn't find a dup here. 

If you attach a testcase, try to reduce it by removing unneeded code (but it's better to attach a unreduced testcase than none). Thanks!

Comment 8

[:aceman]

I already deleted some jsfiddle code, but didn't want to touch the reporter's code. But yes, your reduction seems to keep the original idea and bug. Thanks for streamlining it.

Comment 9

[j.j.]

Attachment: testcase without :before

Comment 10

[j.j.]

Attachment: testcase without :before

Comment 11

[j.j.]

Bah, this isn't specific to the  :before  pseudo. The same issue with an absolute positioned <span>
Seems related to bug 214004

Comment 12

[Boris Zbarsky [:bzbarsky]]

Last I checked the spec was not clear on this issue; we have explicit comments in the code saying that if we find an out-of-flow placeholder before the text we should not be applying first-letter styling...

David, what's the right behavior here?

Comment 13

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Given the sentence:

  The :first-letter pseudo-element can be used with all such elements that contain text, or that
  have a descendant in the same flow that contains text.

I think the spec is implying that :first-letter should apply in this case, though I can't say it's particularly clear on that point.

Comment 16

[Manuel Rego Casasnovas]

(In reply to David Baron [:dbaron] (UTC-8) (needinfo? for questions) from comment #13)
> Given the sentence:
> 
>   The :first-letter pseudo-element can be used with all such elements that
> contain text, or that
>   have a descendant in the same flow that contains text.
> 
> I think the spec is implying that :first-letter should apply in this case,
> though I can't say it's particularly clear on that point.

Yeah, I also understand the same thing.

From the specs (http://www.w3.org/TR/css3-selectors/#pseudo-elements):
    "The first letter must occur on the first formatted line."

Also:
    "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 out-of-flow due to floating or
    positioning)."

JFYI, this is working right (the "d" has a silver background) in WebKit 
and Blink.


On top of that, probably if span is "display: flex;" instead of 
"position: absolute;". The behavior should be the same (the "d" should
have a silver background).

From flexbox spec (http://dev.w3.org/csswg/css-flexbox/#flex-containers):
    "the ::first-line and ::first-letter pseudo-elements do not apply to
    flex containers, and flex containers do not contribute a first
    formatted line or first letter to their ancestors"

FWIW, this part is not working as expected in WebKit/Blink yet.