diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js index d275cb8a03..aad3cbec0e 100644 --- a/tests/git-scm.spec.js +++ b/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); +}); diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png deleted file mode 100644 index 4f456650a8..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png deleted file mode 100644 index 4f456650a8..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png deleted file mode 100644 index 283452d11e..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png deleted file mode 100644 index ba9527159d..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png deleted file mode 100644 index c4cfc05ec8..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png deleted file mode 100644 index a303623cdc..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png deleted file mode 100644 index a303623cdc..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png deleted file mode 100644 index 247b38de7f..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png deleted file mode 100644 index 97477322d3..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png and /dev/null differ diff --git a/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png deleted file mode 100644 index 74f3b34ef9..0000000000 Binary files a/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png and /dev/null differ