Bug 104485 – Flexbox should ignore firstLine pseudo element.

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[huangxueqing]

Flexbox should ignore firstLine pseudo element.
testcase:
<style> 
	div { display: -webkit-flex;  display: -moz-flex; display: flex; } 
	div::first-line { font-size: 10em;} 
	p:first-child { -webkit-order: 1; -moz-order: 1; order: 1;}
</style>
<div>
	<p>The first item.</p>
	<p>The second item.</p>
</div>
In above case, the flex item <p>(both the firet one and the second) should ignore "font-size: 10em;"

Spec[1] said that "None of the properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements."
In addition, css2[2] define that "The :first-line pseudo-element can only be attached to a block container element."

opera 12.11, IE 10 and firefox 20 alpha have correct behavior.

[1]http://dev.w3.org/csswg/css3-flexbox/#display-flex
[2]http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo

[huangxueqing]

Created attachment 178452 [details]
patch

[Kang-Hao (Kenny) Lu]

(In reply to comment #0)
> Spec[1] said that "None of the properties defined in this module apply to the
> ‘::first-line’ or ‘::first-letter’ pseudo-elements."

Yes, but 'font-size' isn't a property defined in this module. I think the relevant prose here is this:

  # Flex containers are not block containers,...

> In addition, css2[2] define that "The :first-line pseudo-element can only be
> attached to a block container element."
> 
> [1]http://dev.w3.org/csswg/css3-flexbox/#display-flex

[huangxueqing]

(In reply to comment #2)
> (In reply to comment #0)
> > Spec[1] said that "None of the properties defined in this module apply to the
> > ‘::first-line’ or ‘::first-letter’ pseudo-elements."
> 
> Yes, but 'font-size' isn't a property defined in this module. I think the relevant prose here is this:
> 
>   # Flex containers are not block containers,...
> 
Exactly.

> > In addition, css2[2] define that "The :first-line pseudo-element can only be
> > attached to a block container element."
> > 
> > [1]http://dev.w3.org/csswg/css3-flexbox/#display-flex

[WebKit Review Bot]

Comment on attachment 178452 [details]
patch

Attachment 178452 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15223604

New failing tests:
css3/flexbox/inline-flex-ignore-firstLine.html
css3/flexbox/flex-ignore-firstLine.html
css3/flexbox/inline-flex-item-firstLine-valid.html
css3/flexbox/flex-item-firstLine-valid.html

[Build Bot]

Comment on attachment 178452 [details]
patch

Attachment 178452 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/15230647

New failing tests:
css3/flexbox/inline-flex-item-firstLine-valid.html

[huangxueqing]

Created attachment 178802 [details]
patch

It seems that font-size has different height in Chromium, i change test case use line-height to insteat it.

[WebKit Review Bot]

Comment on attachment 178802 [details]
patch

Attachment 178802 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15278156

New failing tests:
css3/flexbox/inline-flex-item-firstLine-valid.html

[WebKit Review Bot]

Comment on attachment 178802 [details]
patch

Attachment 178802 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15278181

New failing tests:
css3/flexbox/inline-flex-item-firstLine-valid.html

[huangxueqing]

Created attachment 178944 [details]
patch

[WebKit Review Bot]

Comment on attachment 178944 [details]
patch

Attachment 178944 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15280334

New failing tests:
css3/flexbox/inline-flex-item-firstLine-valid.html

[huangxueqing]

Created attachment 178965 [details]
patch

[huangxueqing]

Created attachment 179639 [details]
patch

[Tony Chang]

(In reply to comment #0)
> Flexbox should ignore firstLine pseudo element.
> testcase:
> <style> 
>     div { display: -webkit-flex;  display: -moz-flex; display: flex; } 
>     div::first-line { font-size: 10em;} 
>     p:first-child { -webkit-order: 1; -moz-order: 1; order: 1;}
> </style>
> <div>
>     <p>The first item.</p>
>     <p>The second item.</p>
> </div>
> In above case, the flex item <p>(both the firet one and the second) should ignore "font-size: 10em;"
> 
> Spec[1] said that "None of the properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements."
> In addition, css2[2] define that "The :first-line pseudo-element can only be attached to a block container element."

Are you sure that's what this is saying?  I think the spec means that you can't, e.g., do
div::first-line {
  -webkit-order: 2;
}

in an attempt to move div::first-line.  I don't see why the font-size shouldn't apply here.

[Tab Atkins]

(In reply to comment #13)
> (In reply to comment #0)
> > Flexbox should ignore firstLine pseudo element.
> > testcase:
> > <style> 
> >     div { display: -webkit-flex;  display: -moz-flex; display: flex; } 
> >     div::first-line { font-size: 10em;} 
> >     p:first-child { -webkit-order: 1; -moz-order: 1; order: 1;}
> > </style>
> > <div>
> >     <p>The first item.</p>
> >     <p>The second item.</p>
> > </div>
> > In above case, the flex item <p>(both the firet one and the second) should ignore "font-size: 10em;"
> > 
> > Spec[1] said that "None of the properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements."
> > In addition, css2[2] define that "The :first-line pseudo-element can only be attached to a block container element."
> 
> Are you sure that's what this is saying?  I think the spec means that you can't, e.g., do
> div::first-line {
>   -webkit-order: 2;
> }
> 
> in an attempt to move div::first-line.  I don't see why the font-size shouldn't apply here.

Tony is correct.  Read the line again - the properties *in this spec* don't apply to ::first-line or ::first-letter.  That just mean you can't do something like Tony's example.  

CSS 2.1's text was written before Flexbox had been created, so don't read too much into the precise term "block container element".  It's actually undefined whether ::first-line/letter should apply to a flexbox.  I'll ask on www-style.

[huangxueqing]

(In reply to comment #14)
> (In reply to comment #13)
> > (In reply to comment #0)
> > > Flexbox should ignore firstLine pseudo element.
> > > testcase:
> > > <style> 
> > >     div { display: -webkit-flex;  display: -moz-flex; display: flex; } 
> > >     div::first-line { font-size: 10em;} 
> > >     p:first-child { -webkit-order: 1; -moz-order: 1; order: 1;}
> > > </style>
> > > <div>
> > >     <p>The first item.</p>
> > >     <p>The second item.</p>
> > > </div>
> > > In above case, the flex item <p>(both the firet one and the second) should ignore "font-size: 10em;"
> > > 
> > > Spec[1] said that "None of the properties defined in this module apply to the ‘::first-line’ or ‘::first-letter’ pseudo-elements."
> > > In addition, css2[2] define that "The :first-line pseudo-element can only be attached to a block container element."
> > 
> > Are you sure that's what this is saying?  I think the spec means that you can't, e.g., do
> > div::first-line {
> >   -webkit-order: 2;
> > }
> > 
> > in an attempt to move div::first-line.  I don't see why the font-size shouldn't apply here.
> 
> Tony is correct.  Read the line again - the properties *in this spec* don't apply to ::first-line or ::first-letter.  That just mean you can't do something like Tony's example.  
> 
> CSS 2.1's text was written before Flexbox had been created, so don't read too much into the precise term "block container element".  It's actually undefined whether ::first-line/letter should apply to a flexbox.  I'll ask on www-style.

Your are totally correct, it's undefined in specs.
What i mean was that it's make no sense that flex item apply ::first-line or ::first-letter, as above example, "-webkit-order: 1" make "The first item." was not the first child of div in term of views (behind of "The second item."), it apply "font-size: 10em" was confusion. Maybe this was wrong place to discuss this problem.
Futher, for undefined things, should we make webkit consistent with mozilla, opera and IE 10?

[Tony Chang]

Comment on attachment 179639 [details]
patch

The CSS WG decided that first-line and first-letter should not apply to flex containers:
http://dev.w3.org/csswg/css3-flexbox/issues-cr-2012#issue-13

[WebKit Review Bot]

Comment on attachment 179639 [details]
patch

Clearing flags on attachment: 179639

Committed r143042: <http://trac.webkit.org/changeset/143042>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.