enmi-conf.org: comparison wp/wp-includes/js/wp-emoji-loader.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

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

changeset 22	8c2e4d02f4ef
parent 21	48c4eec2b7e6

equal deleted inserted replaced

-:48c4eec2b7e6
+:8c2e4d02f4ef
 	}
 	/**
 	 * Checks if two sets of Emoji characters render the same visually.
 	 *
+	 * This is used to determine if the browser is rendering an emoji with multiple data points
+	 * correctly. set1 is the emoji in the correct form, using a zero-width joiner. set2 is the emoji
+	 * in the incorrect form, using a zero-width space. If the two sets render the same, then the browser
+	 * does not support the emoji correctly.
+	 *
 	 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
 	 * scope. Everything must be passed by parameters.
 	 *
 	 * @since 4.9.0
 	 *
 			return rendered2Data === rendered2[ index ];
 		} );
 	}
 	/**
+	 * Checks if the center point of a single emoji is empty.
+	 *
+	 * This is used to determine if the browser is rendering an emoji with a single data point
+	 * correctly. The center point of an incorrectly rendered emoji will be empty. A correctly
+	 * rendered emoji will have a non-zero value at the center point.
+	 *
+	 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
+	 * scope. Everything must be passed by parameters.
+	 *
+	 * @since 6.8.2
+	 *
+	 * @private
+	 *
+	 * @param {CanvasRenderingContext2D} context 2D Context.
+	 * @param {string} emoji Emoji to test.
+	 *
+	 * @return {boolean} True if the center point is empty.
+	 */
+	function emojiRendersEmptyCenterPoint( context, emoji ) {
+		// Cleanup from previous test.
+		context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
+		context.fillText( emoji, 0, 0 );
+		// Test if the center point (16, 16) is empty (0,0,0,0).
+		var centerPoint = context.getImageData(16, 16, 1, 1);
+		for ( var i = 0; i < centerPoint.data.length; i++ ) {
+			if ( centerPoint.data[ i ] !== 0 ) {
+				// Stop checking the moment it's known not to be empty.
+				return false;
+			}
+		}
+		return true;
+	}
+	/**
 	 * Determines if the browser properly renders Emoji that Twemoji can supplement.
 	 *
 	 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
 	 * scope. Everything must be passed by parameters.
 	 *
 	 * @private
 	 *
 	 * @param {CanvasRenderingContext2D} context 2D Context.
 	 * @param {string} type Whether to test for support of "flag" or "emoji".
 	 * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
+	 * @param {Function} emojiRendersEmptyCenterPoint Reference to emojiRendersEmptyCenterPoint function, needed due to minification.
 	 *
 	 * @return {boolean} True if the browser can render emoji, false if it cannot.
 	 */
-	function browserSupportsEmoji( context, type, emojiSetsRenderIdentically ) {
+	function browserSupportsEmoji( context, type, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint ) {
 		var isIdentical;
 		switch ( type ) {
 			case 'flag':
 				/*
 				if ( isIdentical ) {
 					return false;
 				}
 				/*
-				 * Test for UN flag compatibility. This is the least supported of the letter locale flags,
+				 * Test for Sark flag compatibility. This is the least supported of the letter locale flags,
 				 * so gives us an easy test for full support.
 				 *
 				 * 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]).
+				 * the browser doesn't render it correctly ([C] + [Q]).
 				 */
 				isIdentical = emojiSetsRenderIdentically(
 					context,
-					'\uD83C\uDDFA\uD83C\uDDF3', // as the sequence of two code points
+					'\uD83C\uDDE8\uD83C\uDDF6', // as the sequence of two code points
-					'\uD83C\uDDFA\u200B\uD83C\uDDF3' // as the two code points separated by a zero-width space
+					'\uD83C\uDDE8\u200B\uD83C\uDDF6' // as the two code points separated by a zero-width space
 				);
 				if ( isIdentical ) {
 					return false;
 				}
 				);
 				return ! isIdentical;
 			case 'emoji':
 				/*
-				 * Four and twenty blackbirds baked in a pie.
+				 * Does Emoji 16.0 cause the browser to go splat?
 				 *
-				 * To test for Emoji 15.0 support, try to render a new emoji: Blackbird.
+				 * To test for Emoji 16.0 support, try to render a new emoji: Splatter.
 				 *
-				 * The Blackbird is a ZWJ sequence combining 🐦 Bird and ⬛ large black square.,
+				 * The splatter emoji is a single code point emoji. Testing for browser support
-				 *
+				 * required testing the center point of the emoji to see if it is empty.
-				 * 0x1F426 (\uD83D\uDC26) == Bird
+				 *
-				 * 0x200D == Zero-Width Joiner (ZWJ) that links the code points for the new emoji or
+				 * 0xD83E 0xDEDF (\uD83E\uDEDF) == 🫟 Splatter.
-				 * 0x200B == Zero-Width Space (ZWS) that is rendered for clients not supporting the new emoji.
+				 *
-				 * 0x2B1B == Large Black Square
+				 * When updating this test, please ensure that the emoji is either a single code point
-				 *
+				 * or switch to using the emojiSetsRenderIdentically function and testing with a zero-width
-				 * When updating this test for future Emoji releases, ensure that individual emoji that make up the
+				 * joiner vs a zero-width space.
-				 * sequence come from older emoji standards.
 				 */
-				isIdentical = emojiSetsRenderIdentically(
+				var notSupported = emojiRendersEmptyCenterPoint( context, '\uD83E\uDEDF' );
-					context,
+				return ! notSupported;
-					'\uD83D\uDC26\u200D\u2B1B', // as the zero-width joiner sequence
-					'\uD83D\uDC26\u200B\u2B1B' // separated by a zero-width space
-				);
-				return ! isIdentical;
 		}
 		return false;
 	}
 	 * @private
 	 *
 	 * @param {string[]} tests Tests.
 	 * @param {Function} browserSupportsEmoji Reference to browserSupportsEmoji function, needed due to minification.
 	 * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
+	 * @param {Function} emojiRendersEmptyCenterPoint Reference to emojiRendersEmptyCenterPoint function, needed due to minification.
 	 *
 	 * @return {SupportTests} Support tests.
 	 */
-	function testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically ) {
+	function testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint ) {
 		var canvas;
 		if (
 			typeof WorkerGlobalScope !== 'undefined' &&
 			self instanceof WorkerGlobalScope
 		) {
 		context.textBaseline = 'top';
 		context.font = '600 32px Arial';
 		var supports = {};
 		tests.forEach( function ( test ) {
-			supports[ test ] = browserSupportsEmoji( context, test, emojiSetsRenderIdentically );
+			supports[ test ] = browserSupportsEmoji( context, test, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint );
 		} );
 		return supports;
 	}
 	/**
 					testEmojiSupports.toString() +
 					'(' +
 					[
 						JSON.stringify( tests ),
 						browserSupportsEmoji.toString(),
-						emojiSetsRenderIdentically.toString()
+						emojiSetsRenderIdentically.toString(),
+						emojiRendersEmptyCenterPoint.toString()
 					].join( ',' ) +
 					'));';
 				var blob = new Blob( [ workerScript ], {
 					type: 'text/javascript'
 				} );
 				};
 				return;
 			} catch ( e ) {}
 		}
-		supportTests = testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically );
+		supportTests = testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint );
 		setSessionSupportTests( supportTests );
 		resolve( supportTests );
 	} )
 		// Once the browser emoji support has been obtained from the session, finalize the settings.
 		.then( function ( supportTests ) {

enmi-conf.org