PointerEvent: Polyfill offsetX/Y as getter

WIP: No idea how to write a unit test for this, so for now it only
extends the simple sample.

Tested with the sample on Chrome, Firefox and Safari (all OSX) and
Android 5 (BrowserStack) and iOS 9.1 (iOS Simulator).

Fixes jquery-archive#217

Author: jzaefferer

samples/simple/index.html

@@ -21,6 +21,10 @@
         height: 300px;
         width: 300px;
         text-align: center;
+        position: relative;
+        top: 10px;
+        left: 10px;
+        margin-bottom: 10px;
       }
       #enterleave {
         background-color: blue;
@@ -32,12 +36,13 @@
         left: 25%;
         top: 25%;
         position: relative;
+        border: 10px solid gray;
       }
       #output {
-        width: 300px;
         height: 150px;
         overflow: scroll;
         white-space: pre;
+        margin-bottom: 1000em;
       }
     </style>
     <script src="../../dist/pep.js"></script>
@@ -72,7 +77,9 @@
       find('capture', 'output', 'enterleave');
       events.forEach(function(en) {
         capture.addEventListener(en, function(inEvent) {
-          appendOutput(inEvent.type + ' [' + inEvent.pointerId + ']');
+          appendOutput(inEvent.type + ' [' + inEvent.pointerId + ']' +
+            ' pageX/offsetX ' + inEvent.pageX + '/' + inEvent.offsetX +
+            ' pageY/offsetY ' + inEvent.pageY + '/' + inEvent.offsetY);
         });
       });
       enterleave.addEventListener('pointerenter', function(e) {

src/PointerEvent.js

@@ -87,6 +87,35 @@ function PointerEvent(inType, inDict) {
   e.pointerType = inDict.pointerType || '';
   e.hwTimestamp = inDict.hwTimestamp || 0;
   e.isPrimary = inDict.isPrimary || false;
+
+  var rect;
+  function boundingClientRect() {
+    if (rect) {
+      return rect;
+    }
+    return (rect = inDict.target.getBoundingClientRect());
+  }
+
+  // CSSOM View Module's extension to mouse events
+  if (inDict.offsetX === undefined) {
+    Object.defineProperty(e, 'offsetX', {
+      get: function() {
+        return e.clientX - boundingClientRect().left - inDict.target.clientLeft;
+      }
+    });
+  } else {
+    e.offsetX = inDict.offsetX;
+  }
+  if (inDict.offsetY === undefined) {
+    Object.defineProperty(e, 'offsetY', {
+      get: function() {
+        return e.clientY - boundingClientRect().top - inDict.target.clientTop;
+      }
+    });
+  } else {
+    e.offsetY = inDict.offsetY;
+  }
+
   return e;
 }