Bug 140542 - ::first-line skips out-of-flow elements but doesn't affect the next block
Summary: ::first-line skips out-of-flow elements but doesn't affect the next block
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 140541
Blocks:
  Show dependency treegraph
 
Reported: 2015-01-16 03:38 PST by Manuel Rego Casasnovas
Modified: 2022-07-24 13:55 PDT (History)
7 users (show)

See Also:


Attachments
Example to reproduce the issue (229 bytes, text/html)
2015-01-16 03:38 PST, Manuel Rego Casasnovas
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Manuel Rego Casasnovas 2015-01-16 03:38:18 PST
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)."
Comment 1 Ahmad Saleem 2022-07-24 10:24:34 PDT
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!