chore: set min viewport for WK on Win to 250x240 (#22969)

Follow-up for https://github.com/microsoft/playwright/pull/22956.

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.`);
   }
 }

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();
 });

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(`<style>
   body {
       display: flex;

tests/page/page-screenshot.spec.ts

@@ -228,14 +228,14 @@ it.describe('page screenshot', () => {
     await verifyViewport(page, 500, 500);
   });
 
-  it('should allow transparency', async ({ page, browserName }) => {
+  it('should allow transparency', async ({ page, browserName, platform, headless }) => {
     it.fail(browserName === 'firefox');
 
-    await page.setViewportSize({ width: 50, height: 150 });
+    await page.setViewportSize({ width: 300, height: 300 });
     await page.setContent(`
       <style>
         body { margin: 0 }
-        div { width: 50px; height: 50px; }
+        div { width: 300px; height: 100px; }
       </style>
       <div style="background:black"></div>
       <div style="background:white"></div>