Fixes the case where active element is a light descendant of shady ro…

…ot's host; match Polymer style.
Polymer · Dec 14, 2015 · 3518621 · 3518621
1 parent 26fb20b
commit 3518621
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 41 deletions.
diff --git a/src/lib/dom-api.html b/src/lib/dom-api.html
@@ -597,13 +597,7 @@
       activeElement: {
         configurable: true,
         get: function() {
-          var ownerDocument = this.node.ownerDocument;
-
-          if (ownerDocument || !window.ShadowDOMPolyfill) {
-            return this.node.activeElement;
-          } else {
-            return window.ShadowDOMPolyfill.wrapIfNeeded(this.node).activeElement;
-          }
+          return wrap(this.node).activeElement;
         }
       }
     });
@@ -616,46 +610,36 @@
         activeElement: {
           get: function() {
             var active = document.activeElement;
-            if (!active) return null;
-
-            var nodeIsDocument = this.node === document;
-
-            if (!nodeIsDocument) {
+            if (!active) {
+              return null;
+            }
+            if (this.node !== document) {
               // If this node isn't a document or shady root, then it doesn't
               // have an active element.
-              if (!this.node._isShadyRoot) return null;
-
+              if (!this.node._isShadyRoot) {
+                return null;
+              }
               // If this shady root's host is the active element or the active
               // element is not a descendant of the host, then it doesn't have
               // an active element.
               if (this.node.host === active || !this.node.host.contains(active)) {
                 return null;
               }
+              // If the active element is a light descendant of the shady root's
+              // host, return the active element.
+              if (this.node.host !== active && this._contains(this.node.host, active)) {
+                return active;
+              }
             }
-
             // This node is either the document or a shady root of which the
             // active element is a descendant of its host; iterate upwards to
             // find the active element's most shallow host.
             var activeRoot = Polymer.dom(active).getOwnerRoot();
-            while (activeRoot && activeRoot !== this.node) {
+            while (activeRoot && activeRoot !== this.node && !(this.node._isShadyRoot && this._contains(this.node.host, active))) {
               active = activeRoot.host;
               activeRoot = Polymer.dom(active).getOwnerRoot();
             }
-
-            // This node is the document and we've found the active element's
-            // most shallow host.
-            if (nodeIsDocument && !activeRoot) {
-              return active;
-            }
-
-            // This node is a shady root and we've found the active element's
-            // most shallow host (within the shady root).
-            if (!nodeIsDocument && activeRoot === this.node) {
-              return active;
-            }
-
-            // The active element is within the light DOM of this shady root.
-            return null;
+            return active;
           },
           configurable: true
         },

diff --git a/test/unit/polymer-dom-elements.html b/test/unit/polymer-dom-elements.html
@@ -444,6 +444,13 @@
 </dom-module>
 
 <dom-module id="x-shadow-host-root-0-0-light">
+  <template>
+    <div>
+      <div>
+        <x-shadow-host-root-0-0-light-0></x-shadow-host-root-0-0-light-0>
+      </div>
+    </div>
+  </template>
   <script>
     Polymer({
       is: 'x-shadow-host-root-0-0-light',
@@ -454,6 +461,17 @@
   </script>
 </dom-module>
 
+<dom-module id="x-shadow-host-root-0-0-light-0">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0-0-light-0',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
 <dom-module id="x-shadow-host-root-0-1">
   <template>
     <content></content>
@@ -508,6 +526,9 @@
 </dom-module>
 
 <dom-module id="x-shadow-host-root-1-light">
+  <template>
+    <x-shadow-host-root-1-light-0></x-shadow-host-root-1-light-0>
+  </template>
   <script>
     Polymer({
       is: 'x-shadow-host-root-1-light',
@@ -518,6 +539,17 @@
   </script>
 </dom-module>
 
+<dom-module id="x-shadow-host-root-1-light-0">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1-light-0',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
 <dom-module id="x-shadow-host-root-1-0">
   <template>
     <content></content>