WordPress.org

Make WordPress Core

Ticket #37817: 37817.2.diff

File 37817.2.diff, 4.8 KB (added by peterwilsoncc, 4 years ago)
  • src/wp-includes/js/wp-emoji-loader.js

    diff --git src/wp-includes/js/wp-emoji-loader.js src/wp-includes/js/wp-emoji-loader.js
    index 5ddea9f..0b474f8 100644
     
    11( function( window, document, settings ) {
    22        var src, ready, ii, tests;
    33
     4        /*
     5         * Create a canvas element for testing native browser support
     6         * of emoji.
     7         */
     8        var canvas = document.createElement( 'canvas' );
     9        var context = canvas.getContext && canvas.getContext( '2d' );
     10
    411        /**
    512         * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
    613         * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
    714         *
    815         * @since 4.2.0
    916         *
    10          * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
     17         * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
    1118         * @return {Boolean} True if the browser can render emoji, false if it cannot.
    1219         */
    1320        function browserSupportsEmoji( type ) {
    14                 var canvas = document.createElement( 'canvas' ),
    15                         context = canvas.getContext && canvas.getContext( '2d' ),
    16                         stringFromCharCode = String.fromCharCode,
    17                         flag, flag2, tonedata, tone, tone2, technologist, technologist2;
     21                var stringFromCharCode = String.fromCharCode,
     22                        flag, flag2, technologist, technologist2;
    1823
    1924                if ( ! context || ! context.fillText ) {
    2025                        return false;
    2126                }
    2227
     28                // Cleanup from previous test.
     29                context.clearRect( 0, 0, canvas.width, canvas.height );
     30
    2331                /*
    2432                 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
    2533                 * it doesn't work when the font is bolder than 500 weight. So, we
     
    3341                                /*
    3442                                 * This works because the image will be one of three things:
    3543                                 * - Two empty squares, if the browser doesn't render emoji
    36                                  * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
    37                                  * - The Australian flag
     44                                 * - Two squares with 'U' and 'N' in them, if the browser doesn't render flag emoji
     45                                 * - The United Nations flag
    3846                                 *
    3947                                 * The first two will encode to small images (1-2KB data URLs), the third will encode
    4048                                 * to a larger image (4-5KB data URL).
    4149                                 */
    42                                 context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
     50                                context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
    4351                                if ( canvas.toDataURL().length < 3000 ) {
    4452                                        return false;
    4553                                }
     
    6371                                flag2 = canvas.toDataURL();
    6472
    6573                                return flag !== flag2;
    66                         case 'diversity':
    67                                 /*
    68                                  * This tests if the browser supports the Emoji Diversity specification, by rendering an
    69                                  * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
    70                                  * compares if the emoji rendering has changed.
    71                                  */
    72                                 context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
    73                                 tonedata = context.getImageData( 16, 16, 1, 1 ).data;
    74                                 tone = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
    75 
    76                                 context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
    77                                 // Chrome has issues comparing arrays, and Safari has issues converting arrays to strings.
    78                                 // So, we create our own string and compare that, instead.
    79                                 tonedata = context.getImageData( 16, 16, 1, 1 ).data;
    80                                 tone2 = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
    81 
    82                                 return tone !== tone2;
    83                         case 'simple':
    84                                 /*
    85                                  * This creates a smiling emoji, and checks to see if there is any image data in the
    86                                  * center pixel. In browsers that don't support emoji, the character will be rendered
    87                                  * as an empty square, so the center pixel will be blank.
    88                                  */
    89                                 context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
    90                                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    91                         case 'unicode8':
    92                                 /*
    93                                  * To check for Unicode 8 support, let's try rendering the most important advancement
    94                                  * that the Unicode Consortium have made in years: the burrito.
    95                                  */
    96                                 context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
    97                                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    98                         case 'unicode9':
    99                                 /*
    100                                  * Do Unicode 9 emoji render?
    101                                  * ¯\_(ツ)_/¯
    102                                  */
    103                                 context.fillText( stringFromCharCode( 55358, 56631 ), 0, 0 );
    104                                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    10574                        case 'emoji4':
    10675                                /*
    10776                                 * Emoji 4 has the best technologists. So does WordPress!
     
    12897                var script = document.createElement( 'script' );
    12998
    13099                script.src = src;
    131                 script.type = 'text/javascript';
     100                script.defer = script.type = 'text/javascript';
    132101                document.getElementsByTagName( 'head' )[0].appendChild( script );
    133102        }
    134103
    135         tests = Array( 'simple', 'flag', 'unicode8', 'diversity', 'unicode9', 'emoji4' );
     104        tests = Array( 'flag', 'emoji4' );
    136105
    137106        settings.supports = {
    138107                everything: true,