From a8ebe4d8880f4afdf4ee0397cad86f33e693880c Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Wed, 10 Feb 2021 13:37:27 -0800
Subject: [PATCH] fix(screencast): support viewport with odd dimensions (#5399)

---
 src/server/browserContext.ts | 17 ++++++++++-------
 test/screencast.spec.ts      | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/server/browserContext.ts b/src/server/browserContext.ts
index abb27ac499..26b184050c 100644
--- a/src/server/browserContext.ts
+++ b/src/server/browserContext.ts
@@ -373,19 +373,22 @@ export function validateBrowserContextOptions(options: types.BrowserContextOptio
     throw new Error(`"isMobile" option is not supported with null "viewport"`);
   if (!options.viewport && !options.noDefaultViewport)
     options.viewport = { width: 1280, height: 720 };
-  if (options.recordVideo && !options.recordVideo.size) {
-    if (options.noDefaultViewport) {
-      options.recordVideo.size = { width: 800, height: 600 };
-    } else {
-      const size = options.viewport!;
-      const scale = 800 / Math.max(size.width, size.height);
-      if (scale < 1) {
+  if (options.recordVideo) {
+    if (!options.recordVideo.size) {
+      if (options.noDefaultViewport) {
+        options.recordVideo.size = { width: 800, height: 600 };
+      } else {
+        const size = options.viewport!;
+        const scale = Math.min(1, 800 / Math.max(size.width, size.height));
         options.recordVideo.size = {
           width: Math.floor(size.width * scale),
           height: Math.floor(size.height * scale)
         };
       }
     }
+    // Make sure both dimensions are odd, this is required for vp8
+    options.recordVideo.size!.width &= ~1;
+    options.recordVideo.size!.height &= ~1;
   }
   if (options.proxy) {
     if (!browserOptions.proxy)
diff --git a/test/screencast.spec.ts b/test/screencast.spec.ts
index 2d5ba19a09..e29df7bbec 100644
--- a/test/screencast.spec.ts
+++ b/test/screencast.spec.ts
@@ -479,4 +479,26 @@ describe('screencast', suite => {
       expectAll(pixels, almostRed);
     }
   });
+
+  it('should emulate an iphone', (test, { browserName }) => {
+    test.skip(browserName === 'firefox', 'isMobile is not supported in Firefox');
+  }, async ({contextFactory, playwright, contextOptions, testInfo}) => {
+    const device = playwright.devices['iPhone 6'];
+    const context = await contextFactory({
+      ...contextOptions,
+      ...device,
+      recordVideo: {
+        dir: testInfo.outputPath(''),
+      },
+    });
+
+    const page = await context.newPage();
+    await new Promise(r => setTimeout(r, 1000));
+    await context.close();
+
+    const videoFile = await page.video().path();
+    const videoPlayer = new VideoPlayer(videoFile);
+    expect(videoPlayer.videoWidth).toBe(374);
+    expect(videoPlayer.videoHeight).toBe(666);
+  });
 });