140542 2015-01-16 03:38:18 -0800 ::first-line skips out-of-flow elements but doesn't affect the next block 2022-07-24 13:55:23 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified NEW P2 Normal --- 140541 1 rego webkit-unassigned ahmad.saleem792 ap bfulgham koivisto rniwa simon.fraser zalan oldest_to_newest 1061803 0 244759 rego 2015-01-16 03:38:18 -0800 Created attachment 244759 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)." 1886364 1 ahmad.saleem792 2022-07-24 10:24:34 -0700 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! 244759 2015-01-16 03:38:18 -0800 2015-01-16 03:38:18 -0800 Example to reproduce the issue first-line-float.html text/html 229 rego PHN0eWxlPgogICAgLmZpcnN0LWxpbmUtZ3JlZW46OmZpcnN0LWxpbmUgewogICAgICAgIGNvbG9y OiBsaW1lOwogICAgfQoKICAgIC5mbG9hdCB7CiAgICAgICAgZmxvYXQ6IGxlZnQ7CiAgICB9Cjwv c3R5bGU+CjxkaXYgY2xhc3M9ImZpcnN0LWxpbmUtZ3JlZW4iPgogICAgPGRpdiBjbGFzcz0iZmxv YXQiPgogICAgICAgIEJsYWNrCiAgICA8L2Rpdj4KICAgIDxkaXY+R3JlZW48L2Rpdj4KPC9kaXY+ Cg==