Bug 210474 – [Interop 2021][css-flexbox] Incorrect computed style for first-letter pseudo-element

• Status: NEW
• Component: CSS

[Carlos Alberto Lopez Perez]

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

[Radar WebKit Bug Importer]

<rdar://problem/94163778>

[Tim Nguyen (:ntim)]

This is quite straightforward to fix: https://searchfox.org/wubkat/rev/30ec4a7da2ed391580b109cbae2595e4b04652b3/Source/WebCore/rendering/updating/RenderTreeBuilderFirstLetter.cpp#42

`firstLetterStyle.setOrder(RenderStyle::initialOrder());`

[Tim Nguyen (:ntim)]

Just not sure if there's anything other ::first-letter needs this adjustment (::first-line maybe?)

[Tim Nguyen (:ntim)]

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.

[Tim Nguyen (:ntim)]

The only approach I can really think of here is a blocklist/allowlist of properties.