Test/dark mode brightness assertions (#2097)

## Changes

- Replaced pixel-based visual regression tests for dark/light mode with
perceptually accurate brightness assertions.
- Implemented a `getPageBrightness()` helper that computes **relative
luminance** using the ITU-R BT.709/sRGB coefficients (`0.2126*R +
0.7152*G + 0.0722*B`), normalized to the `[0, 1]` range.
- Added assertions that light mode brightness is approximately `0.85 ±
0.1` and dark mode is `0.25 ± 0.1`.
- Removed all stored screenshot snapshots for dark/light mode across
browsers and devices.

## Context

Pixel-diff-based screenshot tests are fragile they fail on minor layout
shifts, anti-aliasing changes, or browser rendering differences, even
when the visual theme (light/dark) is correct.

One example is the PR where the monitor around Git's version number
is removed, which caused the dark mode tests to fail, even though the
new look did not change anything about how dark the dark mode is.

Instead, we now verify **perceived brightness** using the standard
definition of *relative luminance* from color science (per
[Wikipedia](https://en.wikipedia.org/wiki/Relative_luminance)), which
aligns with human vision sensitivity (green contributes most, blue
least).

Reference:
#2088 (comment)

Author: dscho

tests/git-scm.spec.js

@@ -316,30 +316,73 @@ test('small-and-fast', async ({ page }) => {
 });
 
 test('dark mode', async({ page }) => {
+  // Helper: returns relative luminance in range [0, 1]
+  const getPageBrightness = async () => {
+    const screenshot = await page.screenshot({ type: 'png' });
+    const base64 = screenshot.toString('base64');
+
+    return await page.evaluate((b64) => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.src = `data:image/png;base64,${b64}`;
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = canvas.height = 1;
+          const ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, 1, 1);
+          const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+
+          // Calculate brightness, for more details, see
+          // https://en.wikipedia.org/wiki/Relative_luminance#Relative_luminance_and_%22gamma_encoded%22_colorspaces
+          const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+          // Normalize to [0, 1]
+          resolve(luminance / 255);
+        };
+        img.onerror = () => resolve(-1); // error indicator
+      });
+    }, base64);
+  };
+
   await page.setViewportSize(devices['iPhone X'].viewport);
+  await page.goto(url);
 
-  await page.goto(`${url}`);
+  // Ensure consistent test state
   await page.evaluate(() => {
     document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
   });
+
   const darkModeButton = page.locator('#dark-mode-button');
 
-  const o = { maxDiffPixels: 30 };
-  await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
+  // 1. Light mode
+  const lightBrightness = await getPageBrightness();
+  expect(lightBrightness).toBeCloseTo(0.85, 0.1); // e.g., 0.75–0.95
+
+  // 2. Toggle to dark mode
   await darkModeButton.click();
-  await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+  const darkBrightness = await getPageBrightness();
+  expect(darkBrightness).toBeCloseTo(0.25, 0.1); // e.g., 0.15–0.35
 
-  // Now, try again, but this time with system's preference being dark mode
+  // 3. Verify dark < light
+  expect(darkBrightness).toBeLessThan(lightBrightness);
 
+  // --- Test system preference: prefers-color-scheme: dark ---
   await page.emulateMedia({ colorScheme: 'dark' });
-  await page.evaluate(() => window.localStorage.clear());
-  await page.evaluate(() => window.sessionStorage.clear());
+  await page.evaluate(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+  });
   await page.reload();
   await page.evaluate(() => {
     document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
   });
 
-  await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+  // Should start in dark mode
+  const autoDarkBrightness = await getPageBrightness();
+  expect(autoDarkBrightness).toBeCloseTo(0.25, 0.1);
+
+  // Toggle to light
   await darkModeButton.click();
-  await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
-})
+  const autoLightBrightness = await getPageBrightness();
+  expect(autoLightBrightness).toBeCloseTo(0.85, 0.1);
+});