WordPress 4.5.1

[autoinstalls/wordpress.git] / 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 619157f71007ebd44bbaad39d03b59663e28c954..f242a12f2677bf5176312fb17c876a878002e969 100644 (file)
--- a/wp-includes/js/wp-emoji-loader.js
+++ b/wp-includes/js/wp-emoji-loader.js
@@ -1,5 +1,5 @@
 ( function( window, document, settings ) {
-       var src, ready;
+       var src, ready, ii, tests;
 
        /**
         * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
@@ -7,12 +7,14 @@
         *
         * @since 4.2.0
         *
-        * @param type {String} Whether to test for support of "simple" or "flag" emoji.
+        * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
         * @return {Boolean} True if the browser can render emoji, false if it cannot.
         */
        function browserSupportsEmoji( type ) {
                var canvas = document.createElement( 'canvas' ),
-                       context = canvas.getContext && canvas.getContext( '2d' );
+                       context = canvas.getContext && canvas.getContext( '2d' ),
+                       stringFromCharCode = String.fromCharCode,
+                       tonedata, tone, tone2;
 
                if ( ! context || ! context.fillText ) {
                        return false;
@@ -26,27 +28,54 @@
                context.textBaseline = 'top';
                context.font = '600 32px Arial';
 
-               if ( type === 'flag' ) {
-                       /*
-                        * This works because the image will be one of three things:
-                        * - Two empty squares, if the browser doesn't render emoji
-                        * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
-                        * - The British flag
-                        *
-                        * The first two will encode to small images (1-2KB data URLs), the third will encode
-                        * to a larger image (4-5KB data URL).
-                        */
-                       context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
-                       return canvas.toDataURL().length > 3000;
-               } else {
-                       /*
-                        * This creates a smiling emoji, and checks to see if there is any image data in the
-                        * center pixel. In browsers that don't support emoji, the character will be rendered
-                        * as an empty square, so the center pixel will be blank.
-                        */
-                       context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
-                       return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
+               switch ( type ) {
+                       case 'flag':
+                               /*
+                                * This works because the image will be one of three things:
+                                * - Two empty squares, if the browser doesn't render emoji
+                                * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
+                                * - The Australian flag
+                                *
+                                * The first two will encode to small images (1-2KB data URLs), the third will encode
+                                * to a larger image (4-5KB data URL).
+                                */
+                               context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
+                               return canvas.toDataURL().length > 3000;
+                       case 'diversity':
+                               /*
+                                * This tests if the browser supports the Emoji Diversity specification, by rendering an
+                                * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
+                                * compares if the emoji rendering has changed.
+                                */
+                               context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
+                               tonedata = context.getImageData( 16, 16, 1, 1 ).data;
+                               tone = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
+
+                               context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
+                               // Chrome has issues comparing arrays, and Safari has issues converting arrays to strings.
+                               // So, we create our own string and compare that, instead.
+                               tonedata = context.getImageData( 16, 16, 1, 1 ).data;
+                               tone2 = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
+
+                               return tone !== tone2;
+                       case 'simple':
+                               /*
+                                * This creates a smiling emoji, and checks to see if there is any image data in the
+                                * center pixel. In browsers that don't support emoji, the character will be rendered
+                                * as an empty square, so the center pixel will be blank.
+                                */
+                               context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
+                               return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
+                       case 'unicode8':
+                               /*
+                                * To check for Unicode 8 support, let's try rendering the most important advancement
+                                * that the Unicode Consortium have made in years: the burrito.
+                                */
+                               context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
+                               return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
                }
+
+               return false;
        }
 
        function addScript( src ) {
@@ -57,17 +86,31 @@
                document.getElementsByTagName( 'head' )[0].appendChild( script );
        }
 
+       tests = Array( 'simple', 'flag', 'unicode8', 'diversity' );
+
        settings.supports = {
-               simple: browserSupportsEmoji( 'simple' ),
-               flag:   browserSupportsEmoji( 'flag' )
+               everything: true,
+               everythingExceptFlag: true
        };
 
+       for( ii = 0; ii < tests.length; ii++ ) {
+               settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
+
+               settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
+
+               if ( 'flag' !== tests[ ii ] ) {
+                       settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
+               }
+       }
+
+       settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
+
        settings.DOMReady = false;
        settings.readyCallback = function() {
                settings.DOMReady = true;
        };
 
-       if ( ! settings.supports.simple || ! settings.supports.flag ) {
+       if ( ! settings.supports.everything ) {
                ready = function() {
                        settings.readyCallback();
                };