test: entire viewport is captured on hidpi (#10813)

tests/video.spec.ts

@@ -651,6 +651,40 @@ it.describe('screencast', () => {
     const files = fs.readdirSync(videoDir);
     expect(files.length).toBe(1);
   });
+
+  it('should capture full viewport on hidpi', async ({ browserType, browserName, headless }, testInfo) => {
+    it.fail(browserName === 'firefox', 'The actual picture is smaller than video frame');
+    it.fail(browserName === 'chromium' && !headless, 'The square is not on the video');
+    const size = { width: 400, height: 400 };
+    const browser = await browserType.launch();
+
+    const videoDir = testInfo.outputPath('');
+    const context = await browser.newContext({
+      viewport: size,
+      deviceScaleFactor: 3,
+      recordVideo: {
+        dir: videoDir,
+        size,
+      },
+    });
+
+    const page = await context.newPage();
+    await page.setContent(`<div style='margin: 0; background: red; position: fixed; right:0; bottom:0; width: 30; height: 30;'></div>`);
+    await new Promise(r => setTimeout(r, 1000));
+    await page.close();
+    await context.close();
+    await browser.close();
+
+    const videoFiles = findVideos(videoDir);
+    expect(videoFiles.length).toBe(1);
+    const videoPlayer = new VideoPlayer(videoFiles[0]);
+    expect(videoPlayer.videoWidth).toBe(size.width);
+    expect(videoPlayer.videoHeight).toBe(size.height);
+
+    // Bottom right corner should be part of the red border.
+    const pixels = videoPlayer.seekLastFrame({ x: size.width - 10, y: size.height - 10 }).data;
+    expectAll(pixels, almostRed);
+  });
 });
 
 it('should saveAs video', async ({ browser }, testInfo) => {