table component: TRUE AS striped_rows doesn’t apply when dark mode is enabled #957

Activity

1. 81reap commented on Oct 29, 2026

   

   81reap

   on Oct 29, 2026

   Last edited by 81reap

   Collaborator

   More actions

   I think this is still an issue

   Reproduction

   $ 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/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	✘ failed

   On commit 616df27: nix run .#reproduce -- repro_957 postgres v0.33.0 v0.47.0 tree
2. 81reap

   added 3 commits that reference this issue on Oct 30, 2026

   fix(table) :: show striped rows in dark mode

   ...

   This issue will close once commit 5d3acb6 is merged into the 'main' branch.

   5d3acb6

   fix(table) :: show striped rows in dark mode

   ...

   This issue will close once commit c97f0af is merged into the 'main' branch.

   c97f0af

   fix(table) :: show striped rows in dark mode

   ...

   This issue will close once commit 7498072 is merged into the 'main' branch.

   7498072
3. 81reap

   closed this as completedin #1579on Oct 30, 2026
4. mvanhorn

   added a commit that references this issue on Oct 31, 2026

   fix(table) :: show striped rows in dark mode (sqlpage#1579)

   ...

   This issue will close once commit 2d45bd4 is merged into the 'main' branch.

   2d45bd4