::first-line skips out-of-flow elements but doesn't affect the next block

• Component: CSS
• Status: NEW ---

[Manuel Rego Casasnovas]

Created attachment 244759 [details]
Example to reproduce the issue

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

Example (attached) to reproduce the issue ("Green" should be green and "Black" should be black):
<style>
    .first-line-green::first-line {
        color: lime;
    }

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

In the example the text "Green" appears in black.

Once bug #140541 is fixed, this problem might be probably because of "::first-line" skips the floated element as expected, but it doesn't select the "Green" text because of it's not the first child.
Probably it's due to the condition "parentBlock->firstChild() != firstLineBlock" in RenderBlock::firstLineBlock() (but if you remove this condition other simple cases will fail):
    if (firstLineBlock->isReplaced() || firstLineBlock->isFloating()
        || !parentBlock || parentBlock->firstChild() != firstLineBlock || !isRenderBlockFlowOrRenderButton(*parentBlock))
        break;

However, if you remove the "<div>" wrapping "Green" it worked as expected (once bug #140541 is fixed it'll work as expected):
<style>
    .first-line-green::first-line {
        color: lime;
    }

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

BTW, the same happens if you use a positioned element.

From the spec (http://www.w3.org/TR/css3-selectors/#first-formatted-line):
"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). For example, 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)."

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case and the output is "BlackGreen" text as Black and it matches with Firefox Nightly 104 which also show this text as "Black" except Chrome Canary 106, which show "Green" from text string as "Green".

I am not clear on web-spec so I don't know which browser is showing correct behavior but I just wanted to share updated testing results. Thanks!