From bcb62de4b26caf107179ce280c989b85253cc5e6 Mon Sep 17 00:00:00 2001
From: Pavel <pavel.feldman@gmail.com>
Date: Fri, 6 Dec 2019 14:47:26 -0800
Subject: [PATCH] fix(test): make click tests pass everywhere

---
 src/dom.ts         | 18 +++++++++---------
 test/click.spec.js | 29 ++++++++++++-----------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/dom.ts b/src/dom.ts
index 148f5cd6b0..46ebdb8586 100644
--- a/src/dom.ts
+++ b/src/dom.ts
@@ -275,17 +275,17 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
       point.y += border.y;
     }
     const metrics = await this._world.delegate.layoutViewport();
-    // Give one extra pixel to avoid any issues on viewport edge.
+    // Give 6 (six) extra pixels to avoid any issues on viewport edge.
     let scrollX = 0;
-    if (point.x < 1)
-      scrollX = point.x - 1;
-    if (point.x > metrics.width - 1)
-      scrollX = point.x - metrics.width + 1;
+    if (point.x < 6)
+      scrollX = point.x - 6;
+    if (point.x > metrics.width - 6)
+      scrollX = point.x - metrics.width + 6;
     let scrollY = 0;
-    if (point.y < 1)
-      scrollY = point.y - 1;
-    if (point.y > metrics.height - 1)
-      scrollY = point.y - metrics.height + 1;
+    if (point.y < 6)
+      scrollY = point.y - 6;
+    if (point.y > metrics.height - 6)
+      scrollY = point.y - metrics.height + 6;
     return { point, scrollX, scrollY };
   }
 
diff --git a/test/click.spec.js b/test/click.spec.js
index 536d35c3f1..af9d121fb2 100644
--- a/test/click.spec.js
+++ b/test/click.spec.js
@@ -78,7 +78,7 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
       ]);
       expect(page.url()).toBe(server.PREFIX + '/wrappedlink.html#clicked');
     });
-    it.skip(FFOX)('should click when one of inline box children is outside of viewport', async({page, server}) => {
+    it('should click when one of inline box children is outside of viewport', async({page, server}) => {
       await page.setContent(`
         <style>
         i {
@@ -272,7 +272,7 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
       await frame.click('button');
       expect(await frame.evaluate(() => window.result)).toBe('Clicked');
     });
-    it.skip(WEBKIT)('should click the button with deviceScaleFactor set', async({page, server}) => {
+    it('should click the button with deviceScaleFactor set', async({page, server}) => {
       await page.setViewport({width: 400, height: 400, deviceScaleFactor: 5});
       expect(await page.evaluate(() => window.devicePixelRatio)).toBe(5);
       await page.setContent('<div style="width:100px;height:100px">spacer</div>');
@@ -282,21 +282,14 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
       await button.click();
       expect(await frame.evaluate(() => window.result)).toBe('Clicked');
     });
-
-    it('should click the button with relative point', async({page, server}) => {
-      await page.goto(server.PREFIX + '/input/button.html');
-      await page.click('button', { relativePoint: { x: 20, y: 10 } });
-      expect(await page.evaluate(() => result)).toBe('Clicked');
-      expect(await page.evaluate(() => offsetX)).toBe(20);
-      expect(await page.evaluate(() => offsetY)).toBe(10);
-    });
     it('should click the button with px border with relative point', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
       await page.$eval('button', button => button.style.borderWidth = '2px');
       await page.click('button', { relativePoint: { x: 20, y: 10 } });
       expect(await page.evaluate(() => result)).toBe('Clicked');
-      expect(await page.evaluate(() => offsetX)).toBe(20);
-      expect(await page.evaluate(() => offsetY)).toBe(10);
+      // Safari reports border-relative offsetX/offsetY.
+      expect(await page.evaluate(() => offsetX)).toBe(WEBKIT ? 20 + 2 : 20);
+      expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 10 + 2: 10);
     });
     it('should click the button with em border with relative point', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
@@ -304,16 +297,18 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
       await page.$eval('button', button => button.style.fontSize = '12px');
       await page.click('button', { relativePoint: { x: 20, y: 10 } });
       expect(await page.evaluate(() => result)).toBe('Clicked');
-      expect(await page.evaluate(() => offsetX)).toBe(20);
-      expect(await page.evaluate(() => offsetY)).toBe(10);
+      // Safari reports border-relative offsetX/offsetY.
+      expect(await page.evaluate(() => offsetX)).toBe(WEBKIT ? 12 * 2 + 20 : 20);
+      expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 12 * 2 + 10 : 10);
     });
     it('should click a very large button with relative point', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
       await page.$eval('button', button => button.style.height = button.style.width = '2000px');
       await page.click('button', { relativePoint: { x: 1900, y: 1910 } });
       expect(await page.evaluate(() => window.result)).toBe('Clicked');
-      expect(await page.evaluate(() => offsetX)).toBe(1900);
-      expect(await page.evaluate(() => offsetY)).toBe(1910);
+      // Safari reports border-relative offsetX/offsetY.
+      expect(await page.evaluate(() => offsetX)).toBe(WEBKIT ? 2 + 1900 : 1900);
+      expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 2 + 1910 : 1910);
     });
     xit('should click a button in scrolling container with relative point', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
@@ -333,7 +328,7 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
       expect(await page.evaluate(() => offsetY)).toBe(1910);
     });
 
-    it.skip(FFOX || WEBKIT)('should update modifiers correctly', async({page, server}) => {
+    it('should update modifiers correctly', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
       await page.click('button', { modifiers: ['Shift'] });
       expect(await page.evaluate(() => shiftKey)).toBe(true);