WordPress.org
Get WordPress

Make WordPress Core

Ticket #57301: 57301-2.diff

File 57301-2.diff, 4.8 KB (added by dmsnell, 3 years ago)

Patch with string literals instead of arrays of code units/points

  • wp-includes/js/wp-emoji-loader.js 

    diff --git a/wp-includes/js/wp-emoji-loader.js b/wp-includes/js/wp-emoji-loader.js
index 0b5f3c7749..9fd5440616 100644
    a b  
    1616         *
    1717         * @private
    1818         *
    19          * @param {number[]} set1 Set of Emoji character codes.
    20          * @param {number[]} set2 Set of Emoji character codes.
     19         * @param {string} set1 Set of Emoji to test.
     20         * @param {string} set2 Set of Emoji to test.
    2121         *
    2222         * @return {boolean} True if the two sets render the same.
    2323         */
    2424        function emojiSetsRenderIdentically( set1, set2 ) {
    25                 var stringFromCharCode = String.fromCharCode;
    26 
    2725                // Cleanup from previous test.
    2826                context.clearRect( 0, 0, canvas.width, canvas.height );
    29                 context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
     27                context.fillText( set1, 0, 0 );
    3028                var rendered1 = canvas.toDataURL();
    3129
    3230                // Cleanup from previous test.
    3331                context.clearRect( 0, 0, canvas.width, canvas.height );
    34                 context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
     32                context.fillText( set2, 0, 0 );
    3533                var rendered2 = canvas.toDataURL();
    3634
    3735                return rendered1 === rendered2;
    3836        }
    3937
    4038        /**
    41          * Detects if the browser supports rendering emoji or flag emoji.
     39         * Determines if the browser properly renders Emoji that Twemoji can supplement.
    4240         *
    43          * Flag emoji are a single glyph made of two characters, so some browsers
    44          * (notably, Firefox OS X) don't support them.
     41         * Input strings in this function should split supplementary plane code points
     42         * into their constituent UTF-16 code units to avoid browser compatability issues.
     43         * These are code points above U+FFFF. For example, the character 🅰 is U+1F170,
     44         * and while on newer browsers we can write that as '\u{1f170}', on older browsers
     45         * we need the code unit sequence '\uD83C\uDD70' instead (Edge < 12, Firefox < 40).
    4546         *
    4647         * @since 4.2.0
    4748         *
    … …  
    6970                switch ( type ) {
    7071                        case 'flag':
    7172                                /*
    72                                  * Test for Transgender flag compatibility. This flag is shortlisted for the Emoji 13 spec,
    73                                  * but has landed in Twemoji early, so we can add support for it, too.
     73                                 * Test for Transgender flag compatibility. Added in Unicode 13.
    7474                                 *
    7575                                 * To test for support, we try to render it, and compare the rendering to how it would look if
    7676                                 * the browser doesn't render it correctly (white flag emoji + transgender symbol).
    7777                                 */
    7878                                isIdentical = emojiSetsRenderIdentically(
    79                                         [ 0x1F3F3, 0xFE0F, 0x200D, 0x26A7, 0xFE0F ],
    80                                         [ 0x1F3F3, 0xFE0F, 0x200B, 0x26A7, 0xFE0F ]
     79                                        '\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
     80                                        '\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F', // separated by a zero-width space
    8181                                );
    8282
    8383                                if ( isIdentical ) {
    … …  
    9292                                 * the browser doesn't render it correctly ([U] + [N]).
    9393                                 */
    9494                                isIdentical = emojiSetsRenderIdentically(
    95                                         [ 0xD83C, 0xDDFA, 0xD83C, 0xDDF3 ],
    96                                         [ 0xD83C, 0xDDFA, 0x200B, 0xD83C, 0xDDF3 ]
     95                                        '\uD83C\uDDFA\uD83C\uDDF3',       // as the sequence of two code points
     96                                        '\uD83C\uDDFA\u200B\uD83C\uDDF3', // as the two code points separated by a zero-width space
    9797                                );
    9898
    9999                                if ( isIdentical ) {
    … …  
    102102
    103103                                /*
    104104                                 * Test for English flag compatibility. England is a country in the United Kingdom, it
    105                                  * does not have a two letter locale code but rather an five letter sub-division code.
     105                                 * does not have a two letter locale code but rather a five letter sub-division code.
    106106                                 *
    107107                                 * To test for support, we try to render it, and compare the rendering to how it would look if
    108108                                 * the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
    109109                                 */
    110110                                isIdentical = emojiSetsRenderIdentically(
    111                                         [ 0xD83C, 0xDFF4, 0xDB40, 0xDC67, 0xDB40, 0xDC62, 0xDB40, 0xDC65, 0xDB40, 0xDC6E, 0xDB40, 0xDC67, 0xDB40, 0xDC7F ],
    112                                         [ 0xD83C, 0xDFF4, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC62, 0x200B, 0xDB40, 0xDC65, 0x200B, 0xDB40, 0xDC6E, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC7F ]
     111                                        // as the flag sequence
     112                                        '\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
     113                                        // with each code point separated by a zero-width space
     114                                        '\uD83C\uDFF4\u200B\uDB40\uDC67\u200B\uDB40\uDC62\u200B\uDB40\uDC65\u200B\uDB40\uDC6E\u200B\uDB40\uDC67\u200B\uDB40\uDC7F',
    113115                                );
    114116
    115117                                return ! isIdentical;
    … …  
    133135                                 * sequence come from older emoji standards.
    134136                                 */
    135137                                isIdentical = emojiSetsRenderIdentically(
    136                                         [0x1FAF1, 0x1F3FB, 0x200D, 0x1FAF2, 0x1F3FF],
    137                                         [0x1FAF1, 0x1F3FB, 0x200B, 0x1FAF2, 0x1F3FF]
     138                                        '\uD83E\uDEF1\uD83C\uDFFB\u200D\uD83E\uDEF2\uD83C\uDFFF', // as the zero-width joiner sequence
     139                                        '\uD83E\uDEF1\uD83C\uDFFB\u200B\uD83E\uDEF2\uD83C\uDFFF', // separated by a zero-width space
    138140                                );
    139141
    140142                                return ! isIdentical;