✨ feature: Implement dynamic browser chrome tinting for header and footer visibility

2026-07-12 13:57:20 -05:00
parent e38511126d
commit ca367364f8
5 changed files with 318 additions and 1 deletions
@@ -0,0 +1,175 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Chrome tint behavior:
+ *
+ *   - Top tint (status bar / notch / Dynamic Island):
+ *     <meta name="theme-color"> = HEADER_COLOR when the site header is
+ *     in view; cleared (no content) otherwise.
+ *
+ *   - Bottom tint (home indicator area, behind the address bar):
+ *     <body class="footer-in-view"> when the site footer is in view;
+ *     absent otherwise. The CSS body::after pseudo-element picks up
+ *     the footer color from this class.
+ *
+ * Tests run against the local Herd site.
+ */
+
+const site = "http://community-works-collaborative.test/";
+
+const HEADER_COLOR = "#032F46";
+
+test.describe("chrome tint", () => {
+    test.use({ viewport: { width: 402, height: 874 } });
+
+    test("static theme-color meta is present in the document head", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        const content = await page.evaluate(() => {
+            const meta = document.querySelector('meta[name="theme-color"]');
+            return meta ? meta.getAttribute("content") : null;
+        });
+        // Either the server-rendered value or the value set by JS on
+        // initial paint (the header is in view at page top) should be
+        // the header color.
+        expect(content).toBe(HEADER_COLOR);
+    });
+
+    test("viewport meta includes viewport-fit=cover", async ({ page }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        const viewport = await page.evaluate(() => {
+            const meta = document.querySelector('meta[name="viewport"]');
+            return meta ? meta.getAttribute("content") : null;
+        });
+        expect(viewport).toContain("viewport-fit=cover");
+    });
+
+    test("top tint is set when header is in view at page top", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // Wait for ChromeTint.js to run (it observes on DOMContentLoaded).
+        await page.waitForFunction(
+            (expected) => {
+                const meta = document.querySelector('meta[name="theme-color"]');
+                return meta && meta.getAttribute("content") === expected;
+            },
+            HEADER_COLOR,
+            { timeout: 2000 },
+        );
+        const content = await page.evaluate(() =>
+            document.querySelector('meta[name="theme-color"]').getAttribute("content"),
+        );
+        expect(content).toBe(HEADER_COLOR);
+    });
+
+    test("top tint clears when neither header nor footer is in view", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // Wait for the initial intersection observation to apply.
+        await page.waitForFunction(
+            (expected) => {
+                const meta = document.querySelector('meta[name="theme-color"]');
+                return meta && meta.getAttribute("content") === expected;
+            },
+            HEADER_COLOR,
+            { timeout: 2000 },
+        );
+        // Scroll down so the header is out of view and the footer is not yet visible.
+        await page.evaluate(() => window.scrollTo(0, 1200));
+        // Give the IntersectionObserver a tick to fire.
+        await page.waitForTimeout(300);
+        const content = await page.evaluate(() => {
+            const meta = document.querySelector('meta[name="theme-color"]');
+            return meta ? meta.getAttribute("content") : null;
+        });
+        // When the header is out of view, the top tint should be cleared
+        // (no content attribute) so iOS falls back to the page background.
+        expect(content).toBeNull();
+    });
+
+    test("bottom tint class is absent when footer is out of view", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // At page top, the footer is not in view.
+        await page.waitForTimeout(200);
+        const hasClass = await page.evaluate(() =>
+            document.body.classList.contains("footer-in-view"),
+        );
+        expect(hasClass).toBe(false);
+    });
+
+    test("bottom tint class is added when footer enters the viewport", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // Scroll to the very bottom of the page.
+        await page.evaluate(() =>
+            window.scrollTo(0, document.documentElement.scrollHeight),
+        );
+        // Wait for the IntersectionObserver to fire.
+        await page.waitForFunction(
+            () => document.body.classList.contains("footer-in-view"),
+            { timeout: 2000 },
+        );
+        const hasClass = await page.evaluate(() =>
+            document.body.classList.contains("footer-in-view"),
+        );
+        expect(hasClass).toBe(true);
+    });
+
+    test("bottom tint class is removed when footer scrolls out of view", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // Scroll to bottom first.
+        await page.evaluate(() =>
+            window.scrollTo(0, document.documentElement.scrollHeight),
+        );
+        await page.waitForFunction(
+            () => document.body.classList.contains("footer-in-view"),
+            { timeout: 2000 },
+        );
+        // Scroll back up.
+        await page.evaluate(() => window.scrollTo(0, 0));
+        await page.waitForFunction(
+            () => !document.body.classList.contains("footer-in-view"),
+            { timeout: 2000 },
+        );
+        const hasClass = await page.evaluate(() =>
+            document.body.classList.contains("footer-in-view"),
+        );
+        expect(hasClass).toBe(false);
+    });
+
+    test("CSS body::after fills the home indicator safe area", async ({
+        page,
+    }) => {
+        await page.goto(site, { waitUntil: "networkidle" });
+        // Verify the body::after pseudo-element has the right CSS
+        // (env(safe-area-inset-bottom) resolves to 0 on most desktops,
+        // so we just check that the rule is present and references the
+        // expected values).
+        const css = await page.evaluate(() => {
+            // We can't read pseudo-elements directly, but we can check
+            // the stylesheet for the rules.
+            for (const sheet of Array.from(document.styleSheets)) {
+                try {
+                    for (const rule of Array.from(sheet.cssRules)) {
+                        if (rule.selectorText === "body::after") {
+                            return rule.cssText;
+                        }
+                    }
+                } catch {
+                    // cross-origin
+                }
+            }
+            return null;
+        });
+        expect(css).toContain("env(safe-area-inset-bottom)");
+        expect(css).toContain("position: fixed");
+    });
+});