From 59d442f921ae13b9e051b139af26db3d61eb9e00 Mon Sep 17 00:00:00 2001
From: Gary Pendergast <pento@git.wordpress.org>
Date: Sun, 3 Jan 2016 04:25:52 +0000
Subject: [PATCH] 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@36160 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/wp-emoji-loader.js | 23 ++++++++++++++++++-----
 src/wp-includes/js/wp-emoji.js        |  4 ++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/wp-includes/js/wp-emoji-loader.js b/src/wp-includes/js/wp-emoji-loader.js
index a495f3552b..327f66a19b 100755
--- a/src/wp-includes/js/wp-emoji-loader.js
+++ b/src/wp-includes/js/wp-emoji-loader.js
@@ -12,7 +12,8 @@
 	 */
 	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 ) {
 			return false;
@@ -38,6 +39,17 @@
 			 */
 			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 ) {
 				/*
@@ -66,9 +78,10 @@
 	}
 
 	settings.supports = {
-		simple:   browserSupportsEmoji( 'simple' ),
-		flag:     browserSupportsEmoji( 'flag' ),
-		unicode8: browserSupportsEmoji( 'unicode8' )
+		simple:    browserSupportsEmoji( 'simple' ),
+		flag:      browserSupportsEmoji( 'flag' ),
+		unicode8:  browserSupportsEmoji( 'unicode8' ),
+		diversity: browserSupportsEmoji( 'diversity' )
 	};
 
 	settings.DOMReady = false;
@@ -76,7 +89,7 @@
 		settings.DOMReady = true;
 	};
 
-	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();
 		};
diff --git a/src/wp-includes/js/wp-emoji.js b/src/wp-includes/js/wp-emoji.js
index f87e083986..6fa00c2e6f 100644
--- a/src/wp-includes/js/wp-emoji.js
+++ b/src/wp-includes/js/wp-emoji.js
@@ -149,7 +149,7 @@
 							return false;
 					}
 
-					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 ) ) {
 
 						return false;
@@ -178,7 +178,7 @@
 		 * Initialize our emoji support, and set up listeners.
 		 */
 		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 ) {
 				load();