Bug 251693

Summary: Ignore spaces when determining the length of text to treat as a first-letter pseudo-element
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, karlcow, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://jsfiddle.net/85dc79ks/show

Description Ahmad Saleem 2023-02-03 08:36:54 PST
Hi Team,

While going through Blink's commit, I came across test case where all browsers differ from each other (Chrome Canary 112, Firefox Nightly 111 and Safari Technology Preview 162):

Test Case - https://jsfiddle.net/85dc79ks/show (Same as URL field)

Blink Commit - https://chromium.googlesource.com/chromium/blink/+/278a1f2cc8465a1a57307ad95d02f124bac4bde1

WebKit Source - https://searchfox.org/wubkat/source/Source/WebCore/rendering/updating/RenderTreeBuilderFirstLetter.cpp#105 etc.

I just wanted to get input on which browser is right and also track it here, if it is genuine bug.

Thanks!
Comment 1 Karl Dubost 2023-02-05 15:44:11 PST
Looking at the test above, everything is green on Safari. 


        <div>Test</div>
        <div>&nbsp;Test&nbsp;</div>
        <div>(T)est</div>
        <div>&nbsp;(T)est</div>
        <div>&ldquo;T&rdquo;est</div>
        <div>&amp;Test</div>
        <div>&nbsp;&amp;Test</div>
        <div>T&amp;S<div>
        <div>T&nbsp;&amp;&nbsp;S<div>
        <div>T &amp; S<div>
        <div>&laquo;&nbsp;S&nbsp;&raquo;</div>
        <div>&laquo;&nbsp;S&nbsp;&raquo;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div>&bull; </div>
        <div>&nbsp;&bull; &nbsp;</div>

with: 
       Test passes if all the T are green, 
       as well as punctuation elements 
       when they are adjacent to a letter (without spaces)

Ahmad, Thanks.
Probably it would be interesting to cross-check with tests in 
https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&aligned&view=subtest&q=first-letter
Comment 2 Ahmad Saleem 2023-02-05 15:46:59 PST
(In reply to Karl Dubost from comment #1)
> Looking at the test above, everything is green on Safari. 
> 
> 
>         <div>Test</div>
>         <div>&nbsp;Test&nbsp;</div>
>         <div>(T)est</div>
>         <div>&nbsp;(T)est</div>
>         <div>&ldquo;T&rdquo;est</div>
>         <div>&amp;Test</div>
>         <div>&nbsp;&amp;Test</div>
>         <div>T&amp;S<div>
>         <div>T&nbsp;&amp;&nbsp;S<div>
>         <div>T &amp; S<div>
>         <div>&laquo;&nbsp;S&nbsp;&raquo;</div>
>         <div>&laquo;&nbsp;S&nbsp;&raquo;&nbsp;&nbsp;&nbsp;&nbsp;</div>
>         <div>&bull; </div>
>         <div>&nbsp;&bull; &nbsp;</div>
> 
> with: 
>        Test passes if all the T are green, 
>        as well as punctuation elements 
>        when they are adjacent to a letter (without spaces)
> 
> Ahmad, Thanks.
> Probably it would be interesting to cross-check with tests in 
> https://wpt.fyi/results/css/css-
> pseudo?label=master&label=experimental&aligned&view=subtest&q=first-letter

This seems relevant - first-letter-punctuation-dynamic.html
Comment 5 Radar WebKit Bug Importer 2023-02-10 08:37:18 PST
<rdar://problem/105278168>
Comment 6 Ahmad Saleem 2023-02-25 10:12:45 PST
PR - https://github.com/WebKit/WebKit/pull/10685
Comment 7 Ahmad Saleem 2023-03-11 05:36:59 PST
I tried it in thiS PR - https://github.com/WebKit/WebKit/pull/10685 and it seems that there are some genuine failure with this patch. I tried to merge follow-up patch partially but it seems, it needs more than two patches to make it work in WebKit.

I am still exploring it locally and might come back later, but if somemone knows quick solution or already working for future fix. I am happy for them to fix it. Thanks!