emoji-cluster-fallback.js | Explore in Territory

(async function(/** @type {import('test_runner').TestRunner} */ testRunner) {
  var page = await testRunner.createPage();
  await page.loadHTML(`
    <html>
    <meta charset="UTF-8">
    <style>
    @font-face {
    font-family: has_male_female_sign;
    src: url("../../third_party/Libertine/LinLibertine_R.woff");
    }
    @font-face {
    font-family: noto_color_emoji;
    src: url("../../third_party/NotoColorEmoji/NotoColorEmoji.ttf");
    }
    #emoji_male_female_zwj_sequences {
    font-family: has_male_female_sign, noto_color_emoji;
    }
    </style>
    <body>
        <div class="test">
            <div id="emoji_male_female_zwj_sequences">👮‍♀️👮‍♂️👮🏻‍♀️👮🏻‍♂️👮🏼‍♀️👮🏼‍♂️👮🏽‍♀️👮🏽‍♂️👮🏾‍♀️👮🏾‍♂️👮🏿‍♀️👮🏿‍♂️👱‍♀️👱‍♂️👱🏻‍♀️👱🏻‍♂️👱🏼‍♀️👱🏼‍♂️👱🏽‍♀️👱🏽‍♂️👱🏾‍♀️👱🏾‍♂️👱🏿‍♀️👱🏿‍♂️👳‍♀️👳‍♂️👳🏻‍♀️👳🏻‍♂️👳🏼‍♀️👳🏼‍♂️👳🏽‍♀️👳🏽‍♂️👳🏾‍♀️👳🏾‍♂️👳🏿‍♀️👳🏿‍♂️👷‍♀️👷‍♂️👷🏻‍♀️👷🏻‍♂️👷🏼‍♀️👷🏼‍♂️👷🏽‍♀️👷🏽‍♂️👷🏾‍♀️👷🏾‍♂️👷🏿‍♀️👷🏿‍♂️💂‍♀️💂‍♂️💂🏻‍♀️💂🏻‍♂️💂🏼‍♀️💂🏼‍♂️💂🏽‍♀️💂🏽‍♂️💂🏾‍♀️💂🏾‍♂️💂🏿‍♀️💂🏿‍♂️🕵🏻‍♀️🕵🏻‍♂️🕵🏼‍♀️🕵🏼‍♂️🕵🏽‍♀️🕵🏽‍♂️🕵🏾‍♀️🕵🏾‍♂️🕵🏿‍♀️🕵🏿‍♂️🕵️‍♀️🕵️‍♂️🧙‍♀️🧙‍♂️🧙🏻‍♀️🧙🏻‍♂️🧙🏼‍♀️🧙🏼‍♂️🧙🏽‍♀️🧙🏽‍♂️🧙🏾‍♀️🧙🏾‍♂️🧙🏿‍♀️🧙🏿‍♂️🧚‍♀️🧚‍♂️🧚🏻‍♀️🧚🏻‍♂️🧚🏼‍♀️🧚🏼‍♂️🧚🏽‍♀️🧚🏽‍♂️🧚🏾‍♀️🧚🏾‍♂️🧚🏿‍♀️🧚🏿‍♂️🧛‍♀️🧛‍♂️🧛🏻‍♀️🧛🏻‍♂️🧛🏼‍♀️🧛🏼‍♂️🧛🏽‍♀️🧛🏽‍♂️🧛🏾‍♀️🧛🏾‍♂️🧛🏿‍♀️🧛🏿‍♂️🧜‍♀️🧜‍♂️🧜🏻‍♀️🧜🏻‍♂️🧜🏼‍♀️🧜🏼‍♂️🧜🏽‍♀️🧜🏽‍♂️🧜🏾‍♀️🧜🏾‍♂️🧜🏿‍♀️🧜🏿‍♂️🧝‍♀️🧝‍♂️🧝🏻‍♀️🧝🏻‍♂️🧝🏼‍♀️🧝🏼‍♂️🧝🏽‍♀️🧝🏽‍♂️🧝🏾‍♀️🧝🏾‍♂️🧝🏿‍♀️🧝🏿‍♂️🧞‍♀️🧞‍♂️🧟‍♀️🧟‍♂️⛹🏻‍♀️⛹🏻‍♂️⛹🏼‍♀️⛹🏼‍♂️⛹🏽‍♀️⛹🏽‍♂️⛹🏾‍♀️⛹🏾‍♂️⛹🏿‍♀️⛹🏿‍♂️⛹️‍♀️⛹️‍♂️🏃‍♀️🏃‍♂️🏃🏻‍♀️🏃🏻‍♂️🏃🏼‍♀️🏃🏼‍♂️🏃🏽‍♀️🏃🏽‍♂️🏃🏾‍♀️🏃🏾‍♂️🏃🏿‍♀️🏃🏿‍♂️🏄‍♀️🏄‍♂️🏄🏻‍♀️🏄🏻‍♂️🏄🏼‍♀️🏄🏼‍♂️🏄🏽‍♀️🏄🏽‍♂️🏄🏾‍♀️🏄🏾‍♂️🏄🏿‍♀️🏄🏿‍♂️🏊‍♀️🏊‍♂️🏊🏻‍♀️🏊🏻‍♂️🏊🏼‍♀️🏊🏼‍♂️🏊🏽‍♀️🏊🏽‍♂️🏊🏾‍♀️🏊🏾‍♂️🏊🏿‍♀️🏊🏿‍♂️🏋🏻‍♀️🏋🏻‍♂️🏋🏼‍♀️🏋🏼‍♂️🏋🏽‍♀️🏋🏽‍♂️🏋🏾‍♀️🏋🏾‍♂️🏋🏿‍♀️🏋🏿‍♂️🏋️‍♀️🏋️‍♂️🏌🏻‍♀️🏌🏻‍♂️🏌🏼‍♀️🏌🏼‍♂️🏌🏽‍♀️🏌🏽‍♂️🏌🏾‍♀️🏌🏾‍♂️🏌🏿‍♀️🏌🏿‍♂️🏌️‍♀️🏌️‍♂️👯‍♀️👯‍♂️💆‍♀️💆‍♂️💆🏻‍♀️💆🏻‍♂️💆🏼‍♀️💆🏼‍♂️💆🏽‍♀️💆🏽‍♂️💆🏾‍♀️💆🏾‍♂️💆🏿‍♀️💆🏿‍♂️💇‍♀️💇‍♂️💇🏻‍♀️💇🏻‍♂️💇🏼‍♀️💇🏼‍♂️💇🏽‍♀️💇🏽‍♂️💇🏾‍♀️💇🏾‍♂️💇🏿‍♀️💇🏿‍♂️🚣‍♀️🚣‍♂️🚣🏻‍♀️🚣🏻‍♂️🚣🏼‍♀️🚣🏼‍♂️🚣🏽‍♀️🚣🏽‍♂️🚣🏾‍♀️🚣🏾‍♂️🚣🏿‍♀️🚣🏿‍♂️🚴‍♀️🚴‍♂️🚴🏻‍♀️🚴🏻‍♂️🚴🏼‍♀️🚴🏼‍♂️🚴🏽‍♀️🚴🏽‍♂️🚴🏾‍♀️🚴🏾‍♂️🚴🏿‍♀️🚴🏿‍♂️🚵‍♀️🚵‍♂️🚵🏻‍♀️🚵🏻‍♂️🚵🏼‍♀️🚵🏼‍♂️🚵🏽‍♀️🚵🏽‍♂️🚵🏾‍♀️🚵🏾‍♂️🚵🏿‍♀️🚵🏿‍♂️🚶‍♀️🚶‍♂️🚶🏻‍♀️🚶🏻‍♂️🚶🏼‍♀️🚶🏼‍♂️🚶🏽‍♀️🚶🏽‍♂️🚶🏾‍♀️🚶🏾‍♂️🚶🏿‍♀️🚶🏿‍♂️🤸‍♀️🤸‍♂️🤸🏻‍♀️🤸🏻‍♂️🤸🏼‍♀️🤸🏼‍♂️🤸🏽‍♀️🤸🏽‍♂️🤸🏾‍♀️🤸🏾‍♂️🤸🏿‍♀️🤸🏿‍♂️🤹‍♀️🤹‍♂️🤹🏻‍♀️🤹🏻‍♂️🤹🏼‍♀️🤹🏼‍♂️🤹🏽‍♀️🤹🏽‍♂️🤹🏾‍♀️🤹🏾‍♂️🤹🏿‍♀️🤹🏿‍♂️🤼‍♀️🤼‍♂️🤽‍♀️🤽‍♂️🤽🏻‍♀️🤽🏻‍♂️🤽🏼‍♀️🤽🏼‍♂️🤽🏽‍♀️🤽🏽‍♂️🤽🏾‍♀️🤽🏾‍♂️🤽🏿‍♀️🤽🏿‍♂️🤾‍♀️🤾‍♂️🤾🏻‍♀️🤾🏻‍♂️🤾🏼‍♀️🤾🏼‍♂️🤾🏽‍♀️🤾🏽‍♂️🤾🏾‍♀️🤾🏾‍♂️🤾🏿‍♀️🤾🏿‍♂️🧖‍♀️🧖‍♂️🧖🏻‍♀️🧖🏻‍♂️🧖🏼‍♀️🧖🏼‍♂️🧖🏽‍♀️🧖🏽‍♂️🧖🏾‍♀️🧖🏾‍♂️🧖🏿‍♀️🧖🏿‍♂️🧗‍♀️🧗‍♂️🧗🏻‍♀️🧗🏻‍♂️🧗🏼‍♀️🧗🏼‍♂️🧗🏽‍♀️🧗🏽‍♂️🧗🏾‍♀️🧗🏾‍♂️🧗🏿‍♀️🧗🏿‍♂️🧘‍♀️🧘‍♂️🧘🏻‍♀️🧘🏻‍♂️🧘🏼‍♀️🧘🏼‍♂️🧘🏽‍♀️🧘🏽‍♂️🧘🏾‍♀️🧘🏾‍♂️🧘🏿‍♀️🧘🏿‍♂️💁‍♀️💁‍♂️💁🏻‍♀️💁🏻‍♂️💁🏼‍♀️💁🏼‍♂️💁🏽‍♀️💁🏽‍♂️💁🏾‍♀️💁🏾‍♂️💁🏿‍♀️💁🏿‍♂️🙅‍♀️🙅‍♂️🙅🏻‍♀️🙅🏻‍♂️🙅🏼‍♀️🙅🏼‍♂️🙅🏽‍♀️🙅🏽‍♂️🙅🏾‍♀️🙅🏾‍♂️🙅🏿‍♀️🙅🏿‍♂️🙆‍♀️🙆‍♂️🙆🏻‍♀️🙆🏻‍♂️🙆🏼‍♀️🙆🏼‍♂️🙆🏽‍♀️🙆🏽‍♂️🙆🏾‍♀️🙆🏾‍♂️🙆🏿‍♀️🙆🏿‍♂️🙇‍♀️🙇‍♂️🙇🏻‍♀️🙇🏻‍♂️🙇🏼‍♀️🙇🏼‍♂️🙇🏽‍♀️🙇🏽‍♂️🙇🏾‍♀️🙇🏾‍♂️🙇🏿‍♀️🙇🏿‍♂️🙋‍♀️🙋‍♂️🙋🏻‍♀️🙋🏻‍♂️🙋🏼‍♀️🙋🏼‍♂️🙋🏽‍♀️🙋🏽‍♂️🙋🏾‍♀️🙋🏾‍♂️🙋🏿‍♀️🙋🏿‍♂️🙍‍♀️🙍‍♂️🙍🏻‍♀️🙍🏻‍♂️🙍🏼‍♀️🙍🏼‍♂️🙍🏽‍♀️🙍🏽‍♂️🙍🏾‍♀️🙍🏾‍♂️🙍🏿‍♀️🙍🏿‍♂️🙎‍♀️🙎‍♂️🙎🏻‍♀️🙎🏻‍♂️🙎🏼‍♀️🙎🏼‍♂️🙎🏽‍♀️🙎🏽‍♂️🙎🏾‍♀️🙎🏾‍♂️🙎🏿‍♀️🙎🏿‍♂️🤦‍♀️🤦‍♂️🤦🏻‍♀️🤦🏻‍♂️🤦🏼‍♀️🤦🏼‍♂️🤦🏽‍♀️🤦🏽‍♂️🤦🏾‍♀️🤦🏾‍♂️🤦🏿‍♀️🤦🏿‍♂️🤷‍♀️🤷‍♂️🤷🏻‍♀️🤷🏻‍♂️🤷🏼‍♀️🤷🏼‍♂️🤷🏽‍♀️🤷🏽‍♂️🤷🏾‍♀️🤷🏾‍♂️🤷🏿‍♀️🤷🏿‍♂️</div>
        </div>
    </body>
    </html>
  `);
  var session = await page.createSession();
  testRunner.log('Test passes if emoji are renderered using only Noto Color Emoji, no glyphs from Linux Libertine.');
  testRunner.log('Note: Emoji rendering output in this text only representation is not equivalent to internal page appearance.');

  var helper = await testRunner.loadScript('./resources/layout-font-test.js');
  var results = await helper(testRunner, session);

  var emoji_fonts = results.find(x => x.selector === '#emoji_male_female_zwj_sequences').usedFonts;
  var passed = (emoji_fonts.length === 1 && emoji_fonts[0].familyName.includes('Emoji'));
  testRunner.log(passed ? 'PASS' : 'FAIL');
  testRunner.completeTest();
})
chromium/third_party/blink/web_tests/inspector-protocol/layout-fonts/emoji-cluster-fallback.js
