Bug 138424 - first-letter pseudo-element from ancestors is not being ignored in grids and flexboxes
Summary: first-letter pseudo-element from ancestors is not being ignored in grids and ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Manuel Rego Casasnovas
URL:
Keywords:
Depends on:
Blocks: 60731 62048
  Show dependency treegraph
 
Reported: 2014-11-05 08:28 PST by Manuel Rego Casasnovas
Modified: 2015-01-21 02:03 PST (History)
9 users (show)

See Also:


Attachments
Test case to reproduce the issue (301 bytes, text/html)
2014-11-05 08:28 PST, Manuel Rego Casasnovas
no flags Details
Patch (7.26 KB, patch)
2014-11-05 08:40 PST, Manuel Rego Casasnovas
no flags Details | Formatted Diff | Diff
Patch (23.70 KB, patch)
2015-01-09 15:57 PST, Manuel Rego Casasnovas
no flags Details | Formatted Diff | Diff
Patch (26.83 KB, patch)
2015-01-21 01:20 PST, Manuel Rego Casasnovas
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Manuel Rego Casasnovas 2014-11-05 08:28:39 PST
Created attachment 241028 [details]
Test case to reproduce the issue

From the grid and flexbox specs:
"the ::first-line and ::first-letter pseudo-elements do not apply to grid/flex containers"

The ::first-letter pseudo-element is being ignored when it's defined directly in the grid/flex. However if it was defined by an ancestor is not ignored.

Attaching an example file to reproduce the issue.

However the ::first-line pseudo-element is working as expected.

