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 Rendering | Assignee: | 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 | ||
Ahmad Saleem
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!
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Karl Dubost
Looking at the test above, everything is green on Safari.
<div>Test</div>
<div> Test </div>
<div>(T)est</div>
<div> (T)est</div>
<div>“T”est</div>
<div>&Test</div>
<div> &Test</div>
<div>T&S<div>
<div>T & S<div>
<div>T & S<div>
<div>« S »</div>
<div>« S » </div>
<div>• </div>
<div> • </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
Ahmad Saleem
(In reply to Karl Dubost from comment #1)
> Looking at the test above, everything is green on Safari.
>
>
> <div>Test</div>
> <div> Test </div>
> <div>(T)est</div>
> <div> (T)est</div>
> <div>“T”est</div>
> <div>&Test</div>
> <div> &Test</div>
> <div>T&S<div>
> <div>T & S<div>
> <div>T & S<div>
> <div>« S »</div>
> <div>« S » </div>
> <div>• </div>
> <div> • </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
Karl Dubost
https://w3c.github.io/csswg-drafts/css-pseudo/#first-letter-pseudo
The rules are pretty complex.
https://w3c.github.io/csswg-drafts/css-pseudo/#first-letter-pattern
Karl Dubost
Indeed
https://wpt.fyi/results/css/css-pseudo/first-letter-punctuation-dynamic.html?label=master&label=experimental&aligned&view=subtest&q=first-letter
The space here seems to be ignored in WebKit.
Radar WebKit Bug Importer
<rdar://problem/105278168>
Ahmad Saleem
PR - https://github.com/WebKit/WebKit/pull/10685
Ahmad Saleem
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!