From 17ab777db5ae8b24c6654e1c8ecb0b9672538c86 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Sun, 14 May 2023 16:59:15 +0200 Subject: [PATCH] chore: set min viewport for WK on Win to 250x240 (#22969) Follow-up for https://github.com/microsoft/playwright/pull/22956. --- .../src/server/webkit/wkBrowser.ts | 4 +- tests/library/browsercontext-viewport.spec.ts | 36 +++++++++--------- tests/page/elementhandle-bounding-box.spec.ts | 2 +- tests/page/page-screenshot.spec.ts | 6 +-- .../transparent-chromium.png | Bin 228 -> 874 bytes .../transparent-webkit.png | Bin 233 -> 2178 bytes 6 files changed, 24 insertions(+), 24 deletions(-) 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 6c1fe85b52f24d502ca9f191fc831470f1deff3d..b9aa8f7a7260c5f25fcb19c8ede467c5abe7e064 100644 GIT binary patch literal 874 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYX$ja(7}_cTVOd0|T>)r;B4q z#hka-HgXr_|?=~}oAE(#^#R!MC1V+gw))bCW z4ryUu|zNHG=%xjQkeJ16rJ$eHKq;uumf z=k2Y7oDBgytOqr|-T$I7x(W(d^&OY796S2r!)cI!r>mdKI;Vst0P{snM*si- 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 3a089261ded44cb1497cb2bcc5707127b8bd0cca..e8bc1c8f360b41f7c0d5ae1a1a08ccf65d70c5ab 100644 GIT binary patch literal 2178 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYX$ja(7}_cTVOdkmHgX;hE;^ z%b*2hb1*QrXELyWlmM|55Hm0^FJNR~2GWcmu?0*pSw@`&%m_9};f;i*=L`(&Z#-Qb zLn;{GUc1QI;2_|9F!;^>r=bVs_OL7ekXQ5Gk-XOQ{Cj1Gh6CT2o`2(HRROZp6E@6Y zVq}tJY@WK(D}afGXPUHvgMxCx2BT0;uZD($Ma(Q5DJ(o;%d{Lh1q>qc8W2|F2?Sd5t1w1cNEVBwI^F?VQia66EYx=LsY17q`3 zHV%Ok91?4MLYssX5;ojn7`1dXc&VL`*3De#08F7R4dP*o)D$@dDp+}@S&ydY(VROh r$|zuw$-*I^08HVdj1e9PjsIEmB(zxj?BjV`K=r?;tDnm{r-UW|c&QG8 literal 233 zcmeAS@N?(olHy`uVBq!ia0vp^MnF7`gAGW|*>u|zNU}k%9ewfPG)TbH)z4*}Q$iB}P=8QK