::first-line doesn't skip flex/grid elements

• Component: CSS
• Status: NEW ---

[Manuel Rego Casasnovas]

Created attachment 244760 [details]
Example to reproduce the issue

First bug #140541 should be fixed, but this issue was present before and it's still present in Blink (https://code.google.com/p/chromium/issues/detail?id=449481).

Example (attached) to reproduce the issue ("Green" should be green and "Black" should be black):

<style>
    .first-line-green::first-line {
        color: lime;
    }

    .flex {
        display: flex;
    }
</style>
<div class="first-line-green">
    <div class="flex">
        Black
    </div>
    Green
</div>

The flex is ignored as expected, however it doesn't go to the next element (like in the case of floated/positioned elements).

BTW, the same happens for grids.

From the spec (http://www.w3.org/TR/css-flexbox-1/#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."

Also a mail from CSS WG mailing list confirming the expected behavior:
http://lists.w3.org/Archives/Public/www-style/2014Dec/0305.html

[Ahmad Saleem]

As of right now, all browsers (Safari 16.1, Chrome Canary 109 and Firefox Nightly 108) and does not have any lime color for first line and they are matching each other.

But I think if it is an issue, we should keep it open and also put it on Radar. I will leave for others to comment. Thanks!