1477010 - Selecting emoji tag flags selects individual codepoints instead of the whole glyph at once

Status: VERIFIED FIXED

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

Description

[Ian Moody [:Kwan] (UTC+0)]

Not 100% on the component here.

STR:
0) Be on Fx 62+ so bug 1427660 is fixed and the flags display properly
1) Using drag-selecting try to select 🏴󠁧󠁢󠁷󠁬󠁳󠁿

AR:
Selects 7 segments individually, seemingly corresponding to each codepoint

ER:
Selects the whole flag at once, same as with regular emoji flags like 🇬🇧 that are two codepoints.

Comment 1

[Jonathan Kew [:jfkthame]]

Probably the thing to do here is simply to treat the Plane-14 tag characters as "cluster extenders" when we mark clusters in the textrun, so that they will be grouped together with the black flag base character of the sequence.

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: Treat plane-14 tag characters as cluster extenders when building textruns, so that emoji flag sequences behave as single units

This gives the expected behavior for flag sequences like the example here.

Comment 3

[Jonathan Kew [:jfkthame]]

Pushed a try run just to double-check this doesn't disrupt any existing tests:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=58251e3bab64038991fb84c4740d735bbc45755a

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/22a4758c0aae
Treat plane-14 tag characters as cluster extenders when building textruns, so that emoji flag sequences behave as single units. r=m_kato

Comment 5

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/22a4758c0aae

Comment 6

[Timea Zsoldos [:tzsoldos], Desktop QA]

I managed to reproduced and verified the bug 1427660 on Windows 10 x64 using Fx 63.0b13. Could not reproduced this issue, maybe I misunderstood something, step 1), AR and ER is quite confusing for me. Could you help me with detailed STR, please?

Comment 7

[Jonathan Kew [:jfkthame]]

AFAIK, the default emoji font on Win10 doesn't actually support the various regional-flag symbols, so this will be harder to reproduce there. If you remove Segoe UI Emoji from the font.name-list.emoji preference, leaving just Twemoji Mozilla, then the flags should render properly.

Then try using drag-select SLOWLY across the Welsh flag 🏴󠁧󠁢󠁷󠁬󠁳󠁿 as seen in comment 0. Without the fix here, you should see that slices of the flag glyph get selected as you drag across it, reflecting the multiple underlying codepoints. The correct behavior after the fix is that it selects as a single unit; you can't drag half-way across it and see only half of it selected.

It'll be easier to see the difference with a larger font size:

    data:text/html;charset=utf-8,<div style="font:60px Times,Apple Color Emoji,Twemoji Mozilla">Drag through 🏴󠁧󠁢󠁷󠁬󠁳󠁿 this

Comment 8

[Timea Zsoldos [:tzsoldos], Desktop QA]

Thanks Jonathan. 
I have reproduced this issue using Firefox 63.0a1 (2018.07.19) on Windows 10 x64, running in URL the: "data:text/html;charset=utf-8,<div style="font:60px Times,Apple Color Emoji,Twemoji Mozilla">Drag through 🏴󠁧󠁢󠁷󠁬󠁳󠁿 this", drag-selecting the " 🏴󠁧󠁢󠁷󠁬󠁳󠁿 " I can see it as half selected.
I can confirm this issue is fixed, I verified using Firefox 63.0b14 on Ubuntu 16.04 x64, Windows 10 x64 and Mac OS X 10.13.6, I can't drag half-way across it, it selects as a single unit.