WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
140542
::first-line skips out-of-flow elements but doesn't affect the next block
https://bugs.webkit.org/show_bug.cgi?id=140542
Summary
::first-line skips out-of-flow elements but doesn't affect the next block
Manuel Rego Casasnovas
Reported
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)."
Attachments
Example to reproduce the issue
(229 bytes, text/html)
2015-01-16 03:38 PST
,
Manuel Rego Casasnovas
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Ahmad Saleem
Comment 1
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!
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug