Use more resiliant shadowroot checking

src/standard/gestures.html

@@ -97,24 +97,26 @@
     return ta;
   }
 
-  function deepTargetFind(x, y) {
-    var node = document.elementFromPoint(x, y);
-    // this code path is only taken when native ShadowDOM is used
-    var next = node.shadowRoot;
-    while(next) {
-      next = next.elementFromPoint(x, y);
-      if (next) {
-        node = next;
-        next = next.shadowRoot;
-      }
-    }
-    return node;
-  }
 
   var Gestures = {
     gestures: {},
     recognizers: [],
 
+    deepTargetFind: function(x, y) {
+      var node = document.elementFromPoint(x, y);
+      var next = node;
+      // this code path is only taken when native ShadowDOM is used
+      // if there is a shadowroot, it may have a node at x/y
+      // if there is not a shadowroot, exit the loop
+      while (next && next.shadowRoot) {
+        // if there is a node at x/y in the shadowroot, look deeper
+        next = next.shadowRoot.elementFromPoint(x, y);
+        if (next) {
+          node = next;
+        }
+      }
+      return node;
+    },
     handleNative: function(ev) {
       var handled;
       var type = ev.type;
@@ -396,7 +398,7 @@
         ddx: ddx,
         ddy: ddy,
         hover: function() {
-          return deepTargetFind(touch.clientX, touch.clientY);
+          return Gestures.deepTargetFind(touch.clientX, touch.clientY);
         }
       });
     }

test/unit/gestures.html

@@ -91,6 +91,66 @@
       });
     });
 
+    suite('target finding', function() {
+      var div, divLocation;
+
+      setup(function() {
+        div = document.createElement('div');
+        div.style.cssText = 'height: 50px; width: 50px; background: red;';
+        div.id = 'target';
+        document.body.appendChild(div);
+        divLocation = div.getBoundingClientRect();
+      });
+
+      test('target finding returns null outside the window', function() {
+        var actual = Polymer.Gestures.deepTargetFind(-1, -1);
+        assert.equal(actual, null);
+      })
+
+      test('find the div in document', function() {
+        var x = divLocation.left, y = divLocation.top;
+        var actual = Polymer.Gestures.deepTargetFind(x, y);
+        assert.equal(actual, div);
+      });
+
+      test('find the div with a shadowroot', function() {
+        if (!div.createShadowRoot) {
+          return;
+        }
+        div.createShadowRoot();
+        var x = divLocation.left, y = divLocation.top;
+        var actual = Polymer.Gestures.deepTargetFind(x, y);
+        assert.equal(actual, div);
+      });
+
+      test('find the div inside a shadowroot', function() {
+        if (!div.createShadowRoot) {
+          return;
+        }
+        var divOwner = document.createElement('span');
+        document.body.appendChild(divOwner);
+        divOwner.createShadowRoot().appendChild(div);
+        var bcr = divOwner.getBoundingClientRect();
+        var x = bcr.left, y = bcr.top;
+        var actual = Polymer.Gestures.deepTargetFind(x, y);
+        assert.equal(actual, div);
+      });
+
+      test('find the div with a shadowroot inside a shadowroot', function() {
+        if (!div.createShadowRoot) {
+          return;
+        }
+        div.createShadowRoot();
+        var divOwner = document.createElement('span');
+        document.body.appendChild(divOwner);
+        divOwner.createShadowRoot().appendChild(div);
+        var bcr = divOwner.getBoundingClientRect();
+        var x = bcr.left, y = bcr.top;
+        var actual = Polymer.Gestures.deepTargetFind(x, y);
+        assert.equal(actual, div);
+      });
+    });
+
     // TODO(dfreedm): Add more gesture tests!
 
   </script>