Compute the correct pageX/Y for touch events.

juangj · juangj · commit b9896259df2a · 2015-11-18T14:03:16.000-08:00
Previously, pageX/Y were always the same as clientX/Y, which would be
incorrect if the page had been scrolled.

Submitted on behalf of a Googler.
diff --git a/javascript/atoms/device.js b/javascript/atoms/device.js
@@ -214,6 +214,7 @@ bot.Device.prototype.fireTouchEvent = function(type, id, coord, opt_id2,
     scale: 0,
     rotation: 0
   };
+  var pageOffset = goog.dom.getDomHelper(this.element_).getDocumentScroll();
 
   function addTouch(identifier, coords) {
     // Android devices leave identifier to zero.
@@ -224,8 +225,8 @@ bot.Device.prototype.fireTouchEvent = function(type, id, coord, opt_id2,
       screenY: coords.y,
       clientX: coords.x,
       clientY: coords.y,
-      pageX: coords.x,
-      pageY: coords.y
+      pageX: coords.x + pageOffset.x,
+      pageY: coords.y + pageOffset.y
     };
 
     args.changedTouches.push(touch);
diff --git a/javascript/atoms/events.js b/javascript/atoms/events.js
@@ -534,12 +534,14 @@ bot.events.TouchEventFactory_.prototype.create = function(target, opt_args) {
     event.rotation = args.rotation;
   } else {
     event = doc.createEvent('TouchEvent');
-    if (goog.userAgent.product.ANDROID) {
-      // Android's initTouchEvent method is not compliant with the W3C spec.
+    // Different browsers have different implementations of initTouchEvent.
+    if (event.initTouchEvent.length == 0) {
+      // Chrome/Android.
       event.initTouchEvent(touches, targetTouches, changedTouches,
           this.type_, view, /*screenX*/ 0, /*screenY*/ 0, args.clientX,
           args.clientY, args.ctrlKey, args.altKey, args.shiftKey, args.metaKey);
     } else {
+      // iOS.
       event.initTouchEvent(this.type_, this.bubbles_, this.cancelable_, view,
           /*detail*/ 1, /*screenX*/ 0, /*screenY*/ 0, args.clientX,
           args.clientY, args.ctrlKey, args.altKey, args.shiftKey, args.metaKey,
diff --git a/javascript/atoms/test/touchscreen_test.html b/javascript/atoms/test/touchscreen_test.html
@@ -2,10 +2,13 @@
 <html>
 <head>
   <title>touchscreen_test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="test_bootstrap.js"></script>
   <script type="text/javascript">
     goog.require('bot.Touchscreen');
     goog.require('bot.action');
+    goog.require('bot.dom');
+    goog.require('goog.Promise');
     goog.require('goog.events');
     goog.require('goog.events.EventType');
     goog.require('goog.math.Coordinate');
@@ -18,6 +21,7 @@
     var lowerTarget;
     var innerCaptureTarget;
     var noTouchTarget;
+    var coordsTarget;
 
     var touchscreen;
     var events = [];
@@ -45,6 +49,7 @@
       captureTarget = document.getElementById('captureTarget');
       innerCaptureTarget = document.getElementById('innerCaptureTarget');
       noTouchTarget = document.getElementById('notouch');
+      coordsTarget = document.getElementById('coordsTarget');
     }
 
     function setUp() {
@@ -55,6 +60,7 @@
       goog.events.removeAll(captureTarget);
       goog.events.removeAll(innerCaptureTarget);
       goog.events.removeAll(noTouchTarget);
+      goog.events.removeAll(coordsTarget);
 
       goog.events.listen(target, TOUCH_EVENTS, function(e) {
         events.push(e.type);
@@ -81,6 +87,16 @@
         events.push(e.type);
         events.push(e.target);
       });
+      goog.events.listen(coordsTarget, goog.events.EventType.TOUCHSTART,
+                         function(e) {
+        var event = e.getBrowserEvent();
+        if (event.changedTouches.length == 1) {
+          events.push(event.changedTouches[0].clientX);
+          events.push(event.changedTouches[0].clientY);
+          events.push(event.changedTouches[0].pageX);
+          events.push(event.changedTouches[0].pageY);
+        }
+      });
     }
 
     function msPointerDownEvents(elem) {
@@ -458,6 +474,25 @@
         assertEvents(events);
       }
     }
+
+    function testTouchEventCoords() {
+      if (!bot.events.SUPPORTS_TOUCH_EVENTS || bot.userAgent.IE_DOC_10) {
+        return;
+      }
+      window.scrollTo(20, 30);
+      // Yield to ensure all browsers apply the scrolling change.
+      // Relying on the implicit tick in a promise resolution is enough.
+      return goog.Promise.resolve().then(function() {
+        var coords = bot.dom.getClientRect(coordsTarget);
+        touchscreen.move(coordsTarget, new goog.math.Coordinate(0, 0));
+        touchscreen.press();
+        touchscreen.release();
+        // The client coords of the touch event should be the top left of the
+        // target and the page coords should include the scroll offset.
+        assertEvents([coords.left, coords.top,
+                      coords.left + 20, coords.top + 30]);
+      });
+    }
   </script>
 </head>
 <body>
@@ -502,5 +537,12 @@
               -ms-touch-action:auto">
     no touch
   </div>
+  <div id="coordsTarget"
+       style="background-color:magenta;
+              width:8000px;
+              height:8000px;
+              -ms-touch-action:none">
+    coords target
+  </div>
 </body>
 </html>
