🐞 fix: Update chrome tint implementation to use opacity for visibility and adjust related tests

2026-07-12 15:21:58 -05:00
parent 7267f67d99
commit 5bffd36ff8
2 changed files with 18 additions and 19 deletions
@@ -61,7 +61,7 @@ test.describe("chrome tint", () => {
                    width: Math.round(topR.width),
                    widthPct: Math.round((topR.width / winW) * 100),
                    position: topCs.position,
-                    visibility: topCs.visibility,
+                    opacity: parseFloat(topCs.opacity),
                },
                bottom: {
                    bottomFromViewport: Math.round(winH - bottomR.bottom),
@@ -69,25 +69,25 @@ test.describe("chrome tint", () => {
                    width: Math.round(bottomR.width),
                    widthPct: Math.round((bottomR.width / winW) * 100),
                    position: bottomCs.position,
-                    visibility: bottomCs.visibility,
+                    opacity: parseFloat(bottomCs.opacity),
                },
            };
        });

        // Top element: position fixed, top ≤ 4px, width >= 80%, height >= 12px,
-        // visibility hidden (so it never appears as a dark bar over page content).
+        // opacity 0 (so it never appears as a dark bar over page content).
        expect(layout.top.position).toBe("fixed");
        expect(layout.top.top).toBeLessThanOrEqual(4);
        expect(layout.top.widthPct).toBeGreaterThanOrEqual(80);
        expect(layout.top.height).toBeGreaterThanOrEqual(12);
-        expect(layout.top.visibility).toBe("hidden");
+        expect(layout.top.opacity).toBe(0);

        // Bottom element: position fixed, within 3px of viewport bottom, width >= 80%,
-        // visibility hidden.
+        // opacity 0.
        expect(layout.bottom.position).toBe("fixed");
        expect(layout.bottom.bottomFromViewport).toBeLessThanOrEqual(3);
        expect(layout.bottom.widthPct).toBeGreaterThanOrEqual(80);
-        expect(layout.bottom.visibility).toBe("hidden");
+        expect(layout.bottom.opacity).toBe(0);
    });

    test("fixed chrome tint elements are not visible to the user (no extra dark bars)", async ({
@@ -106,18 +106,18 @@ test.describe("chrome tint", () => {
            { timeout: 2000 },
        );
        // Even though the elements have background colors, they should
-        // be invisible to the user (visibility: hidden) so they don't
-        // show as dark bars over the page content.
-        const visibility = await page.evaluate(() => {
+        // be invisible to the user (opacity: 0) so they don't show as
+        // dark bars over the page content.
+        const opacities = await page.evaluate(() => {
            const top = document.querySelector(".chrome-tint--top");
            const bottom = document.querySelector(".chrome-tint--bottom");
            return {
-                top: getComputedStyle(top).visibility,
-                bottom: getComputedStyle(bottom).visibility,
+                top: parseFloat(getComputedStyle(top).opacity),
+                bottom: parseFloat(getComputedStyle(bottom).opacity),
            };
        });
-        expect(visibility.top).toBe("hidden");
-        expect(visibility.bottom).toBe("hidden");
+        expect(opacities.top).toBe(0);
+        expect(opacities.bottom).toBe(0);
    });

    test("viewport meta includes viewport-fit=cover", async ({ page }) => {