Jeppe B
133e53cfa6
Add iOS safe-area viewport support and inset-aware mobile header/spacer sizing so controls clear the notch or Dynamic Island. Desktop and tablet headers remain unchanged. Includes focused unit and mobile browser regression coverage.
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
test("mobile header clears the simulated iPhone safe area", async ({ page }, testInfo) => {
|
|
test.skip(!["chromium-mobile", "webkit-mobile"].includes(testInfo.project.name), "Mobile browser coverage only.");
|
|
|
|
await page.goto("/login", { waitUntil: "domcontentloaded" });
|
|
|
|
const header = page.locator("nav.mobile-header-section");
|
|
const spacer = page.locator(".navbar-spacer");
|
|
await expect(header).toBeVisible();
|
|
|
|
await page.evaluate(() => {
|
|
document.documentElement.style.setProperty("--pleno-mobile-safe-top", "44px");
|
|
});
|
|
|
|
const insetLayout = await header.evaluate((element) => {
|
|
const headerBox = element.getBoundingClientRect();
|
|
const spacer = document.querySelector(".navbar-spacer");
|
|
const spacerBox = spacer?.getBoundingClientRect();
|
|
return {
|
|
headerHeight: headerBox.height,
|
|
headerPaddingTop: getComputedStyle(element).paddingTop,
|
|
spacerHeight: spacerBox?.height ?? 0,
|
|
};
|
|
});
|
|
|
|
expect(insetLayout.headerHeight).toBe(124);
|
|
expect(insetLayout.headerPaddingTop).toBe("44px");
|
|
expect(insetLayout.spacerHeight).toBe(124);
|
|
|
|
await page.evaluate(() => {
|
|
document.documentElement.style.setProperty("--pleno-mobile-safe-top", "0px");
|
|
});
|
|
|
|
await expect.poll(() => header.evaluate((element) => element.getBoundingClientRect().height)).toBe(80);
|
|
await expect.poll(() => spacer.evaluate((element) => element.getBoundingClientRect().height)).toBe(80);
|
|
});
|