From b0b22199f9f23ca89b95d1c6f530c8e726309b0f Mon Sep 17 00:00:00 2001
From: Christopher Dieringer <cdaringe@users.noreply.github.com>
Date: Fri, 10 Nov 2017 16:02:52 -0800
Subject: [PATCH] fix(ElementHandle.screenshot): account for scroll (#1323)

Currently, `elementHandle.screenshot` passes bounding box into the `page.captureScreenshot`
method.
This is wrong since `captureScreenshot` accepts viewport, not bounding box.

This patch uses layout metrics to convert bounding box into viewport.

Fixes #1315.
---
 lib/ElementHandle.js                          |   8 ++++--
 .../screenshot-element-scrolled-into-view.png | Bin 0 -> 168 bytes
 test/test.js                                  |  23 ++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 test/golden/screenshot-element-scrolled-into-view.png

diff --git a/lib/ElementHandle.js b/lib/ElementHandle.js
index aabdbb6d646..49e7a8db5da 100644
--- a/lib/ElementHandle.js
+++ b/lib/ElementHandle.js
@@ -144,12 +144,16 @@ class ElementHandle extends JSHandle {
    */
   async screenshot(options = {}) {
     await this._scrollIntoViewIfNeeded();
+    const { layoutViewport: { pageX, pageY } } = await this._client.send('Page.getLayoutMetrics');
+
     const boundingBox = await this.boundingBox();
     if (!boundingBox)
       throw new Error('Node is not visible');
-
+    const clip = Object.assign({}, boundingBox);
+    clip.x += pageX;
+    clip.y += pageY;
     return await this._page.screenshot(Object.assign({}, {
-      clip: boundingBox
+      clip
     }, options));
   }
 
diff --git a/test/golden/screenshot-element-scrolled-into-view.png b/test/golden/screenshot-element-scrolled-into-view.png
new file mode 100644
index 0000000000000000000000000000000000000000..917dd48188d45ea1b07c1fa460a691a9e4a2d050
GIT binary patch
literal 168
zcmeAS@N?(olHy`uVBq!ia0vp^W+2SL1|)l2v+e?^d`}n0kc`H+w+y)&3<MYsy3|zE
zt!sV2EfP6%WzfAz+WCEjGLPH0t!J+|UAO<*pMoCtwb_jIzmpGTwOr*`Ef}V}#x0_E
jgH)m^VS&rO1!p)HiL+&@I7C+it!D6a^>bP0l+XkKPxw46

literal 0
HcmV?d00001

diff --git a/test/test.js b/test/test.js
index bc66777e46c..ac4db6c686f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1796,6 +1796,29 @@ describe('Page', function() {
       const screenshot = await elementHandle.screenshot();
       expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
     }));
+    it('should scroll element into view', SX(async function() {
+      await page.setViewport({width: 500, height: 500});
+      await page.setContent(`
+        something above
+        <style>div.above {
+          border: 2px solid blue;
+          background: red;
+          height: 1500px;
+        }
+        div.to-screenshot {
+          border: 2px solid blue;
+          background: green;
+          width: 50px;
+          height: 50px;
+        }
+        </style>
+        <div class="above"></div>
+        <div class="to-screenshot"></div>
+      `);
+      const elementHandle = await page.$('div.to-screenshot');
+      const screenshot = await elementHandle.screenshot();
+      expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png');
+    }));
     it('should work with a rotated element', SX(async function() {
       await page.setViewport({width: 500, height: 500});
       await page.setContent(`<div style="position:absolute;