[81reap]

Tabler 1.5.0 didn't show table stripes in dark mode. This was fixed in Tabler 1.7.3 (tabler/tabler#3279). So we upgraded and added tests.

Fixes #957

Assisted-By :: Claude Opus 5.5

[81reap]

repro from #957

$ cat tests/end-to-end/fixtures/repro_957/index.sql 
SELECT 'shell' AS component, 'dark' AS theme;
SELECT 'table' AS component, TRUE AS striped_rows;
SELECT 'x' AS value; SELECT 'x' AS value; SELECT 'x' AS value;

$ cat tests/end-to-end/fixtures/repro_957/light.sql 
SELECT 'shell' AS component, 'light' AS theme;
SELECT 'table' AS component, TRUE AS striped_rows;
SELECT 'x' AS value; SELECT 'x' AS value; SELECT 'x' AS value;

$ cat tests/end-to-end/fixtures/repro_957/test.ts 
import { expect, type Page, test } from "../../fixture.ts";

async function pixelColor(page: Page, x: number, y: number) {
  const png = await page.screenshot({ clip: { x, y, width: 1, height: 1 } });
  return page.evaluate(async (data) => {
    const image = new Image();
    image.src = `data:image/png;base64,${data}`;
    await image.decode();
    const canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = 1;
    const context = canvas.getContext("2d") as CanvasRenderingContext2D;
    context.drawImage(image, 0, 0);
    return [...context.getImageData(0, 0, 1, 1).data.slice(0, 3)];
  }, png.toString("base64"));
}

async function stripeContrast(page: Page) {
  const rows = page.locator("tbody tr");
  const backgrounds = [];
  for (const row of [rows.nth(0), rows.nth(1)]) {
    const box = await row.boundingBox();
    if (!box) throw new Error("row is not visible");
    backgrounds.push(await pixelColor(page, box.x + box.width - 3, box.y + box.height / 2));
  }
  const [odd, even] = backgrounds;
  return { odd, even, difference: Math.max(...odd.map((channel, i) => Math.abs(channel - even[i]))) };
}

test("striped rows are as visible in dark mode as in light mode", async ({ page }, testInfo) => {
  const dark = await stripeContrast(page);
  await testInfo.attach("dark", { body: await page.locator("table").screenshot(), contentType: "image/png" });

  await page.goto("/repro_957/light.sql");
  const light = await stripeContrast(page);
  await testInfo.attach("light", { body: await page.locator("table").screenshot(), contentType: "image/png" });

  console.log(`STRIPES dark ${JSON.stringify(dark)} light ${JSON.stringify(light)}`);
  expect(dark.difference).toBeGreaterThanOrEqual(light.difference / 2);
});

repro_957	postgres
v0.33.0	✔ passed
v0.47.0	✘ failed
tree	✔ passed

On commit 1f3db30a: nix run .#reproduce -- repro_957 postgres v0.33.0 v0.47.0 tree