From 1d84f38e5ee2ea96bfa74647bc7ac0231bc53228 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 12 Feb 2020 16:13:21 -0800
Subject: [PATCH] fix(input): ensure input works as expected with page scale
 (#962)

---
 package.json                  |  2 +-
 test/assets/input/button.html |  4 ++++
 test/click.spec.js            | 20 ++++++++++++++++++++
 test/elementhandle.spec.js    |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b7afea137ae50..b512f631a2935 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "playwright": {
     "chromium_revision": "740847",
     "firefox_revision": "1028",
-    "webkit_revision": "1145"
+    "webkit_revision": "1146"
   },
   "scripts": {
     "ctest": "cross-env BROWSER=chromium node test/test.js",
diff --git a/test/assets/input/button.html b/test/assets/input/button.html
index aaba6a5e2aede..164536e5e7f05 100644
--- a/test/assets/input/button.html
+++ b/test/assets/input/button.html
@@ -10,11 +10,15 @@
       window.result = 'Was not clicked';
       window.offsetX = undefined;
       window.offsetY = undefined;
+      window.pageX = undefined;
+      window.pageY = undefined;
       window.shiftKey = undefined;
       document.querySelector('button').addEventListener('click', e => {
         result = 'Clicked';
         offsetX = e.offsetX;
         offsetY = e.offsetY;
+        pageX = e.pageX;
+        pageY = e.pageY;
         shiftKey = e.shiftKey;
       }, false);
     </script>
diff --git a/test/click.spec.js b/test/click.spec.js
index 6b9e4f7f8c5e6..2dd4e1cb32a08 100644
--- a/test/click.spec.js
+++ b/test/click.spec.js
@@ -357,6 +357,26 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
       expect(await page.evaluate(() => offsetX)).toBe(WEBKIT ? 1900 + 8 : 1900);
       expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 1910 + 8 : 1910);
     });
+    it('should click the button with relative point with page scale', async({newPage, server}) => {
+      const page = await newPage({ viewport: { width: 400, height: 400, isMobile: true} });
+      await page.goto(server.PREFIX + '/input/button.html');
+      await page.$eval('button', button => {
+        button.style.borderWidth = '8px';
+        document.body.style.margin = '0';
+      });
+      await page.click('button', { relativePoint: { x: 20, y: 10 } });
+      expect(await page.evaluate(() => result)).toBe('Clicked');
+      let expected = { x: 28, y: 18 };  // 20;10 + 8px of border in each direction
+      if (WEBKIT) {
+        // WebKit rounds up during css -> dip -> css conversion.
+        expected = { x: 29, y: 19 };
+      } else if (CHROMIUM) {
+        // Chromium rounds down during css -> dip -> css conversion.
+        expected = { x: 27, y: 18 };
+      }
+      expect(await page.evaluate(() => pageX)).toBe(expected.x);
+      expect(await page.evaluate(() => pageY)).toBe(expected.y);
+    });
 
     it('should update modifiers correctly', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/button.html');
diff --git a/test/elementhandle.spec.js b/test/elementhandle.spec.js
index c83d95ad6d1f9..bb139224ca4c7 100644
--- a/test/elementhandle.spec.js
+++ b/test/elementhandle.spec.js
@@ -68,7 +68,7 @@ module.exports.describe = function({testRunner, expect, FFOX, CHROMIUM, WEBKIT})
       }, element);
       expect(pwBoundingBox).toEqual(webBoundingBox);
     });
-    it.skip(WEBKIT)('should work with page scale', async({newPage, server}) => {
+    it('should work with page scale', async({newPage, server}) => {
       const page = await newPage({ viewport: { width: 400, height: 400, isMobile: true} });
       await page.goto(server.PREFIX + '/input/button.html');
       const button = await page.$('button');