Make WordPress Core

Changeset 41669


Ignore:
Timestamp:
10/02/2017 03:59:50 AM (6 years ago)
Author:
peterwilsoncc
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/wp-emoji-loader.js

    r41386 r41669  
    1010
    1111    /**
     12     * Check if two sets of Emoji characters render the same.
     13     *
     14     * @param set1 array Set of Emoji characters.
     15     * @param set2 array Set of Emoji characters.
     16     * @returns {boolean} True if the two sets render the same.
     17     */
     18    function emojiSetsRenderIdentically( set1, set2 ) {
     19        var stringFromCharCode = String.fromCharCode;
     20
     21        // Cleanup from previous test.
     22        context.clearRect( 0, 0, canvas.width, canvas.height );
     23        context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
     24        var rendered1 = canvas.toDataURL();
     25
     26        // Cleanup from previous test.
     27        context.clearRect( 0, 0, canvas.width, canvas.height );
     28        context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
     29        var rendered2 = canvas.toDataURL();
     30
     31        return rendered1 === rendered2;
     32    }
     33
     34    /**
    1235     * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
    1336     * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
     
    1538     * @since 4.2.0
    1639     *
    17      * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
     40     * @param type {String} Whether to test for support of "flag" or "emoji".
    1841     * @return {Boolean} True if the browser can render emoji, false if it cannot.
    1942     */
    2043    function browserSupportsEmoji( type ) {
    21         var stringFromCharCode = String.fromCharCode,
    22             flag, flag2, emoji41, emoji42;
     44        var isIdentical;
    2345
    2446        if ( ! context || ! context.fillText ) {
    2547            return false;
    2648        }
    27 
    28         // Cleanup from previous test.
    29         context.clearRect( 0, 0, canvas.width, canvas.height );
    3049
    3150        /*
     
    4665                 * the browser doesn't render it correctly ([U] + [N]).
    4766                 */
    48                 context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
    49                 flag = canvas.toDataURL();
     67                isIdentical = emojiSetsRenderIdentically(
     68                    [ 55356, 56826, 55356, 56819 ],
     69                    [ 55356, 56826, 8203, 55356, 56819 ]
     70                );
    5071
    51                 context.clearRect( 0, 0, canvas.width, canvas.height );
    52 
    53                 // Add a zero width space between the characters, to force rendering as characters.
    54                 context.fillText( stringFromCharCode( 55356, 56826, 8203, 55356, 56819 ), 0, 0 );
    55                 flag2 = canvas.toDataURL();
    56 
    57                 if ( flag === flag2 ) {
     72                if ( isIdentical ) {
    5873                    return false;
    5974                }
     
    6681                 * the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
    6782                 */
    68                 // Cleanup from previous test.
    69                 context.clearRect( 0, 0, canvas.width, canvas.height );
     83                isIdentical = emojiSetsRenderIdentically(
     84                    [ 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ],
     85                    [ 55356, 57332, 8203, 56128, 56423, 8203, 56128, 56418, 8203, 56128, 56421, 8203, 56128, 56430, 8203, 56128, 56423, 8203, 56128, 56447 ]
     86                );
    7087
    71                 context.fillText( stringFromCharCode( 55356, 57332, 56128, 56423, 56128, 56418, 56128, 56421, 56128, 56430, 56128, 56423, 56128, 56447 ), 0, 0 );
    72                 flag = canvas.toDataURL();
    73 
    74                 context.clearRect( 0, 0, canvas.width, canvas.height );
    75 
    76                 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 );
    77                 flag2 = canvas.toDataURL();
    78 
    79                 return flag !== flag2;
    80             case 'emoji4':
     88                return ! isIdentical;
     89            case 'emoji':
    8190                /*
    8291                 * Emoji 5 has fairies of all genders.
     
    8695                 * (fairy + male sign).
    8796                 */
    88                 context.fillText( stringFromCharCode( 55358, 56794, 8205, 9794, 65039 ), 0, 0 );
    89                 emoji41 = canvas.toDataURL();
    90 
    91                 context.clearRect( 0, 0, canvas.width, canvas.height );
    92 
    93                 context.fillText( stringFromCharCode( 55358, 56794, 8203, 9794, 65039 ), 0, 0 );
    94                 emoji42 = canvas.toDataURL();
    95 
    96                 return emoji41 !== emoji42;
     97                isIdentical = emojiSetsRenderIdentically(
     98                    [ 55358, 56794, 8205, 9794, 65039 ],
     99                    [ 55358, 56794, 8203, 9794, 65039 ]
     100                );
     101                return ! isIdentical;
    97102        }
    98103
     
    108113    }
    109114
    110     tests = Array( 'flag', 'emoji4' );
     115    tests = Array( 'flag', 'emoji' );
    111116
    112117    settings.supports = {
Note: See TracChangeset for help on using the changeset viewer.