1722763 - Incorrect render of the emoji flag when setting font-size with ::first-letter

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect, P2)

Description

[Ksenia Berezina [:ksenia]]

Attachment: Screen Shot 2021-07-28 at 2.02.25 PM.png

This was initially reported in https://github.com/webcompat/web-bugs/issues/78932

STR:
Visit https://codepen.io/biotimylated/pen/abWOEJm in Firefox release on desktop and observe emoji icons

Expected:
Flag emoji icon that is styled with ::first-letter is rendered

Actual:
Flag emoji icon is not displayed

Some more info:
I run mozregression and it seems that using ::first-letter didn't have any effect on emojis in this test case until 1686512 landed.

Also, I found this issue https://bugzilla.mozilla.org/show_bug.cgi?id=1570452, where the resolution was that ::first-letter pseudo-selector shouldn't work if the first letter in a paragraph or text tag is an emoji.

Comment 1

[Ksenia Berezina [:ksenia]]

Also, there is another problem (likely related since it's started happening after patch in 1686512 landed?), when using vertical-align: middle; on the emoji flag, it gets rendered with the left and right halves with different vertical alignments.

Comment 2

[Ksenia Berezina [:ksenia]]

Hi Jonathan, would you be able to take a look, please?

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1722763 - Don't let ::first-letter break Regional-Indicator flag ligatures. r=#layout-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5ae8ad2a0901
Don't let ::first-letter break Regional-Indicator flag ligatures. r=emilio

Comment 5

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29853 for changes under testing/web-platform/tests

Comment 6

[Sandor Molnar[:smolnar]]

Backed out for causing wpt failures in /css/selectors/first-letter-flag-001

Backout link: https://hg.mozilla.org/integration/autoland/rev/5761da0ad06f133f8b57ac59ecc53c2fe44f5643

Push with failures

Failure log

Comment 7

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 8

[Jonathan Kew [:jfkthame]]

(In reply to Sandor Molnar from comment #6)

Backed out for causing wpt failures in /css/selectors/first-letter-flag-001

Looks like async font fallback sometimes hitting the windows-debug build. We'd better disable the async behavior for this test, so that test and reference screenshots consistently agree about the font to pick.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/84bb91189ce5
Don't let ::first-letter break Regional-Indicator flag ligatures. r=emilio

Comment 10

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/84bb91189ce5

Comment 11

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot