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
This commit is contained in:
Gary Pendergast 2016-01-03 04:25:52 +00:00
parent 23b10789d4
commit 59d442f921
2 changed files with 20 additions and 7 deletions

View File

@ -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();
};

View File

@ -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();