diff --git a/lib/Page.js b/lib/Page.js index a92cb1b5f6d..455789aad5a 100644 --- a/lib/Page.js +++ b/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}; + } } /** diff --git a/test/golden/screenshot-element-fractional-offset.png b/test/golden/screenshot-element-fractional-offset.png new file mode 100644 index 00000000000..cc8669d598b Binary files /dev/null and b/test/golden/screenshot-element-fractional-offset.png differ diff --git a/test/golden/screenshot-element-fractional.png b/test/golden/screenshot-element-fractional.png new file mode 100644 index 00000000000..35c53377f94 Binary files /dev/null and b/test/golden/screenshot-element-fractional.png differ diff --git a/test/screenshot.spec.js b/test/screenshot.spec.js index 36fba4595e9..8fd6ac11658 100644 --- a/test/screenshot.spec.js +++ b/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('
'); + 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(''); + const elementHandle = await page.$('div'); + const screenshot = await elementHandle.screenshot(); + expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png'); + }); }); };