Skip to content

Validate transition styles without waiting for the animation #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hirasso merged 2 commits into from
Nov 9, 2026
Merged

Validate transition styles without waiting for the animation #68

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
954e847
Validate transition styles without waiting for the animation
hirasso Nov 9, 2026
effe3d3
Bypass CSP so the injected style tag works on strict sites
hirasso Nov 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions src/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {
isHtmlContentType,
isLocalUrl,
isValidUrl,
removeHash,
wait
removeHash
} from './util.js';

type Styles = Record<string, string>;
Expand All @@ -27,7 +26,8 @@ export async function createBrowser(): Promise<{
}

export async function visitPage(browser: Browser, url: string) {
const page = await browser.newPage();
// Bypass CSP: validateAnimationStyles injects an inline <style> tag
const page = await browser.newPage({ bypassCSP: true });
await page.goto(url, { waitUntil: 'domcontentloaded' });
return page;
}
Expand Down Expand Up @@ -121,13 +121,20 @@ export async function validateAnimationStyles(page: Page, selector: string, styl
throw new Error(`Element not found: ${selector}`);
}

// Freeze transitions so computed styles jump straight to their end values.
// No waiting for the animation: that's timing-dependent and flaky under load.
// The duration itself is checked by validateAnimationDuration.
const freeze = await page.addStyleTag({
content:
'*, *::before, *::after { transition: none !important; animation: none !important; }'
});
await addChangingClass(page);
const duration = await getAnimationDuration(page, selector);
const before = await getStyleProperties(page, selector, styles);
await addAnimatingClass(page);
await wait(duration + 100);
const after = await getStyleProperties(page, selector, styles);
await page.evaluate(() => document.documentElement.classList.remove('is-animating'));
await removeChangingClass(page);
await freeze.evaluate((el) => (el as Element).remove());

if (Object.keys(before).length === 0 && Object.keys(after).length === 0) {
throw new Error(`Styles not found on element: ${selector} (${styles.join(', ')})`);
Expand Down
Loading