mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
chore: workaround webkit screenshot animation issue (#28582)
This commit is contained in:
parent
ac3600ec96
commit
76ace0fc09
@ -382,6 +382,10 @@ export class CRPage implements PageDelegate {
|
|||||||
throw new Error('Frame has been detached.');
|
throw new Error('Frame has been detached.');
|
||||||
return parentSession._adoptBackendNodeId(backendNodeId, await parent._mainContext());
|
return parentSession._adoptBackendNodeId(backendNodeId, await parent._mainContext());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
shouldToggleStyleSheetToSyncAnimations(): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class FrameSession {
|
class FrameSession {
|
||||||
|
|||||||
@ -594,6 +594,10 @@ export class FFPage implements PageDelegate {
|
|||||||
throw new Error('Frame has been detached.');
|
throw new Error('Frame has been detached.');
|
||||||
return context.createHandle(result.remoteObject) as dom.ElementHandle;
|
return context.createHandle(result.remoteObject) as dom.ElementHandle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
shouldToggleStyleSheetToSyncAnimations(): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function webSocketId(frameId: string, wsid: string): string {
|
function webSocketId(frameId: string, wsid: string): string {
|
||||||
|
|||||||
@ -97,6 +97,8 @@ export interface PageDelegate {
|
|||||||
readonly cspErrorsAsynchronousForInlineScipts?: boolean;
|
readonly cspErrorsAsynchronousForInlineScipts?: boolean;
|
||||||
// Work around for mouse position in Firefox.
|
// Work around for mouse position in Firefox.
|
||||||
resetForReuse(): Promise<void>;
|
resetForReuse(): Promise<void>;
|
||||||
|
// WebKit hack.
|
||||||
|
shouldToggleStyleSheetToSyncAnimations(): boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
type EmulatedSize = { screen: types.Size, viewport: types.Size };
|
type EmulatedSize = { screen: types.Size, viewport: types.Size };
|
||||||
|
|||||||
@ -46,7 +46,16 @@ export type ScreenshotOptions = {
|
|||||||
style?: string;
|
style?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
function inPagePrepareForScreenshots(screenshotStyle: string, hideCaret: boolean, disableAnimations: boolean) {
|
function inPagePrepareForScreenshots(screenshotStyle: string, hideCaret: boolean, disableAnimations: boolean, syncAnimations: boolean) {
|
||||||
|
// In WebKit, sync the animations.
|
||||||
|
if (syncAnimations) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = 'body {}';
|
||||||
|
document.head.appendChild(style);
|
||||||
|
document.documentElement.getBoundingClientRect();
|
||||||
|
style.remove();
|
||||||
|
}
|
||||||
|
|
||||||
if (!screenshotStyle && !hideCaret && !disableAnimations)
|
if (!screenshotStyle && !hideCaret && !disableAnimations)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
@ -251,8 +260,9 @@ export class Screenshotter {
|
|||||||
async _preparePageForScreenshot(progress: Progress, screenshotStyle: string | undefined, hideCaret: boolean, disableAnimations: boolean) {
|
async _preparePageForScreenshot(progress: Progress, screenshotStyle: string | undefined, hideCaret: boolean, disableAnimations: boolean) {
|
||||||
if (disableAnimations)
|
if (disableAnimations)
|
||||||
progress.log(' disabled all CSS animations');
|
progress.log(' disabled all CSS animations');
|
||||||
|
const syncAnimations = this._page._delegate.shouldToggleStyleSheetToSyncAnimations();
|
||||||
await Promise.all(this._page.frames().map(async frame => {
|
await Promise.all(this._page.frames().map(async frame => {
|
||||||
await frame.nonStallingEvaluateInExistingContext('(' + inPagePrepareForScreenshots.toString() + `)(${JSON.stringify(screenshotStyle)}, ${hideCaret}, ${disableAnimations})`, false, 'utility').catch(() => {});
|
await frame.nonStallingEvaluateInExistingContext('(' + inPagePrepareForScreenshots.toString() + `)(${JSON.stringify(screenshotStyle)}, ${hideCaret}, ${disableAnimations}, ${syncAnimations})`, false, 'utility').catch(() => {});
|
||||||
}));
|
}));
|
||||||
if (!process.env.PW_TEST_SCREENSHOT_NO_FONTS_READY) {
|
if (!process.env.PW_TEST_SCREENSHOT_NO_FONTS_READY) {
|
||||||
progress.log('waiting for fonts to load...');
|
progress.log('waiting for fonts to load...');
|
||||||
|
|||||||
@ -1184,6 +1184,10 @@ export class WKPage implements PageDelegate {
|
|||||||
async _clearPermissions() {
|
async _clearPermissions() {
|
||||||
await this._pageProxySession.send('Emulation.resetPermissions', {});
|
await this._pageProxySession.send('Emulation.resetPermissions', {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
shouldToggleStyleSheetToSyncAnimations(): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -691,7 +691,6 @@ it.describe('page screenshot animations', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should fire transitionend for finite transitions', async ({ page, server, browserName, platform }) => {
|
it('should fire transitionend for finite transitions', async ({ page, server, browserName, platform }) => {
|
||||||
it.fixme(browserName === 'webkit' && platform === 'linux');
|
|
||||||
await page.goto(server.PREFIX + '/css-transition.html');
|
await page.goto(server.PREFIX + '/css-transition.html');
|
||||||
const div = page.locator('div');
|
const div = page.locator('div');
|
||||||
await div.evaluate(el => {
|
await div.evaluate(el => {
|
||||||
@ -718,7 +717,6 @@ it.describe('page screenshot animations', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should capture screenshots after layoutchanges in transitionend event', async ({ page, server, browserName, platform }) => {
|
it('should capture screenshots after layoutchanges in transitionend event', async ({ page, server, browserName, platform }) => {
|
||||||
it.fixme(browserName === 'webkit' && platform === 'linux');
|
|
||||||
await page.goto(server.PREFIX + '/css-transition.html');
|
await page.goto(server.PREFIX + '/css-transition.html');
|
||||||
const div = page.locator('div');
|
const div = page.locator('div');
|
||||||
await div.evaluate(el => {
|
await div.evaluate(el => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user