Closing, this is definitely not a Chrome bug. My bad!

(it looks like the flags are supported on the NotoEmojiFont but not on the Android font)

Support for regional indicators (aka flags) was implemented in 739641. Either the font is missing the flags in question, which seems odd as it appears to work elsewhere on Android, or we're getting the segmentation wrong.

Do you have bandwidth to look into this drott? If not please assign back to me.

Might also be a font-fallback issue, does it work if you explicitly ask for NotoEmojiFont?

Copy pasting the text into the chrome search field displays the emoji correctly.

Regional indicators are not the same as subdivision flags. Regional indicators are two-character country sequences which should be rendered as emoji. Subdvision flags are tagged sequences after a flag emoji which spell out the subdivision, ending on an end tag. The latter were done in  issue 719965 , which has a test for it, and should show that the segmentation is okay. 

But indeed, font support is required. http://output.jsbin.com/hazomaq works for me on Mac OS 10.13 indicating that Chrome handles this okay if the font supports it. It fails for me on Android, but I can confirm the behavior from comment 5. Also http://roettsch.es/emoji_england.html using the Noto Color Emoji font as a web font works for me on Mac and Android. So, curiously, something goes wrong between Chrome and the Emoji font on Android 8.1.0. 

http://roettsch.es/emoji_england_sys.html works on Linux if the page specifies "Noto Color Emoji" as the font family, but if I change the font family to something else that doesn't match the emoji font family name, then it only shows the black flags. 

The problem is probably that when we do grapheme cluster based fallback for this sequence, we do not identify the whole flag tag sequence as a grapheme cluster (I am not sure they are a grapheme cluster under Unicode terms). It might be that the primary font, Noto Sans, has coverage for some of the tag sequence characters and they get rendered invisibly, then we do the next fallback iteration, finding a fallback font for the black flag, then we only shape the black flag since the grapheme cluster now consits only of the flag and is then completely rendered. Then we do not render any of the other subdivision with the Noto Color Emoji font as they were already covered with something from the primary font.

It's a little bit odd - I don't have a device in developer mode available for Android 8.1.0 at the moment - noms@, could you highlight the two flags in DevTools remotely on your Android device, look at the computed style panel, scroll down to see what rendered fonts it selected? I am assuming there is something in the Android fallback path capturing the symbols from the tag sequence before we reach Noto Color Emoji during fallback.

Isn't it just the emoji iterator that needs update?  Do US states work?!

Re 8: No, the iterator is up to date since 11/2017 [1], see comment 6. I assume the problem is that there is something in the fallback path that grabs part of the tag sequence (compare https://codepoints.net/%F0%9F%8F%B4%F3%A0%81%A7%F3%A0%81%A2%F3%A0%81%A5%F3%A0%81%AE%F3%A0%81%A7%F3%A0%81%BF) with the primary font, then when we reach emoji fallback, the tag sequence is broken up and only the base symbol is shaped with the emoji font.


[1] https://chromium.googlesource.com/chromium/src/+/92891e6490067594b96b74637bbede51f6f52234

Ah yes, thanks for the clarification re subdvision. The terminology around this is somewhat confusing...

If you have a device handy Noms we could look at this together if you'd like.

But if the font supports the full flag sequence, and emoji iterator correctly assigns it to emoji font family, why does fallback happen?

Or is it because we always try the main font first before emoji?

Yes, the primary font is tried first, which is probably Noto Sans. If this "eats"(="can shape/render") any of the tag sequence control characters, the tag sequence is broken up, and then performing fallback and trying shaping with the emoji font, we only shape the flag, as parts of the subdivision flag sequence were already shaped with Noto Sans.

@eae: I tried it on someone's Pixel 2, no fancy setup needed. 

> noms@, could you highlight the two flags in DevTools remotely on your Android device, look at the computed style panel, scroll down to see what rendered fonts it selected?

I currently don't have a 8.1.0 device in developer mode, it would be very helpful if you could post the mapped fonts from DevTools, thanks.

@drott Sorry, that also wasn't a developer mode Pixel, and I don't have access to it either. My repro steps were literally just going to the JSBin I posted on a Pixel, but I don't know how to get a developer mode device

Issue 685443 has been merged into this issue.