Account for DOM selection in sub-shadow elements

- Fixes #480
googlearchive · Aug 2, 2014 · 541b352 · 541b352
1 parent a41dccf
commit 541b352
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 5 deletions.
diff --git a/src/querySelector.js b/src/querySelector.js
@@ -100,7 +100,12 @@
   function querySelectorAllFiltered (p, index, result, selector) {
     var target = this.impl;
     var list;
-    if (target instanceof OriginalElement) {
+    var root = getTreeScope(this).root;
+    if (root instanceof scope.wrappers.ShadowRoot) {
+      // We are in the shadow tree and the logical tree is
+      // going to be disconnected so we do a manual tree traversal
+      return findElements(this, index, result, p, selector, null);
+    } else if (target instanceof OriginalElement) {
       list = originalElementQuerySelectorAll.call(target, selector);
     } else if (target instanceof OriginalDocument) {
       list = originalDocumentQuerySelectorAll.call(target, selector);
@@ -117,8 +122,12 @@
     querySelector: function(selector) {
       var target = this.impl;
       var wrappedItem;
-      var root;
-      if (target instanceof OriginalElement) {
+      var root = getTreeScope(this).root;
+      if (root instanceof scope.wrappers.ShadowRoot) {
+        // We are in the shadow tree and the logical tree is
+        // going to be disconnected so we do a manual tree traversal
+        return findOne(this, selector);
+      } else if (target instanceof OriginalElement) {
         wrappedItem = wrap(originalElementQuerySelector.call(target, selector));
       } else if (target instanceof OriginalDocument) {
         wrappedItem = wrap(originalDocumentQuerySelector.call(target, selector));
@@ -158,7 +167,12 @@
   function getElementsByTagNameFiltered (p, index, result, localName, lowercase) {
     var target = this.impl;
     var list;
-    if (target instanceof OriginalElement) {
+    var root = getTreeScope(this).root;
+    if (root instanceof scope.wrappers.ShadowRoot) {
+      // We are in the shadow tree and the logical tree is
+      // going to be disconnected so we do a manual tree traversal
+      return findElements(this, index, result, p, localName, lowercase);
+    } else if (target instanceof OriginalElement) {
       list = originalElementGetElementsByTagName.call(target, localName, lowercase);
     } else if (target instanceof OriginalDocument) {
       list = originalDocumentGetElementsByTagName.call(target, localName, lowercase);
@@ -174,7 +188,12 @@
   function getElementsByTagNameNSFiltered (p, index, result, ns, localName) {
     var target = this.impl;
     var list;
-    if (target instanceof OriginalElement) {
+    var root = getTreeScope(this).root;
+    if (root instanceof scope.wrappers.ShadowRoot) {
+      // We are in the shadow tree and the logical tree is
+      // going to be disconnected so we do a manual tree traversal
+      return findElements(this, index, result, p, ns, localName);
+    } else if (target instanceof OriginalElement) {
       list = originalElementGetElementsByTagNameNS.call(target, ns, localName);
     } else if (target instanceof OriginalDocument) {
       list = originalDocumentGetElementsByTagNameNS.call(target, ns, localName);

diff --git a/test/js/Element.js b/test/js/Element.js
@@ -285,4 +285,58 @@ suite('Element', function() {
     assert.equal(as[0], a1);
     assert.equal(as.item(0), a1);
   });
+
+  test('sub shadow-root traversal', function() {
+    var div = document.createElement("DIV");
+    var sr = div.createShadowRoot();
+    sr.innerHTML = "<aa><bb></bb></aa>";
+
+    var saal = sr.getElementsByTagName("aa");
+    var sbbl = sr.getElementsByTagName("bb");
+    assert.equal(saal.length, 1);
+    assert.equal(sbbl.length, 1);
+
+    var saa = saal [0];
+    var sbb = sbbl [0];
+    var abbl = saa.getElementsByTagName("bb");
+    assert.equal(abbl.length, 1);
+
+    var abb = abbl [0];
+    assert.instanceOf(abb, HTMLElement);
+    assert.equal(abb, sbb);
+
+    var saal = sr.getElementsByTagNameNS("*", "aa");
+    var sbbl = sr.getElementsByTagNameNS("*", "bb");
+    assert.equal(saal.length, 1);
+    assert.equal(sbbl.length, 1);
+
+    var saa = saal [0];
+    var sbb = sbbl [0];
+    var abbl = saa.getElementsByTagNameNS("*", "bb");
+    assert.equal(abbl.length, 1);
+
+    var abb = abbl [0];
+    assert.instanceOf(abb, HTMLElement);
+    assert.equal(abb, sbb);
+
+    var saal = sr.querySelectorAll("aa");
+    var sbbl = sr.querySelectorAll("bb");
+    assert.equal(saal.length, 1);
+    assert.equal(sbbl.length, 1);
+
+    var saa = saal [0];
+    var sbb = sbbl [0];
+    var abbl = saa.querySelectorAll("bb");
+    assert.equal(abbl.length, 1);
+
+    var abb = abbl [0];
+    assert.instanceOf(abb, HTMLElement);
+    assert.equal(abb, sbb);
+
+    var saa = sr.querySelector("aa");
+    var sbb = sr.querySelector("bb");
+    var abb = saa.querySelector("bb");
+    assert.instanceOf(abb, HTMLElement);
+    assert.equal(abb, sbb);
+  });
 });