From 401d84e4a3508f9ca5c24dbfcad2a71571b1b8eb Mon Sep 17 00:00:00 2001
From: Maksim Sadym <69349599+sadym-chromium@users.noreply.github.com>
Date: Wed, 3 Feb 2021 14:30:46 +0100
Subject: [PATCH] feat: use `captureBeyondViewport` in `Page.captureScreenshot`
 (#6805)

BREAKING CHANGE:
- `page.screenshot` makes a screenshot with the clip dimensions, not cutting it by the ViewPort size.
---
 src/common/Page.ts                            |  15 ++---------
 .../screenshot-offscreen-clip-artefacts.png   | Bin 194 -> 0 bytes
 .../screenshot-offscreen-clip.png             | Bin 161 -> 266 bytes
 .../screenshot-offscreen-clip-artefacts.png   | Bin 279 -> 0 bytes
 test/screenshot.spec.ts                       |  24 ++----------------
 5 files changed, 4 insertions(+), 35 deletions(-)
 delete mode 100644 test/golden-chromium/screenshot-offscreen-clip-artefacts.png
 delete mode 100644 test/golden-firefox/screenshot-offscreen-clip-artefacts.png

diff --git a/src/common/Page.ts b/src/common/Page.ts
index 9df29693c1a..cf313bcfbbc 100644
--- a/src/common/Page.ts
+++ b/src/common/Page.ts
@@ -1680,20 +1680,8 @@ export class Page extends EventEmitter {
       const width = Math.ceil(metrics.contentSize.width);
       const height = Math.ceil(metrics.contentSize.height);
 
-      // Overwrite clip for full page at all times.
+      // Overwrite clip for full page.
       clip = { x: 0, y: 0, width, height, scale: 1 };
-      const { isMobile = false, deviceScaleFactor = 1, isLandscape = false } =
-        this._viewport || {};
-      const screenOrientation: Protocol.Emulation.ScreenOrientation = isLandscape
-        ? { angle: 90, type: 'landscapePrimary' }
-        : { angle: 0, type: 'portraitPrimary' };
-      await this._client.send('Emulation.setDeviceMetricsOverride', {
-        mobile: isMobile,
-        width,
-        height,
-        deviceScaleFactor,
-        screenOrientation,
-      });
     }
     const shouldSetDefaultBackground =
       options.omitBackground && format === 'png';
@@ -1705,6 +1693,7 @@ export class Page extends EventEmitter {
       format,
       quality: options.quality,
       clip,
+      captureBeyondViewport: true,
     });
     if (shouldSetDefaultBackground)
       await this._client.send('Emulation.setDefaultBackgroundColorOverride');
diff --git a/test/golden-chromium/screenshot-offscreen-clip-artefacts.png b/test/golden-chromium/screenshot-offscreen-clip-artefacts.png
deleted file mode 100644
index c41be2be1e7fa3c00975328be5f0f9864a773d60..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 194
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<k3?!S*bfg0*l>na**Z)9p{>=X~XEtrxw0iaG
zl`B_Hn>NkU(^F4RPf1BhOiT=@@Y3b-79bVr>EaktaqI2rjl2y8JPeNO4{(VoWVtzh
zGRZl}X28Vy`J$k?rp_d#Q}Oji_kJ1rZ+fOZ)pxSzrfJGC-%MlVc*U0nXuK6Kel_*r
n!T^n<r#*iLo)HEb`{fO*g6EnipMEtm0eK9bu6{1-oD!M<*||vQ

diff --git a/test/golden-chromium/screenshot-offscreen-clip.png b/test/golden-chromium/screenshot-offscreen-clip.png
index 1e1fc6e377729f5c471743b034a9034c241f5996..e503f801ec6a112abf23373dca38891a34056607 100644
GIT binary patch
delta 250
zcmZ3;*u^wKqMn19fq}u@CN&L6*$4Q9xc&!%OK1L{KlA_0nZ0}W?%ut7)22<USFc{V
za^<vX)B5`Ql9Q8teSJMWJxxtbjf{-+^z^i}w3L*T#KgpaX7IHuYynbjo-U3d6}R5r
z@Z@VS;BW{OU2c`V^MB;thP#}Zv;XUV5ORvRaAL`)tHpQz%xHPh5YunF>2*ebhCsCo
z3j`dIoGCoDy`<9t3^q9{ad2>WG<w*EOMvB<NGzFmK6W+-n4@C-L`G)9ip7U_ygSPn
nX*=OXgUqel%DZmlU+32Kkutn?=;33alNdZ*{an^LB{Ts5TiRo{

delta 145
zcmeBTTF5v-qMn7Bfq|jvOh-D9k_+$&as3YjXU=Tev}yI~)zhX;^Yrx8)6-K@QW6sr
z11jO;nDhon*?GD+hE&{odwL`10R;gDhwuuaOX+KRCJM?p79<=zbW6W=_rFtDlQgT}
v&C)wRU+?~GJ=;sFBCeMEfqEG(GkjYr8g{wsMjrzM7XyQ*tDnm{r-UW|x8FDR

diff --git a/test/golden-firefox/screenshot-offscreen-clip-artefacts.png b/test/golden-firefox/screenshot-offscreen-clip-artefacts.png
deleted file mode 100644
index 846b810386f7c69f2bb976e1426cd3509f9a6630..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 279
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j3?$ucQqzExeSlAhE0F$w>CFH0Xa1i#vv1$N
zJ$v?S*|KHr+O;cJuADx7dVha^a&oedkB_^%yOEKRo}QkTmX@ljs*H>bA0Ho3?+LZ^
z{XmMbB*-tA!Qt5rkhyK1E{-7;x8C0H<ZCeCa0nD#Zk4_Bf8^eVyPTP`|LcDca*DWc
zV#%kgcmB+1dC?HlZ@cMrMt_DtwF?Ub9Fd$UJhi=~(*X=NIV*8+aCkI&*oI4h<(Eh-
znRh;RHV2raV*Nx$X2Ocahj+X?%NS`p;YEYYt=r1GZscF**7cDxymsi}W1x!|JYD@<
J);T3K0RS$eWy1gf

diff --git a/test/screenshot.spec.ts b/test/screenshot.spec.ts
index 607b1369765..55b422e0642 100644
--- a/test/screenshot.spec.ts
+++ b/test/screenshot.spec.ts
@@ -50,26 +50,8 @@ describe('Screenshots', function () {
       });
       expect(screenshot).toBeGolden('screenshot-clip-rect.png');
     });
-    // TODO: enable after the screenshot is fixed.
-    // https://crbug.com/1173457
-    it.skip('should clip elements to the viewport size without artefacts', async () => {
-      const { page, server } = getTestState();
-      await page.setViewport({ width: 50, height: 50 });
-      await page.goto(server.PREFIX + '/grid.html');
-      const screenshot = await page.screenshot({
-        clip: {
-          x: 25,
-          y: 25,
-          width: 100,
-          height: 100,
-        },
-      });
-      expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
-    });
-    // TODO: remove after the screenshot is fixed.
-    // https://crbug.com/1173457
     itFailsFirefox(
-      'should clip elements to the viewport size with artefacts',
+      'should get screenshot bigger than the viewport',
       async () => {
         const { page, server } = getTestState();
         await page.setViewport({ width: 50, height: 50 });
@@ -82,9 +64,7 @@ describe('Screenshots', function () {
             height: 100,
           },
         });
-        expect(screenshot).toBeGolden(
-          'screenshot-offscreen-clip-artefacts.png'
-        );
+        expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
       }
     );
     it('should run in parallel', async () => {