fix(screenshot): round the clip dimensions (#3778)

lib/Page.js

@@ -855,7 +855,7 @@ class Page extends EventEmitter {
    */
   async _screenshotTask(format, options) {
     await this._client.send('Target.activateTarget', {targetId: this._target._targetId});
-    let clip = options.clip ? Object.assign({}, options['clip'], {scale: 1}) : undefined;
+    let clip = options.clip ? processClip(options.clip) : undefined;
 
     if (options.fullPage) {
       const metrics = await this._client.send('Page.getLayoutMetrics');
@@ -887,6 +887,14 @@ class Page extends EventEmitter {
     if (options.path)
       await writeFileAsync(options.path, buffer);
     return buffer;
+
+    function processClip(clip) {
+      const x = Math.round(clip.x);
+      const y = Math.round(clip.y);
+      const width = Math.round(clip.width + clip.x - x);
+      const height = Math.round(clip.height + clip.y - y);
+      return {x, y, width, height, scale: 1};
+    }
   }
 
   /**

test/screenshot.spec.js

@@ -224,6 +224,18 @@ module.exports.addTests = function({testRunner, expect, product}) {
       const error = await div.screenshot().catch(e => e);
       expect(error.message).toBe('Node has 0 height.');
     });
+    it('should work for an element with fractional dimensions', async({page}) => {
+      await page.setContent('<div style="width:48.51px;height:19.8px;border:1px solid black;"></div>');
+      const elementHandle = await page.$('div');
+      const screenshot = await elementHandle.screenshot();
+      expect(screenshot).toBeGolden('screenshot-element-fractional.png');
+    });
+    it('should work for an element with an offset', async({page}) => {
+      await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>');
+      const elementHandle = await page.$('div');
+      const screenshot = await elementHandle.screenshot();
+      expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png');
+    });
   });
 
 };