fix(input): ensure input works as expected with page scale (#962)

microsoft · Feb 13, 2020 · 1d84f38 · 1d84f38
1 parent ee9748b
commit 1d84f38
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');