Emoji: Refactor browser support tests.
Moves the repeated code in the emoji browser support test to a function to reduced the potential for errors and follow DRY principles. Renames the "emoji4" test "emoji" as unicode version specific tests were removed in [38869]. Props peterwilsoncc, pento for code review. Fixes #41156. Built from https://develop.svn.wordpress.org/trunk@41669 git-svn-id: http://core.svn.wordpress.org/trunk@41503 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
5ccf8eebb7
commit
8294b40161
|
@ -5093,7 +5093,7 @@ function _print_emoji_detection_script() {
|
|||
?>
|
||||
<script type="text/javascript">
|
||||
window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
|
||||
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
|
||||
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56794,8205,9794,65039],[55358,56794,8203,9794,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
|
|
@ -8,26 +8,45 @@
|
|||
var canvas = document.createElement( 'canvas' );
|
||||
var context = canvas.getContext && canvas.getContext( '2d' );
|
||||
|
||||
/**
|
||||
* Check if two sets of Emoji characters render the same.
|
||||
*
|
||||
* @param set1 array Set of Emoji characters.
|
||||
* @param set2 array Set of Emoji characters.
|
||||
* @returns {boolean} True if the two sets render the same.
|
||||
*/
|
||||
function emojiSetsRenderIdentically( set1, set2 ) {
|
||||
var stringFromCharCode = String.fromCharCode;
|
||||
|
||||
// Cleanup from previous test.
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
|
||||
var rendered1 = canvas.toDataURL();
|
||||
|
||||
// Cleanup from previous test.
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
|
||||
var rendered2 = canvas.toDataURL();
|
||||
|
||||
return rendered1 === rendered2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
|
||||
* made of two characters, so some browsers (notably, Firefox OS X) don't support them.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
|
||||
* @param type {String} Whether to test for support of "flag" or "emoji".
|
||||
* @return {Boolean} True if the browser can render emoji, false if it cannot.
|
||||
*/
|
||||
function browserSupportsEmoji( type ) {
|
||||
var stringFromCharCode = String.fromCharCode,
|
||||
flag, flag2, emoji41, emoji42;
|
||||
var isIdentical;
|
||||
|
||||
if ( ! context || ! context.fillText ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Cleanup from previous test.
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
|
||||
/*
|
||||
* Chrome on OS X added native emoji rendering in M41. Unfortunately,
|
||||
* it doesn't work when the font is bolder than 500 weight. So, we
|
||||
|
@ -45,16 +64,12 @@
|
|||
* To test for support, we try to render it, and compare the rendering to how it would look if
|
||||
* the browser doesn't render it correctly ([U] + [N]).
|
||||
*/
|
||||
context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
|
||||
flag = canvas.toDataURL();
|
||||
isIdentical = emojiSetsRenderIdentically(
|
||||
[ 55356, 56826, 55356, 56819 ],
|
||||
[ 55356, 56826, 8203, 55356, 56819 ]
|
||||
);
|
||||
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
|
||||
// Add a zero width space between the characters, to force rendering as characters.
|
||||
context.fillText( stringFromCharCode( 55356, 56826, 8203, 55356, 56819 ), 0, 0 );
|
||||
flag2 = canvas.toDataURL();
|
||||
|
||||
if ( flag === flag2 ) {
|
||||
if ( isIdentical ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
@ -65,19 +80,13 @@
|
|||
* To test for support, we try to render it, and compare the rendering to how it would look if
|
||||
* the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
|
||||
*/
|
||||
// Cleanup from previous test.
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
isIdentical = emojiSetsRenderIdentically(
|
||||
[ 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ],
|
||||
[ 55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447 ]
|
||||
);
|
||||
|
||||
context.fillText( stringFromCharCode( 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ), 0, 0 );
|
||||
flag = canvas.toDataURL();
|
||||
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
|
||||
context.fillText( stringFromCharCode( 55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447 ), 0, 0 );
|
||||
flag2 = canvas.toDataURL();
|
||||
|
||||
return flag !== flag2;
|
||||
case 'emoji4':
|
||||
return ! isIdentical;
|
||||
case 'emoji':
|
||||
/*
|
||||
* Emoji 5 has fairies of all genders.
|
||||
*
|
||||
|
@ -85,15 +94,11 @@
|
|||
* it to how it would look if the browser doesn't render it correctly
|
||||
* (fairy + male sign).
|
||||
*/
|
||||
context.fillText( stringFromCharCode( 55358, 56794, 8205, 9794, 65039 ), 0, 0 );
|
||||
emoji41 = canvas.toDataURL();
|
||||
|
||||
context.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
|
||||
context.fillText( stringFromCharCode( 55358, 56794, 8203, 9794, 65039 ), 0, 0 );
|
||||
emoji42 = canvas.toDataURL();
|
||||
|
||||
return emoji41 !== emoji42;
|
||||
isIdentical = emojiSetsRenderIdentically(
|
||||
[ 55358, 56794, 8205, 9794, 65039 ],
|
||||
[ 55358, 56794, 8203, 9794, 65039 ]
|
||||
);
|
||||
return ! isIdentical;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
@ -107,7 +112,7 @@
|
|||
document.getElementsByTagName( 'head' )[0].appendChild( script );
|
||||
}
|
||||
|
||||
tests = Array( 'flag', 'emoji4' );
|
||||
tests = Array( 'flag', 'emoji' );
|
||||
|
||||
settings.supports = {
|
||||
everything: true,
|
||||
|
|
|
@ -1 +1 @@
|
|||
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
|
||||
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56794,8205,9794,65039],[55358,56794,8203,9794,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-alpha-41668';
|
||||
$wp_version = '4.9-alpha-41669';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue