fix(chromium): use actual device scale factor for css-scale screenshots (microsoft#39233)

Author: yury-s

packages/playwright-core/src/server/chromium/crPage.ts

@@ -246,7 +246,7 @@ export class CRPage implements PageDelegate {
   }
 
   async takeScreenshot(progress: Progress, format: 'png' | 'jpeg', documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined, fitsViewport: boolean, scale: 'css' | 'device'): Promise<Buffer> {
-    const { visualViewport } = await progress.race(this._mainFrameSession._client.send('Page.getLayoutMetrics'));
+    const { visualViewport, contentSize, cssContentSize } = await progress.race(this._mainFrameSession._client.send('Page.getLayoutMetrics'));
     if (!documentRect) {
       documentRect = {
         x: visualViewport.pageX + viewportRect!.x,
@@ -261,7 +261,9 @@ export class CRPage implements PageDelegate {
     // ignore current page scale.
     const clip = { ...documentRect, scale: viewportRect ? visualViewport.scale : 1 };
     if (scale === 'css') {
-      const deviceScaleFactor = this._browserContext._options.deviceScaleFactor || 1;
+      // deviceScaleFactor override does not affect layout metrics, so if it is set,
+      // we use its value rather than computed one.
+      const deviceScaleFactor =  this._mainFrameSession._metricsOverride?.deviceScaleFactor || contentSize.width / cssContentSize.width || 1;
       clip.scale /= deviceScaleFactor;
     }
     const result = await progress.race(this._mainFrameSession._client.send('Page.captureScreenshot', { format, quality, clip, captureBeyondViewport: !fitsViewport }));
@@ -374,7 +376,7 @@ class FrameSession {
   // Marks the oopif session that remote -> local transition has happened in the parent.
   // See Target.detachedFromTarget handler for details.
   private _swappedIn = false;
-  private _metricsOverride: Protocol.Emulation.setDeviceMetricsOverrideParameters | undefined;
+  _metricsOverride: Protocol.Emulation.setDeviceMetricsOverrideParameters | undefined;
   private _workerSessions = new Map<string, CRSession>();
   private _initScriptIds = new Map<InitScript, string>();
   private _bufferedAttachedToTargetEvents: Protocol.Target.attachedToTargetPayload[] | undefined;

tests/library/screenshot.spec.ts

@@ -22,7 +22,7 @@ import { verifyViewport } from '../config/utils';
 browserTest.describe('page screenshot', () => {
   browserTest.skip(({ browserName, headless }) => browserName === 'firefox' && !headless, 'Firefox headed produces a different image.');
 
-  browserTest('should run in parallel in multiple pages', async ({ server, contextFactory, browserName, isHeadlessShell, channel }) => {
+  browserTest('should run in parallel in multiple pages', async ({ server, contextFactory }) => {
     const context = await contextFactory();
     const N = 5;
     const pages = await Promise.all(Array(N).fill(0).map(async () => {
@@ -50,7 +50,7 @@ browserTest.describe('page screenshot', () => {
     await context.close();
   });
 
-  browserTest('should work with a mobile viewport and clip', async ({ browser, server, browserName, channel }) => {
+  browserTest('should work with a mobile viewport and clip', async ({ browser, server, browserName }) => {
     browserTest.skip(browserName === 'firefox');
 
     const context = await browser.newContext({ viewport: { width: 320, height: 480 }, isMobile: true });
@@ -99,6 +99,18 @@ browserTest.describe('page screenshot', () => {
     await context.close();
   });
 
+  browserTest('should produce screenshot of correct size with scale:css and null viewport', async ({ browser, server }) => {
+    const context = await browser.newContext({ viewport: null });
+    const page = await context.newPage();
+    await page.goto(server.PREFIX + '/grid.html');
+    const [innerWidth, innerHeight] = await page.evaluate(() => [window.innerWidth, window.innerHeight]);
+    const screenshot = await page.screenshot({ scale: 'css' });
+    const decoded = PNG.sync.read(screenshot);
+    expect(decoded.width).toBe(innerWidth);
+    expect(decoded.height).toBe(innerHeight);
+    await context.close();
+  });
+
   browserTest('should work with device scale factor, clip and scale:css', async ({ browser, server }) => {
     const context = await browser.newContext({ viewport: { width: 500, height: 500 }, deviceScaleFactor: 3 });
     const page = await context.newPage();