Bug 210474 - [Interop 2021][css-flexbox] Incorrect computed style for first-letter pseudo-element
Summary: [Interop 2021][css-flexbox] Incorrect computed style for first-letter pseudo-...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-04-13 20:29 PDT by Carlos Alberto Lopez Perez
Modified: 2022-09-17 08:08 PDT (History)
4 users (show)

See Also:


Attachments

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