fix: respect screenshot bounds on HiDPI displays

Author: shixi-li

src/tools/screenshot.ts

@@ -63,17 +63,25 @@ function computeDownscaleClip(
   box: BoundingBox,
   maxWidth: number | undefined,
   maxHeight: number | undefined,
+  devicePixelRatio: number,
 ): ScreenshotClip | undefined {
   const widthScale =
-    maxWidth !== undefined ? Math.min(1, maxWidth / box.width) : 1;
+    maxWidth !== undefined
+      ? Math.min(1, maxWidth / (box.width * devicePixelRatio))
+      : 1;
   const heightScale =
-    maxHeight !== undefined ? Math.min(1, maxHeight / box.height) : 1;
+    maxHeight !== undefined
+      ? Math.min(1, maxHeight / (box.height * devicePixelRatio))
+      : 1;
   const scale = Math.min(widthScale, heightScale);
   if (scale >= 1) {
     return undefined;
   }
   // Skip degenerate sub-pixel results.
-  if (Math.round(box.width * scale) < 1 || Math.round(box.height * scale) < 1) {
+  if (
+    Math.round(box.width * devicePixelRatio * scale) < 1 ||
+    Math.round(box.height * devicePixelRatio * scale) < 1
+  ) {
     return undefined;
   }
   return {
@@ -172,10 +180,14 @@ export const screenshot = definePageTool(args => {
       ) {
         const box = await getSourceBox(page, element, fullPage);
         if (box) {
+          const devicePixelRatio = await page.evaluate(
+            () => window.devicePixelRatio,
+          );
           clip = computeDownscaleClip(
             box,
             screenshotMaxWidth,
             screenshotMaxHeight,
+            devicePixelRatio,
           );
         }
       }

tests/tools/screenshot.test.ts

@@ -401,6 +401,45 @@ describe('screenshot', () => {
       });
     });
 
+    it('honors screenshotMaxWidth at device scale factors above 1', async () => {
+      const tool = screenshot({
+        screenshotMaxWidth: 100,
+      } as ParsedArguments);
+      await withMcpContext(
+        async (response, context) => {
+          const page = context.getSelectedMcpPage().pptrPage;
+          assert.equal(page.viewport(), null);
+          await page.setContent(
+            html`<div style="width:100vw;height:100vh;background:red"></div>`,
+          );
+          const source = await page.evaluate(() => ({
+            width: window.innerWidth,
+            height: window.innerHeight,
+            devicePixelRatio: window.devicePixelRatio,
+          }));
+          assert.equal(source.devicePixelRatio, 2);
+
+          await tool.handler(
+            {params: {format: 'png'}, page: context.getSelectedMcpPage()},
+            response,
+            context,
+          );
+
+          assert.equal(response.images.length, 1);
+          const buf = Buffer.from(response.images[0].data, 'base64');
+          assert.equal(pngWidth(buf), 100);
+          const expectedHeight = Math.round(
+            source.height * (100 / source.width),
+          );
+          assert.ok(
+            Math.abs(pngHeight(buf) - expectedHeight) <= 1,
+            `expected height ~${expectedHeight}, got ${pngHeight(buf)}`,
+          );
+        },
+        {args: ['--force-device-scale-factor=2']},
+      );
+    });
+
     it('downscales viewport screenshot when no viewport is emulated', async () => {
       const tool = screenshot({
         screenshotMaxWidth: 100,