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

Description Jeroen Zwartepoorte 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.
Comment 1 Smoley 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.
Comment 2 Radar WebKit Bug Importer 2021-01-21 17:35:09 PST 
<rdar://problem/73477161>
Comment 3 vb 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?
Comment 4 vb 2022-04-01 07:34:49 PDT 
It seams #202176 is a duplicate?
Comment 5 Antti Koivisto 2022-04-26 01:58:36 PDT 
Created attachment 458344 [details]
Patch
Comment 6 Antti Koivisto 2022-04-26 02:04:50 PDT 
*** Bug 202176 has been marked as a duplicate of this bug. ***
Comment 7 vb 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.
Comment 8 Tim Nguyen (:ntim) 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
Comment 9 zalan 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.
Comment 10 Antti Koivisto 2022-04-26 21:31:13 PDT 
> guess we don't want to depend on checkFonts either.

OOPS
Comment 11 Antti Koivisto 2022-04-26 21:33:26 PDT 
Created attachment 458419 [details]
Patch for landing
Comment 12 Antti Koivisto 2022-04-26 21:34:27 PDT 
> This could be a WPT

Way too fiddly to export reftests.
Comment 13 EWS 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].