Bug 220650 – ::first-letter does not work if used only in shadow content

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Jeroen Zwartepoorte]

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.

[Smoley]

I can reproduce this on Safari 13.1.3 as well as STP118. Apple internal see also rdar://55721155.

[Radar WebKit Bug Importer]

<rdar://problem/73477161>

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?

It seams #202176 is a duplicate?

[Antti Koivisto]

Created attachment 458344 [details]
Patch

[Antti Koivisto]

*** Bug 202176 has been marked as a duplicate of this bug. ***

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 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

[zalan]

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]

> guess we don't want to depend on checkFonts either.

OOPS

[Antti Koivisto]

Created attachment 458419 [details]
Patch for landing

[Antti Koivisto]

> This could be a WPT

Way too fiddly to export reftests.

[EWS]

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].