Bug 220650 - ::first-letter does not work if used only in shadow content
Summary: ::first-letter does not work if used only in shadow content
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antti Koivisto
URL:
Keywords: InRadar
: 202176 (view as bug list)
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2021-01-15 00:32 PST by Jeroen Zwartepoorte
Modified: 2022-04-26 22:31 PDT (History)
17 users (show)

See Also:


Attachments
Patch (11.32 KB, patch)
2022-04-26 01:58 PDT, Antti Koivisto
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch for landing (11.33 KB, patch)
2022-04-26 21:33 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].