SSR still ships the expanded menu, but phones collapse it after render, stop sticking the header below md, and use the header-offset token so case anchors no longer sit underneath the bar. Co-authored-by: Cursor <cursoragent@cursor.com>
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
import { APP_LOCALES } from '../src/app/core/i18n/locale';
|
|
import { pagePath } from './helpers';
|
|
|
|
test.describe('fragment scrolling', () => {
|
|
test('case headings clear the sticky header at desktop width', async ({ page }, testInfo) => {
|
|
test.skip(testInfo.project.name === 'mobile', 'sticky header applies from md up');
|
|
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
|
|
for (const locale of APP_LOCALES) {
|
|
const path = `${pagePath('projects', locale)}#myspa`;
|
|
await page.goto(path, { waitUntil: 'networkidle' });
|
|
|
|
const header = page.locator('.site-header');
|
|
const heading = page.locator('#myspa h2');
|
|
await expect(heading).toBeVisible();
|
|
|
|
await page.evaluate(async () => {
|
|
await new Promise<void>((resolve) => {
|
|
let last = window.scrollY;
|
|
let stableFrames = 0;
|
|
const tick = () => {
|
|
if (window.scrollY === last) {
|
|
stableFrames += 1;
|
|
if (stableFrames >= 8) {
|
|
resolve();
|
|
return;
|
|
}
|
|
} else {
|
|
stableFrames = 0;
|
|
last = window.scrollY;
|
|
}
|
|
requestAnimationFrame(tick);
|
|
};
|
|
requestAnimationFrame(tick);
|
|
});
|
|
});
|
|
|
|
const headerBox = await header.boundingBox();
|
|
const headingBox = await heading.boundingBox();
|
|
expect(headerBox, path).toBeTruthy();
|
|
expect(headingBox, path).toBeTruthy();
|
|
expect(headingBox!.y, path).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height - 1);
|
|
}
|
|
});
|
|
});
|