Bug 210474

Summary: [Interop 2021][css-flexbox] Incorrect computed style for first-letter pseudo-element
Product: WebKit Reporter: Carlos Alberto Lopez Perez <clopez>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, ntim, rego, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   

Description Carlos Alberto Lopez Perez 2020-04-13 20:29:56 PDT 
The spec <https://drafts.csswg.org/css-flexbox-1/#placement> says that the flexbox placement should not apply to the ::first-letter pseudo-content

Now, consider this test:

<style>
  div { display: flex; }
  div::first-letter { order: 2 }
</style>

<div>Triceratops</div>


WebKit renders it correctly because the first letter element (T) gets rendered ignoring the "order: 2" style value.
However, once you examine the computed style for the element, then that seems wrong as it appears with a computed value of "2" for "order".


This causes failures on WPT test http://wpt.live/css/css-flexbox/flexbox_first-letter.html
Comment 1 Radar WebKit Bug Importer 2022-05-31 10:55:47 PDT 
<rdar://problem/94163778>
Comment 2 Tim Nguyen (:ntim) 2022-08-15 21:24:39 PDT 
This is quite straightforward to fix: https://searchfox.org/wubkat/rev/30ec4a7da2ed391580b109cbae2595e4b04652b3/Source/WebCore/rendering/updating/RenderTreeBuilderFirstLetter.cpp#42

`firstLetterStyle.setOrder(RenderStyle::initialOrder());`
Comment 3 Tim Nguyen (:ntim) 2022-08-15 21:25:08 PDT 
Just not sure if there's anything other ::first-letter needs this adjustment (::first-line maybe?)
Comment 4 Tim Nguyen (:ntim) 2022-09-17 08:07:19 PDT 
Looks like to edit the computed style, we need to change a bit earlier on: https://searchfox.org/wubkat/rev/88494bd8279fc758940dcabe84dc7c79e6a1231b/Source/WebCore/style/StyleResolver.cpp#438


The other function I linked for the used computed style actually clones the style, so it doesn't make it into the computed style.
Comment 5 Tim Nguyen (:ntim) 2022-09-17 08:08:05 PDT 
The only approach I can really think of here is a blocklist/allowlist of properties.