[css-pseudo] Settle what happens when first-letter characters are in different elements

[Loirooriol]

CSS Pseudo says

If the characters that would form the ::first-letter are not in the same element, such as ‘T in <p>‘<em>T..., the user agent may create a ::first-letter pseudo-element from one of the elements, both elements, or simply not create a pseudo-element.

Can't some behavior be settled?

In the first row the characters are in the same element, in the second row they are not, and it's not interoperable at all. https://jsfiddle.net/99ohzgh3/

[upsuper]

Hmmm, so Gecko and WebKit decide to create such pseudo-element in the first element, Blink creates one in the inner one (and it doesn't create any ::first-letter in case of <p><span>‘</span><span>Ti</span></p>), and Edge creates two.

Not sure which is better for this case... Maybe Edge's behavior makes the most of sense? The fact that it creates two pseudo-elements may have some surprising implication (e.g. if you use linear-gradient(to right, red, lime) as background rather than a single color, you would see two gradients on Edge), but I'm not sure how much it matters.

[Loirooriol]

Interestingly, if ::first-letter characters are in a single text run but different text nodes, then Edge behaves like Firefox. https://jsfiddle.net/k6arf2q8/

[fantasai]

I'm leaning towards leaving this undefined for now and seeing what shakes out as people implement and use initial-letter. I don't think there's a clear answer here.

However, I do think we should clarify that given ‘T’ you never create a ::first-letter out of only the last bit of punctuation. :/ See #5830

@Loirooriol Are you OK to defer this?

[Loirooriol]

Yes it's OK to defer