fix(firefox): properly round clip when doing element screenshots (#4001)

Do clipping the same way we do it in Chromium.

experimental/puppeteer-firefox/lib/JSHandle.js

@@ -169,10 +169,10 @@ class ElementHandle extends JSHandle {
 
     return await this._frame._page.screenshot(Object.assign({}, options, {
       clip: {
-        x: Math.round(clip.x),
+        x: clip.x,
-        y: Math.round(clip.y),
+        y: clip.y,
-        width: Math.round(clip.width),
+        width: clip.width,
-        height: Math.round(clip.height),
+        height: clip.height,
       },
     }));
   }

experimental/puppeteer-firefox/lib/Page.js

@@ -379,12 +379,22 @@ class Page extends EventEmitter {
     const {data} = await this._session.send('Page.screenshot', {
       mimeType: getScreenshotMimeType(options),
       fullPage: options.fullPage,
-      clip: options.clip,
+      clip: processClip(options.clip),
     });
     const buffer = options.encoding === 'base64' ? data : Buffer.from(data, 'base64');
     if (options.path)
       await writeFileAsync(options.path, buffer);
     return buffer;
+
+    function processClip(clip) {
+      if (!clip)
+        return undefined;
+      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};
+    }
   }
 
   async evaluate(pageFunction, ...args) {

test/puppeteer.spec.js

@@ -23,8 +23,8 @@ const YELLOW_COLOR = '\x1b[33m';
 const RESET_COLOR = '\x1b[0m';
 
 module.exports.addTests = ({testRunner, product, puppeteer, Errors, DeviceDescriptors}) => {
-  const {describe, xdescribe, fdescribe, describe_fails_ffox} = testRunner;
+  const {describe, xdescribe, fdescribe} = testRunner;
-  const {it, fit, xit, it_fails_ffox} = testRunner;
+  const {it, fit, xit} = testRunner;
   const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
 
   const CHROME = product === 'Chromium';

test/screenshot.spec.js

@@ -15,7 +15,7 @@
  */
 
 module.exports.addTests = function({testRunner, expect, product}) {
-  const {describe, xdescribe, fdescribe, describe_fails_ffox} = testRunner;
+  const {describe, xdescribe, fdescribe} = testRunner;
   const {it, fit, xit, it_fails_ffox} = testRunner;
   const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
 
@@ -230,7 +230,7 @@ module.exports.addTests = function({testRunner, expect, product}) {
       const screenshot = await elementHandle.screenshot();
       expect(screenshot).toBeGolden('screenshot-element-fractional.png');
     });
-    it_fails_ffox('should work for an element with an offset', async({page}) => {
+    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();