results(gate-b): LIVE mask fundamentals verification — all 3 checks pass on 100.64.0.9

- overlay translucent: avgAlpha 16.0, maxAlpha 80, green fraction 20% - knobs respond fast: sensitivity 42-71ms, edge offset 18-24ms - auto sheet: slab fraction 0.200, not entire frame marked as slab Playwright tests run against deployed host with ignoreHTTPSErrors. Evidence: test-results/gate-b-2026-09-07-live-verify/ Test suite: frontend/test/bvt/live-mask.spec.ts
2026-09-07 21:56:44 +00:00
parent 5a35dbf1df
commit 247b6b9a06
6 changed files with 354 additions and 1 deletions
@@ -0,0 +1,240 @@
+/**
+ * LIVE mask verification — issue #55, Gate B.
+ *
+ * Tests three fundamentals against the deployed host:
+ * 1. Overlay translucent — photo visible, not solid green washout.
+ * 2. Knobs respond fast — debounce working, no multi-second lag.
+ * 3. Auto/green/black sheet does not mark entire frame as slab.
+ *
+ * Run with: PLAYWRIGHT_BASE_URL=https://100.64.0.9 npx playwright test test/bvt/live-mask.spec.ts
+ * Also works with: PLAYWRIGHT_BASE_URL=https://192.168.1.202 (LAN, if reachable).
+ *
+ * Uses ignoreHTTPSErrors for self-signed certs.
+ */
+import { test, expect } from '@playwright/test';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as fs from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEST_IMAGE = resolve(__dirname, 'test-slab.png');
+
+const evidenceDir = resolve(__dirname, '../../test-results/live-mask-ux');
+
+function ensureDir(dir: string) {
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+}
+
+/** Helper: upload test image and wait for mask step. */
+async function loadToMaskStep(page: import('@playwright/test').Page) {
+  const fileInput = page.locator('#photo-file-input');
+  await fileInput.setInputFiles(TEST_IMAGE);
+  await expect(page.locator('h2')).toContainText('Mask & Knobs', { timeout: 15000 });
+  await page.locator('.mask-canvas').waitFor({ state: 'visible', timeout: 15000 });
+}
+
+test.describe('LIVE mask fundamentals (issue #55)', () => {
+  test('1. Overlay translucent — photo visible under green mask, not solid green washout', async ({ page }) => {
+    await page.goto('/');
+    await loadToMaskStep(page);
+
+    // Take screenshot of the mask canvas area for evidence.
+    ensureDir(evidenceDir);
+    await page.locator('.mask-canvas').screenshot({
+      path: resolve(evidenceDir, 'mask-overlay-live.png'),
+    });
+
+    // Read canvas pixel data to assert overlay is translucent.
+    const stats = await page.evaluate(() => {
+      const canvas = document.querySelector('canvas.mask-canvas') as HTMLCanvasElement;
+      if (!canvas) return { width: 0, height: 0 };
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return { width: 0, height: 0 };
+      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const { data } = imgData;
+      const len = data.length;
+      let totalAlpha = 0;
+      let greenPixelCount = 0;
+      let maxAlpha = 0;
+      for (let i = 0; i < len; i += 4) {
+        const a = data[i + 3];
+        totalAlpha += a;
+        if (a > 0) greenPixelCount++;
+        if (a > maxAlpha) maxAlpha = a;
+      }
+      const avgAlpha = totalAlpha / (canvas.width * canvas.height);
+      return {
+        width: canvas.width,
+        height: canvas.height,
+        avgAlpha,
+        maxAlpha,
+        greenPixelCount,
+        totalPixels: canvas.width * canvas.height,
+      };
+    });
+
+    console.log(`Canvas: ${stats.width}x${stats.height}, avgAlpha=${stats.avgAlpha.toFixed(1)}, maxAlpha=${stats.maxAlpha}, greenPixels=${stats.greenPixelCount}/${stats.totalPixels} (${(stats.greenPixelCount / stats.totalPixels * 100).toFixed(1)}%)`);
+
+    // Check 1 assertions:
+    // a) Canvas has dimensions (not blank)
+    expect(stats.width).toBeGreaterThan(0);
+    expect(stats.height).toBeGreaterThan(0);
+
+    // b) Average alpha must be well below 255 — the overlay is translucent.
+    // Max alpha is 80 (~31% of 255), so average should be < 128 (50% opacity).
+    expect(stats.avgAlpha).toBeLessThan(128);
+    expect(stats.avgAlpha).toBeGreaterThan(0); // Must have some overlay at all.
+
+    // c) Max alpha must be 80 or close (the fix set max alpha to 80).
+    expect(stats.maxAlpha).toBeLessThan(170); // Well below full opacity.
+
+    // d) Green pixel fraction should not be ~100% — the overlay should NOT cover
+    // the entire canvas with green washout. There should be visible photo areas.
+    const greenFraction = stats.greenPixelCount / stats.totalPixels;
+    expect(greenFraction).toBeLessThan(0.95);
+    console.log(`Green overlay fraction: ${greenFraction.toFixed(2)} (must be <0.95)`);
+  });
+
+  test('2. Knobs respond fast on real photo — debounce working, no multi-second lag', async ({ page }) => {
+    await page.goto('/');
+    await loadToMaskStep(page);
+
+    // Get the sensitivity slider (first range input).
+    const sensitivitySlider = page.locator('input[type="range"]').first();
+    await sensitivitySlider.waitFor({ state: 'visible', timeout: 10000 });
+
+    const initialValue = await sensitivitySlider.inputValue();
+
+    // Measure programmatic dispatch time.
+    const startTime = Date.now();
+    await sensitivitySlider.evaluate((el: HTMLInputElement) => {
+      el.value = '0.75';
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    const elapsed = Date.now() - startTime;
+
+    console.log(`Sensitivity knob programmatic response: ${elapsed}ms`);
+
+    // Must respond within 500ms. The debounce should cause the overlay to
+    // redraw immediately (cheap path) and full remask after 150ms.
+    expect(elapsed).toBeLessThan(500);
+
+    const newValue = await sensitivitySlider.inputValue();
+    expect(newValue).not.toBe(initialValue);
+
+    // Now measure the edge offset knob too.
+    const edgeOffsetSlider = page.locator('input[type="range"]').nth(1);
+    await edgeOffsetSlider.waitFor({ state: 'visible', timeout: 10000 });
+
+    const edgeStart = Date.now();
+    await edgeOffsetSlider.evaluate((el: HTMLInputElement) => {
+      el.value = '5';
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    const edgeElapsed = Date.now() - edgeStart;
+    console.log(`Edge offset knob programmatic response: ${edgeElapsed}ms`);
+    expect(edgeElapsed).toBeLessThan(500);
+  });
+
+  test('3. Auto sheet detection does not mark entire frame as slab on normal test image', async ({ page }) => {
+    await page.goto('/');
+    await loadToMaskStep(page);
+
+    // Read the canvas pixel data and compute slab fraction.
+    // The canvas shows: photo + green overlay on slab pixels.
+    // Green overlay = (60, 220, 60) with alpha proportional to mask value.
+    // Sheet pixels have alpha=0 (fully transparent).
+    // So: count pixels where the green channel is > 150 AND red channel < 100
+    // to detect the green overlay, which indicates slab pixels.
+    const slabStats = await page.evaluate(() => {
+      const canvas = document.querySelector('canvas.mask-canvas') as HTMLCanvasElement;
+      if (!canvas) return { width: 0, height: 0 };
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return { width: 0, height: 0 };
+      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const { data } = imgData;
+      let slabPixels = 0;
+      let totalPixels = canvas.width * canvas.height;
+      for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+        // Green overlay is (60, 220, 60). Slab pixels have alpha > 0.
+        // At max alpha (80), the blended pixel on white (240,240,240) would be:
+        // R: 240*(1-0.31) + 60*0.31 ≈ 184
+        // G: 240*(1-0.31) + 220*0.31 ≈ 234
+        // So slab pixels have R < 240, G > 200, B < 240, a > 0
+        if (a > 0 && g > 150 && r < 230 && b < 230) {
+          slabPixels++;
+        }
+      }
+      return {
+        width: canvas.width,
+        height: canvas.height,
+        slabPixels,
+        totalPixels,
+        slabFraction: slabPixels / totalPixels,
+      };
+    });
+
+    console.log(`Slab fraction: ${slabStats.slabFraction.toFixed(3)} (${slabStats.slabPixels}/${slabStats.totalPixels})`);
+
+    // Check 3 assertions:
+    // The slab fraction must be in a sane band — not ~0% and not ~100%.
+    // The test image has green border + gray-white interior.
+    // The auto-detection should identify the green border as sheet,
+    // leaving the gray-white interior as slab.
+    // So slab fraction should be roughly 20% (the interior is ~20% gray-white).
+    // We allow a wide band: 0.05 to 0.95.
+    expect(slabStats.slabFraction).toBeGreaterThan(0.05);
+    expect(slabStats.slabFraction).toBeLessThan(0.95);
+
+    // Also verify that green sheet detection works correctly.
+    const greenSheetStats = await page.evaluate(() => {
+      const canvas = document.querySelector('canvas.mask-canvas') as HTMLCanvasElement;
+      if (!canvas) return null;
+
+      // Switch to green sheet mode, wait for remask, read canvas.
+      const select = document.querySelector('.knob-group select');
+      if (!select) return null;
+
+      const originalVal = (select as HTMLSelectElement).value;
+      (select as HTMLSelectElement).value = 'green';
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+
+      // Wait a moment for the remask to complete.
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const ctx = canvas.getContext('2d');
+          if (!ctx) { resolve(null); return; }
+          const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const { data } = imgData;
+          let slabPixels = 0;
+          for (let i = 0; i < data.length; i += 4) {
+            const a = data[i + 3];
+            if (a > 0) slabPixels++;
+          }
+          resolve({
+            width: canvas.width,
+            height: canvas.height,
+            slabPixels,
+            totalPixels: canvas.width * canvas.height,
+            slabFraction: slabPixels / (canvas.width * canvas.height),
+          });
+          // Restore original value.
+          (select as HTMLSelectElement).value = originalVal;
+          select.dispatchEvent(new Event('change', { bubbles: true }));
+        }, 500);
+      });
+    });
+
+    if (greenSheetStats) {
+      console.log(`Green sheet slab fraction: ${greenSheetStats.slabFraction.toFixed(3)}`);
+      expect(greenSheetStats.slabFraction).toBeGreaterThan(0.05);
+      expect(greenSheetStats.slabFraction).toBeLessThan(0.95);
+    }
+  });
+});
@@ -10,12 +10,14 @@ export default defineConfig({
  testDir: '.',
  fullyParallel: true,
  forbidOnly: false,
-  retries: 1,
+  retries: 2,
  workers: 1,
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    baseURL: BASE_URL,
+    // Ignore self-signed TLS certs on deployed hosts.
+    ignoreHTTPSErrors: true,
  },
  webServer: BASE_URL
    ? undefined