Merge pull request #2517 from Polymer/light-dom-util

add util method for shadow children

src/standard/utils.html

@@ -150,7 +150,7 @@
      *   payload.
      * @param {Object=} options Object specifying options.  These may include:
      *  `bubbles` (boolean, defaults to `true`),
-     *  `cancelable` (boolean, defaults to false), and 
+     *  `cancelable` (boolean, defaults to false), and
      *  `node` on which to fire the event (HTMLElement, defaults to `this`).
      * @return {CustomEvent} The new event that was fired.
      */
@@ -199,11 +199,11 @@
 
     /**
      * Removes an item from an array, if it exists.
-     * 
-     * If the array is specified by path, a change notification is 
+     *
+     * If the array is specified by path, a change notification is
      * generated, so that observers, data bindings and computed
-     * properties watching that path can update. 
-     * 
+     * properties watching that path can update.
+     *
      * If the array is passed directly, **no change
      * notification is generated**.
      *
@@ -306,6 +306,29 @@
         }
       }
       return elt;
+    },
+
+    /**
+     * Checks whether an element is in this element's light DOM tree.
+     *
+     * @method isLightDescendant
+     * @param {HTMLElement=} node The element to be checked.
+     * @return {Boolean} true if node is in this element's light DOM tree.
+     */
+    isLightDescendant: function(node) {
+      return this.contains(node) &&
+          Polymer.dom(this).getOwnerRoot() === Polymer.dom(node).getOwnerRoot();
+    },
+
+    /**
+     * Checks whether an element is in this element's local DOM tree.
+     *
+     * @method isLocalDescendant
+     * @param {HTMLElement=} node The element to be checked.
+     * @return {Boolean} true if node is in this element's local DOM tree.
+     */
+    isLocalDescendant: function(node) {
+      return this.root === Polymer.dom(node).getOwnerRoot();
     }
 
   });

test/unit/utils-content.html

@@ -26,7 +26,7 @@
     <div></div>
     <div></div>
   </x-content>
-  
+
   <x-content-multi id="elt3">
     <span></span>
     <div></div>
@@ -37,41 +37,50 @@
     <span></span>
   </x-content-multi>
 
+  <x-content-mixed id="elt4">
+    <span></span>
+    <x-content></x-content>
+  </x-content-mixed>
+
+  <x-content-mixed id="elt5">
+    <x-content-mixed id="elt6"></x-content-mixed>
+  </x-content-mixed>
+
   <script>
-    
+
     suite('content utils', function() {
-      
+
       var elt1 = document.querySelector('#elt1');
       var elt2 = document.querySelector('#elt2');
       var elt3 = document.querySelector('#elt3');
-      
+
       test('getContentChildNodes (empty)', function() {
         var nodes = elt1.getContentChildNodes();
         assert.equal(nodes.length, 1, 'should have 1 text node');
       });
-      
+
       test('getContentChildren (empty)', function() {
         var nodes = elt1.getContentChildren();
         assert.equal(nodes.length, 0, 'should have no children');
       });
-  
+
       test('getContentChildNodes', function() {
         var nodes = elt2.getContentChildNodes();
         assert.equal(nodes.length, 7, 'should have 7 nodes (text nodes + divs)');
       });
-      
+
       test('getContentChildren', function() {
         var nodes = elt2.getContentChildren();
         assert.equal(nodes.length, 3, 'should have 3 divs');
       });
-      
+
       test('getContentChildNodes with selector', function() {
         var nodes = elt3.getContentChildNodes('[select=div]');
         assert.equal(nodes.length, 3, 'should have 3 divs');
         nodes = elt3.getContentChildNodes('[select=span]');
         assert.equal(nodes.length, 4, 'should have 4 spans');
       });
-      
+
       test('getContentChildren with selector', function() {
         var nodes = elt3.getContentChildren('[select=div]');
         assert.equal(nodes.length, 3, 'should have 3 divs');
@@ -88,10 +97,55 @@
         var nodes = elt3.getContentChildren('[dne]');
         assert.equal(nodes.length, 0, 'should find 0 nodes');
       });
-
+
+    });
+
+    suite('isLight/Local descendant utils', function() {
+      var elt1 = document.querySelector('#elt1');
+      var elt4 = document.querySelector('#elt4');
+      var elt5 = document.querySelector('#elt5');
+      var elt6 = document.querySelector('#elt6');
+
+      test('isLightDescendant is true for light children', function() {
+        var span = elt4.querySelector('span');
+        var customElement = elt4.querySelector('x-content');
+        assert.isTrue(elt4.isLightDescendant(span));
+        assert.isTrue(elt4.isLightDescendant(customElement));
+      });
+
+      test('isLocalDescendant is false for light children', function() {
+        var span = elt4.querySelector('span');
+        var customElement = elt4.querySelector('x-content');
+        assert.isFalse(elt4.isLocalDescendant(span));
+        assert.isFalse(elt4.isLocalDescendant(customElement));
+      });
+
+      test('isLightDescendant is false for local children', function() {
+        assert.isFalse(elt4.isLightDescendant(elt4.localChild));
+      });
+
+      test('isLocalDescendant is true for local children', function() {
+        assert.isTrue(elt4.isLocalDescendant(elt4.localChild));
+      });
+
+      test('isLightDescendant is false for unrelated elements', function() {
+        assert.isFalse(elt4.isLightDescendant(elt1));
+      });
+
+      test('isLocalDescendant is false for unrelated elements', function() {
+        assert.isFalse(elt4.isLocalDescendant(elt1));
+      });
+
+      test('isLightDescendant is false for somebody else\'s local child', function() {
+        assert.isFalse(elt5.isLightDescendant(elt6.localChild));
+      });
+
+      test('isLocalDescendant is false for somebody else\'s local child', function() {
+        assert.isFalse(elt5.isLocalDescendant(elt6.localChild));
+      });
     });
-  
+
   </script>
-  
+
 </body>
 </html>

test/unit/utils-elements.html

@@ -37,4 +37,23 @@
   Polymer({
     is: 'x-content-multi'
   });
-</script>
+</script>
+
+<dom-module id="x-content-mixed">
+
+  <template>
+    <content></content>
+    <x-content id="localChild"></x-content>
+  </template>
+
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-content-mixed',
+
+    get localChild () {
+      return this.$.localChild;
+    }
+  });
+</script>

test/unit/utils.html

@@ -18,7 +18,7 @@
 <body>
 
 <script>
-  
+
   HTMLImports.whenReady(function() {
     Polymer({is: 'my-element'});
   });