This has been already fixed in Blink (see https://codereview.chromium.org/686173006/).
Comment 1 Manuel Rego Casasnovas 2014-11-05 08:40:05 PST
Created attachment 241029 [details]
Patch
Comment 2 WebKit Commit Bot 2014-11-05 08:42:32 PST
Attachment 241029 [details] did not pass style-queue:


ERROR: Source/WebCore/rendering/RenderBlock.cpp:3212:  Multi line control clauses should use braces.  [whitespace/braces] [4]
ERROR: Source/WebCore/rendering/RenderBlock.cpp:3217:  Weird number of spaces at line-start.  Are you using a 4-space indent?  [whitespace/indent] [3]
Total errors found: 2 in 7 files


If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 3 Manuel Rego Casasnovas 2014-11-18 07:46:54 PST
Please, could someone take a look to this patch? Thanks!
Comment 4 Benjamin Poulain 2014-12-02 14:00:38 PST
Comment on attachment 241029 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=241029&action=review

> Source/WebCore/ChangeLog:9
> +        "the ::first-line and ::first-letter pseudo-elements do not apply to

You mention both ::first-line and ::first-letter, but only have tests for ::first-letter.
Is there good coverage for ::first-line? If there is, it would be good to mention it in the changelog.

> Source/WebCore/rendering/RenderBlock.cpp:3217
> +             return;

It is not obvious to me why an early return would be correct here.

For example, isFloatingOrOutOfFlowPositioned() will happily let you skip the early return of Flex and Grid.

> LayoutTests/ChangeLog:14
> +        * css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:
> +        * css3/flexbox/flexbox-ignore-container-firstLetter.html:
> +        * fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt:
> +        * fast/css-grid-layout/grid-container-ignore-first-letter.html:

I would like tests
-Covering the various combinations of RenderBlock::getFirstLetter().
-Covering ::first-line.
-Covering ::first-line and ::first-letter applied on a ::before/::after with display flex/grid.
-Setting the display through ::first-letter and ::first-line. E.g.
    ::first-letter {
       display: flex;
    }
Comment 5 Benjamin Poulain 2014-12-02 14:05:23 PST
Comment on attachment 241029 [details]
Patch

Let's move out of review until we cover everything with tests.
Comment 6 Manuel Rego Casasnovas 2015-01-09 15:57:35 PST
Created attachment 244381 [details]
Patch
Comment 7 Manuel Rego Casasnovas 2015-01-09 15:59:37 PST
(In reply to comment #4)
> Comment on attachment 241029 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=241029&action=review
> 
> > Source/WebCore/ChangeLog:9
> > +        "the ::first-line and ::first-letter pseudo-elements do not apply to
> 
> You mention both ::first-line and ::first-letter, but only have tests for
> ::first-letter.
> Is there good coverage for ::first-line? If there is, it would be good to
> mention it in the changelog.

Nope, there's not enough coverage.
I've reported a different bug #139256 to import another patch from Blink to increase the coverage for ::first-line.
I'll modify the ChangeLog to avoid misunderstandings regarding ::first-line.

> > Source/WebCore/rendering/RenderBlock.cpp:3217
> > +             return;
> 
> It is not obvious to me why an early return would be correct here.
> 
> For example, isFloatingOrOutOfFlowPositioned() will happily let you skip the
> early return of Flex and Grid.

Actually the erly return is wrong and it should go to the next sibling.
I confirmed this behavior in the the CSS WG mailing list:
http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html

> > LayoutTests/ChangeLog:14
> > +        * css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:
> > +        * css3/flexbox/flexbox-ignore-container-firstLetter.html:
> > +        * fast/css-grid-layout/grid-container-ignore-first-letter-expected.txt:
> > +        * fast/css-grid-layout/grid-container-ignore-first-letter.html:
> 
> I would like tests
> -Covering the various combinations of RenderBlock::getFirstLetter().

Some part was already covered (for example: fast/css/first-letter-skip-out-of-flow.html).
I've added some new tests to cover the missing ones.

> -Covering ::first-line.

This'll be done in as part of bug #139256.

> -Covering ::first-line and ::first-letter applied on a ::before/::after with
> display flex/grid.

Added for ::first-letter.

> -Setting the display through ::first-letter and ::first-line. E.g.
>     ::first-letter {
>        display: flex;
>     }

Done.

Please, take a look to the new patch. Thanks.
Comment 8 WebKit Commit Bot 2015-01-09 15:59:44 PST
Attachment 244381 [details] did not pass style-queue:


ERROR: Source/WebCore/rendering/RenderBlock.cpp:3212:  Multi line control clauses should use braces.  [whitespace/braces] [4]
Total errors found: 1 in 11 files


If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 9 Benjamin Poulain 2015-01-20 14:46:07 PST
Comment on attachment 244381 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=244381&action=review

Great patch.

Do you have coverage for ancestor with ::first-letter + floating grid/flex? I did not see it.

> Source/WebCore/ChangeLog:13
> +        http://dev.w3.org/csswg/css-grid/#grid-containers
> +        http://dev.w3.org/csswg/css-flexbox/#flex-containers

IMHO, it would be useful to reference http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html
That description is the least unambiguous.

> Source/WebCore/ChangeLog:20
> +        Also created some new tests to incerase coverage

Typo: incerase
Comment 10 Manuel Rego Casasnovas 2015-01-21 01:20:21 PST
Created attachment 245053 [details]
Patch
Comment 11 Manuel Rego Casasnovas 2015-01-21 01:21:15 PST
(In reply to comment #9)
> Comment on attachment 244381 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=244381&action=review
> 
> Great patch.

Thanks for the review.

> Do you have coverage for ancestor with ::first-letter + floating grid/flex?
> I did not see it.

Not specifically, so I've added a few more cases checking this.

> > Source/WebCore/ChangeLog:13
> > +        http://dev.w3.org/csswg/css-grid/#grid-containers
> > +        http://dev.w3.org/csswg/css-flexbox/#flex-containers
> 
> IMHO, it would be useful to reference
> http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html
> That description is the least unambiguous.

Done.

> > Source/WebCore/ChangeLog:20
> > +        Also created some new tests to incerase coverage
> 
> Typo: incerase

Fixed.
Comment 12 WebKit Commit Bot 2015-01-21 01:22:30 PST
Attachment 245053 [details] did not pass style-queue:


ERROR: Source/WebCore/rendering/RenderBlock.cpp:3212:  Multi line control clauses should use braces.  [whitespace/braces] [4]
Total errors found: 1 in 11 files


If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 13 WebKit Commit Bot 2015-01-21 02:02:57 PST
Comment on attachment 245053 [details]
Patch

Clearing flags on attachment: 245053

Committed r178822: <http://trac.webkit.org/changeset/178822>
Comment 14 WebKit Commit Bot 2015-01-21 02:03:02 PST
All reviewed patches have been landed.  Closing bug.