fix(clicking): handle negative area results in computeQuadArea (#3413)

This patch fixes a case in which computeQuadArea calculates the area size correctly, but returns the area as a negative number. This occurs when DOM.getContentQuads returns quads in a specific order. E.g. the array: [ { x: 463, y: 68.5 },{ x: 437, y: 68.5 },{ x: 437, y: 94.5 },{ x: 463, y: 94.5 } ] will receive area size of -676.
puppeteer · Oct 25, 2018 · 81edbbb · 81edbbb
1 parent fae441c
commit 81edbbb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/lib/ExecutionContext.js b/lib/ExecutionContext.js
@@ -626,7 +626,7 @@ function computeQuadArea(quad) {
     const p2 = quad[(i + 1) % quad.length];
     area += (p1.x * p2.y - p2.x * p1.y) / 2;
   }
-  return area;
+  return Math.abs(area);
 }
 
 helper.tracePublicAPI(ElementHandle);

diff --git a/test/assets/input/rotatedButton.html b/test/assets/input/rotatedButton.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Rotated button test</title>
+  </head>
+  <body>
+    <script src="mouse-helper.js"></script>
+    <button onclick="clicked();">Click target</button>
+    <style>
+      button {
+        transform: rotateY(180deg);
+      }
+    </style>
+    <script>
+      window.result = 'Was not clicked';
+      function clicked() {
+        result = 'Clicked';
+      }
+    </script>
+  </body>
+</html>
diff --git a/test/input.spec.js b/test/input.spec.js
@@ -312,6 +312,11 @@ module.exports.addTests = function({testRunner, expect}) {
       await page.click('button');
       expect(await page.evaluate(() => window.result)).toBe('Clicked');
     });
+    it('should click a rotated button', async({page, server}) => {
+      await page.goto(server.PREFIX + '/input/rotatedButton.html');
+      await page.click('button');
+      expect(await page.evaluate(() => result)).toBe('Clicked');
+    });
     it('should select the text with mouse', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/textarea.html');
       await page.focus('textarea');