Changeset 36160 for trunk

Timestamp:

01/03/2016 04:25:52 AM (9 years ago)

Author:

pento

Message:

Emoji: Add a test to the emoji loader, to see if the browser supports emoji diversity. If it doesn't, fall back to twemoji.

See #33592.

Location:

trunk/src/wp-includes/js

Files:

• wp-emoji-loader.js (modified) (4 diffs)
• wp-emoji.js (modified) (2 diffs)

trunk/src/wp-includes/js/wp-emoji-loader.js

@@ -13 +13 @@
     function browserSupportsEmoji( type ) {
         var canvas = document.createElement( 'canvas' ),
-            context = canvas.getContext && canvas.getContext( '2d' );
+            context = canvas.getContext && canvas.getContext( '2d' ),
+            tone;
 
         if ( ! context || ! context.fillText ) {
@@ -39 +40 @@
             context.fillText( String.fromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
             return canvas.toDataURL().length > 3000;
+        } else if ( 'diversity' === type ) {
+            /*
+             * 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( String.fromCharCode( 55356, 57221 ), 0, 0 );
+            tone = context.getImageData( 16, 16, 1, 1 ).data.toString();
+            context.fillText( String.fromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
+            // Chrome has issues comparing arrays, so we compare it as a  string, instead.
+            return tone !== context.getImageData( 16, 16, 1, 1 ).data.toString();
         } else {
             if ( 'simple' === type ) {
@@ -67 +79 @@
 
     settings.supports = {
-        simple:   browserSupportsEmoji( 'simple' ),
-        flag:     browserSupportsEmoji( 'flag' ),
-        unicode8: browserSupportsEmoji( 'unicode8' )
+        simple:    browserSupportsEmoji( 'simple' ),
+        flag:      browserSupportsEmoji( 'flag' ),
+        unicode8:  browserSupportsEmoji( 'unicode8' ),
+        diversity: browserSupportsEmoji( 'diversity' )
     };
 
@@ -77 +90 @@
     };
 
-    if ( ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 ) {
+    if ( ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity ) {
         ready = function() {
             settings.readyCallback();

trunk/src/wp-includes/js/wp-emoji.js

@@ -150 +150 @@
                     }
 
-                    if ( ! settings.supports.flag && settings.supports.simple && settings.supports.unicode8 &&
+                    if ( ! settings.supports.flag && settings.supports.simple && settings.supports.unicode8 && settings.supports.diversity &&
                         ! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) {
 
@@ -179 +179 @@
          */
         if ( settings ) {
-            replaceEmoji = ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8;
+            replaceEmoji = ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 || ! settings.supports.diversity;
 
             if ( settings.DOMReady ) {