From 64c86dcdd68a905671f302e44fa0ae0be573bb19 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 21:34:44 +0300
Subject: [PATCH] visual-diff: mask Angular-only test-env chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Paint 3 known noise regions white in both screenshots before pixel-
matching:
  - top-left ~200×90 (debug counter + orange `Тестовая версия` badge)
  - top-right ~240×50 (build tag like `rc/2026-04-06`)
  - bottom-right ~90×90 (chat-widget bubble)

These show only on the deployed Angular test env, not in the React
dev build, and were inflating every parity score by ~1-2pp.

Mismatch deltas vs prior run:
  en-onlineboard-route       4.62% → 4.45%
  flight-details            11.24% → 10.82%
  mobile-flight-details     17.92% → 16.58%
  mobile-onlineboard-start  20.37% → 18.66%
  onlineboard-arrival        4.63% → 4.46%
  onlineboard-departure      5.03% → 4.86%
  onlineboard-route          4.78% → 4.60%
  onlineboard-start         14.52% → 13.77%
  schedule-route            12.47% → 11.87%
  schedule-start            13.39% → 12.86%
  flights-map               37.28% → 36.40%
---
 scripts/visual-diff.mjs | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/scripts/visual-diff.mjs b/scripts/visual-diff.mjs
index 6b482df3..7136dd13 100644
--- a/scripts/visual-diff.mjs
+++ b/scripts/visual-diff.mjs
@@ -28,6 +28,39 @@ const STATS_PATH = join(ROOT, "comparison-report/visual/diff-stats.json");
 
 mkdirSync(DIFFS_DIR, { recursive: true });
 
+/**
+ * Paint a rectangle white. Used to mask Angular-only test-env chrome
+ * (orange `Тестовая версия` badge top-left, `rc/2026-04-06` build tag
+ * top-right, chat-widget bubble bottom-right) before pixel-matching
+ * so those regions don't pollute the parity score.
+ */
+function maskRect(png, x, y, w, h) {
+  const x0 = Math.max(0, x);
+  const y0 = Math.max(0, y);
+  const x1 = Math.min(png.width, x + w);
+  const y1 = Math.min(png.height, y + h);
+  for (let yy = y0; yy < y1; yy++) {
+    for (let xx = x0; xx < x1; xx++) {
+      const idx = (yy * png.width + xx) * 4;
+      png.data[idx] = 255;
+      png.data[idx + 1] = 255;
+      png.data[idx + 2] = 255;
+      png.data[idx + 3] = 255;
+    }
+  }
+}
+
+/** Apply the standard chrome masks to both PNGs in-place. */
+function applyChromeMasks(png) {
+  const isMobile = png.width <= 500;
+  // Top-left debug counter / orange "Тестовая версия" badge.
+  maskRect(png, 0, 0, isMobile ? 200 : 200, 90);
+  // Top-right `rc/...` build tag.
+  maskRect(png, png.width - 240, 0, 240, 50);
+  // Bottom-right chat widget.
+  maskRect(png, png.width - 90, png.height - 90, 90, 90);
+}
+
 const files = readdirSync(SRC_DIR);
 const reactFiles = files.filter((f) => f.startsWith("react-") && f.endsWith(".png"));
 
@@ -70,6 +103,13 @@ for (const reactFile of reactFiles) {
 
   const aP = pad(aPng);
   const rP = pad(rPng);
+
+  // Strip Angular-only chrome (orange test-env badge, build tag, chat
+  // widget) from both sides — those regions are environmental noise
+  // that shouldn't drag the parity score down.
+  applyChromeMasks(aP);
+  applyChromeMasks(rP);
+
   const diffPng = new PNG({ width, height });
 
   const mismatchCount = pixelmatch(