diff --git a/packages/playwright-core/src/server/webkit/wkBrowser.ts b/packages/playwright-core/src/server/webkit/wkBrowser.ts index 8e97886efe..fd7b45ceb1 100644 --- a/packages/playwright-core/src/server/webkit/wkBrowser.ts +++ b/packages/playwright-core/src/server/webkit/wkBrowser.ts @@ -366,7 +366,7 @@ export class WKBrowserContext extends BrowserContext { _validateEmulatedViewport(viewportSize?: types.Size | null) { if (!viewportSize) return; - if (process.platform === 'win32' && this._browser.options.headful && (viewportSize.width < 250 || viewportSize.height < 250)) - throw new Error(`WebKit on Windows has a minimal viewport of 250x250.`); + if (process.platform === 'win32' && this._browser.options.headful && (viewportSize.width < 250 || viewportSize.height < 240)) + throw new Error(`WebKit on Windows has a minimal viewport of 250x240.`); } } diff --git a/tests/library/browsercontext-viewport.spec.ts b/tests/library/browsercontext-viewport.spec.ts index bb6f6567c2..aad73489d7 100644 --- a/tests/library/browsercontext-viewport.spec.ts +++ b/tests/library/browsercontext-viewport.spec.ts @@ -47,14 +47,14 @@ it('should return correct outerWidth and outerHeight', async ({ page }) => { it('should emulate device width', async ({ page, server }) => { expect(page.viewportSize()).toEqual({ width: 1280, height: 720 }); - await page.setViewportSize({ width: 200, height: 200 }); - expect(await page.evaluate(() => window.screen.width)).toBe(200); - expect(await page.evaluate(() => matchMedia('(min-device-width: 100px)').matches)).toBe(true); - expect(await page.evaluate(() => matchMedia('(min-device-width: 300px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(max-device-width: 100px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(max-device-width: 300px)').matches)).toBe(true); - expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(true); + await page.setViewportSize({ width: 300, height: 300 }); + expect(await page.evaluate(() => window.screen.width)).toBe(300); + expect(await page.evaluate(() => matchMedia('(min-device-width: 200px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(min-device-width: 400px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 200px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-width: 400px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-width: 600px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-width: 300px)').matches)).toBe(true); await page.setViewportSize({ width: 500, height: 500 }); expect(await page.evaluate(() => window.screen.width)).toBe(500); expect(await page.evaluate(() => matchMedia('(min-device-width: 400px)').matches)).toBe(true); @@ -67,14 +67,14 @@ it('should emulate device width', async ({ page, server }) => { it('should emulate device height', async ({ page, server }) => { expect(page.viewportSize()).toEqual({ width: 1280, height: 720 }); - await page.setViewportSize({ width: 200, height: 200 }); - expect(await page.evaluate(() => window.screen.height)).toBe(200); - expect(await page.evaluate(() => matchMedia('(min-device-height: 100px)').matches)).toBe(true); - expect(await page.evaluate(() => matchMedia('(min-device-height: 300px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(max-device-height: 100px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(max-device-height: 300px)').matches)).toBe(true); - expect(await page.evaluate(() => matchMedia('(device-height: 500px)').matches)).toBe(false); - expect(await page.evaluate(() => matchMedia('(device-height: 200px)').matches)).toBe(true); + await page.setViewportSize({ width: 300, height: 300 }); + expect(await page.evaluate(() => window.screen.height)).toBe(300); + expect(await page.evaluate(() => matchMedia('(min-device-height: 200px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(min-device-height: 400px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 200px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(max-device-height: 400px)').matches)).toBe(true); + expect(await page.evaluate(() => matchMedia('(device-height: 600px)').matches)).toBe(false); + expect(await page.evaluate(() => matchMedia('(device-height: 300px)').matches)).toBe(true); await page.setViewportSize({ width: 500, height: 500 }); expect(await page.evaluate(() => window.screen.height)).toBe(500); expect(await page.evaluate(() => matchMedia('(min-device-height: 400px)').matches)).toBe(true); @@ -156,10 +156,10 @@ it('WebKit Windows headed should have a minimal viewport', async ({ contextFacto await expect(contextFactory({ viewport: { 'width': 100, 'height': 100 }, - })).rejects.toThrow('WebKit on Windows has a minimal viewport of 250x250.'); + })).rejects.toThrow('WebKit on Windows has a minimal viewport of 250x240.'); const context = await contextFactory(); const page = await context.newPage(); - await expect(page.setViewportSize({ width: 100, height: 100 })).rejects.toThrow('WebKit on Windows has a minimal viewport of 250x250.'); + await expect(page.setViewportSize({ width: 100, height: 100 })).rejects.toThrow('WebKit on Windows has a minimal viewport of 250x240.'); await context.close(); }); diff --git a/tests/page/elementhandle-bounding-box.spec.ts b/tests/page/elementhandle-bounding-box.spec.ts index f89bf6540e..215dce0222 100644 --- a/tests/page/elementhandle-bounding-box.spec.ts +++ b/tests/page/elementhandle-bounding-box.spec.ts @@ -40,7 +40,7 @@ it('should handle nested frames', async ({ page, server }) => { it('should get frame box', async ({ page, browserName }) => { it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/10977' }); - await page.setViewportSize({ width: 200, height: 200 }); + await page.setViewportSize({ width: 250, height: 250 }); await page.setContent(`
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/transparent-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/transparent-chromium.png index 6c1fe85b52..b9aa8f7a72 100644 Binary files a/tests/page/page-screenshot.spec.ts-snapshots/transparent-chromium.png and b/tests/page/page-screenshot.spec.ts-snapshots/transparent-chromium.png differ diff --git a/tests/page/page-screenshot.spec.ts-snapshots/transparent-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/transparent-webkit.png index 3a089261de..e8bc1c8f36 100644 Binary files a/tests/page/page-screenshot.spec.ts-snapshots/transparent-webkit.png and b/tests/page/page-screenshot.spec.ts-snapshots/transparent-webkit.png differ