Puppeteer: Removed pixelmatch dependency. (#32656)

package-lock.json

@@ -21,7 +21,6 @@
         "jpeg-js": "^0.4.4",
         "jsdoc": "^4.0.5",
         "magic-string": "^0.30.0",
-        "pixelmatch": "^7.0.0",
         "pngjs": "^7.0.0",
         "puppeteer": "^24.25.0",
         "qunit": "^2.19.4",
@@ -2927,19 +2926,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pixelmatch": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.1.0.tgz",
-      "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "pngjs": "^7.0.0"
-      },
-      "bin": {
-        "pixelmatch": "bin/pixelmatch"
-      }
-    },
     "node_modules/pngjs": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",

package.json

@@ -106,7 +106,6 @@
     "jsdoc": "^4.0.5",
     "pngjs": "^7.0.0",
     "magic-string": "^0.30.0",
-    "pixelmatch": "^7.0.0",
     "puppeteer": "^24.25.0",
     "qunit": "^2.19.4",
     "rollup": "^4.6.0",

test/e2e/image.js

@@ -102,6 +102,52 @@ class Image {
 
 	}
 
+	compare( other, diff, threshold = 0.1 ) {
+
+		if ( this.width !== other.width || this.height !== other.height ) {
+
+			throw new Error( 'Image sizes do not match' );
+
+		}
+
+		const maxDelta = 255 * 255 * 3; // Max squared distance in RGB space
+		let numDiffPixels = 0;
+
+		for ( let i = 0; i < this.data.length; i += 4 ) {
+
+			const dr = this.data[ i ] - other.data[ i ];
+			const dg = this.data[ i + 1 ] - other.data[ i + 1 ];
+			const db = this.data[ i + 2 ] - other.data[ i + 2 ];
+
+			// Squared Euclidean distance normalized to 0-1
+			const delta = ( dr * dr + dg * dg + db * db ) / maxDelta;
+
+			if ( delta > threshold * threshold ) {
+
+				numDiffPixels ++;
+
+				// Mark difference in red
+				diff.data[ i ] = 255;
+				diff.data[ i + 1 ] = 0;
+				diff.data[ i + 2 ] = 0;
+				diff.data[ i + 3 ] = 255;
+
+			} else {
+
+				// Dim matching pixels
+				diff.data[ i ] = this.data[ i ] * 0.2;
+				diff.data[ i + 1 ] = this.data[ i + 1 ] * 0.2;
+				diff.data[ i + 2 ] = this.data[ i + 2 ] * 0.2;
+				diff.data[ i + 3 ] = 255;
+
+			}
+
+		}
+
+		return numDiffPixels;
+
+	}
+
 	async write( filepath, quality = 95 ) {
 
 		const rawImageData = {

test/e2e/puppeteer.js

@@ -1,5 +1,4 @@
 import puppeteer from 'puppeteer';
-import pixelmatch from 'pixelmatch';
 import { Image } from './image.js';
 import * as fs from 'fs/promises';
 import { createServer } from '../../utils/server.js';
@@ -524,16 +523,13 @@ async function makeAttempt( page, failedScreenshots, cleanPage, isMakeScreenshot
 
 			try {
 
-				numDifferentPixels = pixelmatch( expected.bitmap.data, actual.data, diff.bitmap.data, actual.width, actual.height, {
-					threshold: pixelThreshold,
-					alpha: 0.2
-				} );
+				numDifferentPixels = expected.compare( screenshot, diff, pixelThreshold );
 
 			} catch ( e ) {
 
 				await screenshot.write( `test/e2e/output-screenshots/${ file }-actual.jpg`, jpgQuality );
 				await expected.write( `test/e2e/output-screenshots/${ file }-expected.jpg`, jpgQuality );
-				throw new Error( `Image sizes does not match in file: ${ file }` );
+				throw new Error( `Image sizes do not match in file: ${ file }` );
 
 			}