fix(ssim-cie94): further tune SSIM-CIE94 to fight wk artifacts (#19370)

This patch adds a grid border around the image so that the SSIM
resolution doesn't drop for the border pixels.

We also add a test with WebKit rendering artifacts to make sure
new approach helps to fight this.

packages/playwright-core/src/image_tools/compare.ts

@@ -37,22 +37,34 @@ export function compare(actual: Buffer, expected: Buffer, diff: Buffer, width: n
   const {
     maxColorDeltaE94
   } = options;
-  const [r1, g1, b1] = ImageChannel.intoRGB(width, height, expected);
-  const [r2, g2, b2] = ImageChannel.intoRGB(width, height, actual);
 
-  const drawRedPixel = (x: number, y: number) => drawPixel(width, diff, x, y, 255, 0, 0);
+  const paddingSize = Math.max(VARIANCE_WINDOW_RADIUS, SSIM_WINDOW_RADIUS);
-  const drawYellowPixel = (x: number, y: number) => drawPixel(width, diff, x, y, 255, 255, 0);
+  const paddingColorEven = [255, 0, 255];
+  const paddingColorOdd = [0, 255, 0];
+  const [r1, g1, b1] = ImageChannel.intoRGB(width, height, expected, {
+    paddingSize,
+    paddingColorEven,
+    paddingColorOdd,
+  });
+  const [r2, g2, b2] = ImageChannel.intoRGB(width, height, actual, {
+    paddingSize,
+    paddingColorEven,
+    paddingColorOdd,
+  });
+
+  const drawRedPixel = (x: number, y: number) => drawPixel(width, diff, x - paddingSize, y - paddingSize, 255, 0, 0);
+  const drawYellowPixel = (x: number, y: number) => drawPixel(width, diff, x - paddingSize, y - paddingSize, 255, 255, 0);
   const drawGrayPixel = (x: number, y: number) => {
     const gray = rgb2gray(r1.get(x, y), g1.get(x, y), b1.get(x, y));
     const value = blendWithWhite(gray, 0.1);
-    drawPixel(width, diff, x, y, value, value, value);
+    drawPixel(width, diff, x - paddingSize, y - paddingSize, value, value, value);
   };
 
   let fastR, fastG, fastB;
 
   let diffCount = 0;
-  for (let y = 0; y < height; ++y){
+  for (let y = paddingSize; y < r1.height - paddingSize; ++y){
-    for (let x = 0; x < width; ++x) {
+    for (let x = paddingSize; x < r1.width - paddingSize; ++x) {
       // Fast-path: equal pixels.
       if (r1.get(x, y) === r2.get(x, y) && g1.get(x, y) === g2.get(x, y) && b1.get(x, y) === b2.get(x, y)) {
         drawGrayPixel(x, y);

packages/playwright-core/src/image_tools/imageChannel.ts

@@ -16,29 +16,49 @@
 
 import { blendWithWhite } from './colorUtils';
 
+export type PaddingOptions = {
+  paddingSize?: number,
+  paddingColorOdd?: number[],
+  paddingColorEven?: number[],
+};
+
 export class ImageChannel {
   data: Uint8Array;
   width: number;
   height: number;
 
-  static intoRGB(width: number, height: number, data: Buffer): ImageChannel[] {
+  static intoRGB(width: number, height: number, data: Buffer, options: PaddingOptions = {}): ImageChannel[] {
-    const r = new Uint8Array(width * height);
+    const {
-    const g = new Uint8Array(width * height);
+      paddingSize = 0,
-    const b = new Uint8Array(width * height);
+      paddingColorOdd = [255, 0, 255],
-    for (let y = 0; y < height; ++y) {
+      paddingColorEven = [0, 255, 0],
-      for (let x = 0; x < width; ++x) {
+    } = options;
-        const index = y * width + x;
+    const newWidth = width + 2 * paddingSize;
-        const offset = index * 4;
+    const newHeight = height + 2 * paddingSize;
-        const alpha = data[offset + 3] === 255 ? 1 : data[offset + 3] / 255;
+    const r = new Uint8Array(newWidth * newHeight);
-        r[index] = blendWithWhite(data[offset], alpha);
+    const g = new Uint8Array(newWidth * newHeight);
-        g[index] = blendWithWhite(data[offset + 1], alpha);
+    const b = new Uint8Array(newWidth * newHeight);
-        b[index] = blendWithWhite(data[offset + 2], alpha);
+    for (let y = 0; y < newHeight; ++y) {
+      for (let x = 0; x < newWidth; ++x) {
+        const index = y * newWidth + x;
+        if (y >= paddingSize && y < newHeight - paddingSize && x >= paddingSize && x < newWidth - paddingSize) {
+          const offset = ((y - paddingSize) * width + (x - paddingSize)) * 4;
+          const alpha = data[offset + 3] === 255 ? 1 : data[offset + 3] / 255;
+          r[index] = blendWithWhite(data[offset], alpha);
+          g[index] = blendWithWhite(data[offset + 1], alpha);
+          b[index] = blendWithWhite(data[offset + 2], alpha);
+        } else {
+          const color = (y + x) % 2 === 0 ? paddingColorEven : paddingColorOdd;
+          r[index] = color[0];
+          g[index] = color[1];
+          b[index] = color[2];
+        }
       }
     }
     return [
-      new ImageChannel(width, height, r),
+      new ImageChannel(newWidth, newHeight, r),
-      new ImageChannel(width, height, g),
+      new ImageChannel(newWidth, newHeight, g),
-      new ImageChannel(width, height, b),
+      new ImageChannel(newWidth, newHeight, b),
     ];
   }