Bug 220650

Summary: ::first-letter does not work if used only in shadow content
Product: WebKit Reporter: Jeroen Zwartepoorte <jeroen.zwartepoorte>
Component: Layout and RenderingAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, dale.sande, esprehn+autocc, ews-watchlist, glenn, koivisto, kondapallykalyan, mmaxfield, ntim, pdr, rniwa, simon.fraser, smoley, vb, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Patch
ews-feeder: commit-queue-
Patch for landing none

Jeroen Zwartepoorte
Reported 2021-01-15 00:32:35 PST
So I have 2 page-header web components. One can be seen here: https://codepen.io/jpzwarte/pen/VwKxJGR The other can be seen here: http://dna.iddinkgroup.com/core/iframe.html?id=navigation-page-header--api&viewMode=story (icl/icl) In both cases, the web component should capitalise the first letter of the title. In the latter one, `::first-letter { text-transform: uppercase; }` does NOT work. I have almost exactly the same implementation in the codepen and that DOES work. (this example works fine in Chrome) You should see "Header lorem ipsum" in Safari. But instead you see "header lorem ipsum". If someone can help me understand why the last example doesn't work, I can turn this into a proper bug report.
Attachments
Patch (11.32 KB, patch)
2022-04-26 01:58 PDT, Antti Koivisto 		ews-feeder: commit-queue-
DetailsFormatted DiffDiff
Patch for landing (11.33 KB, patch)
2022-04-26 21:33 PDT, Antti Koivisto 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Smoley
Comment 1 2021-01-21 17:34:58 PST
I can reproduce this on Safari 13.1.3 as well as STP118. Apple internal see also rdar://55721155.
Radar WebKit Bug Importer
Comment 2 2021-01-21 17:35:09 PST
<rdar://problem/73477161>
vb
Comment 3 2022-03-31 04:06:43 PDT
The same here: Reproduktion site: https://realityfilter.github.io/safari-pseudo-elements/ Repository: https://github.com/realityfilter/safari-pseudo-elements It works in Chrome and Firefox. This is really odd. Any updates on this?
vb
Comment 4 2022-04-01 07:34:49 PDT
It seams #202176 is a duplicate?
Antti Koivisto
Comment 5 2022-04-26 01:58:36 PDT
Created attachment 458344 [details] Patch
Antti Koivisto
Comment 6 2022-04-26 02:04:50 PDT
*** Bug 202176 has been marked as a duplicate of this bug. ***
vb
Comment 7 2022-04-26 02:08:07 PDT
The current Safari Technology Preview (Release 143 (Safari 15.4, WebKit 17614.1.7.7)) only partially fixes the problem. In https://realityfilter.github.io/safari-pseudo-elements/ the first line appears bold. But the first letter is not styled correctly.
Tim Nguyen (:ntim)
Comment 8 2022-04-26 12:14:07 PDT
Comment on attachment 458344 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=458344&action=review > Source/WebCore/ChangeLog:9 > + Test: fast/shadow-dom/shadow-first-line-and-letter.html This could be a WPT
alan
Comment 9 2022-04-26 15:53:59 PDT
Comment on attachment 458344 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=458344&action=review > Source/WebCore/rendering/RenderInline.cpp:-218 > - if (!mayAffectLayout && checkFonts && view().usesFirstLineRules()) { guess we don't want to depend on checkFonts either.
Antti Koivisto
Comment 10 2022-04-26 21:31:13 PDT
> guess we don't want to depend on checkFonts either. OOPS
Antti Koivisto
Comment 11 2022-04-26 21:33:26 PDT
Created attachment 458419 [details] Patch for landing
Antti Koivisto
Comment 12 2022-04-26 21:34:27 PDT
> This could be a WPT Way too fiddly to export reftests.
EWS
Comment 13 2022-04-26 22:31:52 PDT
Committed r293497 (250030@main): <https://commits.webkit.org/250030@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 458419 [details].
Note You need to log in before you can comment on or make changes to this bug.