DOM API implementation of activeElement.

Polymer · Jan 6, 2016 · 2984576 · 2984576
1 parent 3b26f6d
commit 2984576
Show file tree

Hide file tree

Showing 7 changed files with 588 additions and 2 deletions.
diff --git a/bower.json b/bower.json
@@ -20,7 +20,7 @@
     "url": "https://github.com/Polymer/polymer.git"
   },
   "dependencies": {
-    "webcomponentsjs": "^0.7.18"
+    "webcomponentsjs": "^0.7.20"
   },
   "devDependencies": {
     "web-component-tester": "*"

diff --git a/src/lib/dom-api-shadow.html b/src/lib/dom-api-shadow.html
@@ -58,6 +58,13 @@
 
   Object.defineProperties(DomApi.prototype, {
 
+    activeElement: {
+      get: function() {
+        return Polymer.DomApi.wrap(this.node).activeElement;
+      },
+      configurable: true
+    },
+
     childNodes: {
       get: function() {
         return TreeApi.arrayCopyChildNodes(this.node);

diff --git a/src/lib/dom-api-shady.html b/src/lib/dom-api-shady.html
@@ -422,6 +422,47 @@
 
   Object.defineProperties(DomApi.prototype, {
 
+    activeElement: {
+      get: function() {
+        var active = document.activeElement;
+        if (!active) {
+          return null;
+        }
+        var isShadyRoot = !!this.node._isShadyRoot;
+        if (this.node !== document) {
+          // If this node isn't a document or shady root, then it doesn't
+          // have an active element.
+          if (!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 &&
+            !(isShadyRoot && this._contains(this.node.host, active))) {
+          active = activeRoot.host;
+          activeRoot = Polymer.dom(active).getOwnerRoot();
+        }
+        return active;
+      },
+      configurable: true
+    },
+
     childNodes: {
       get: function() {
         var c$ = TreeApi.Logical.getChildNodes(this.node);
@@ -569,4 +610,4 @@
   };
 
 })();
-</script>
+</script>
diff --git a/test/unit/polymer-dom-elements.html b/test/unit/polymer-dom-elements.html
@@ -357,3 +357,245 @@
   });
   </script>
 </dom-module>
+
+
+<dom-module id="x-shadow-host-root">
+  <template>
+    <content></content>
+    <div>
+      <div>
+        <x-shadow-host-root-0>
+          <x-shadow-host-root-0-light></x-shadow-host-root-0-light>
+        </x-shadow-host-root-0>
+      </div>
+    </div>
+    <div>
+      <x-shadow-host-root-1>
+        <x-shadow-host-root-1-light></x-shadow-host-root-1-light>
+      </x-shadow-host-root-1>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-light">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-light',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-0">
+  <template>
+    <content></content>
+    <div>
+      <x-shadow-host-root-0-0>
+        <x-shadow-host-root-0-0-light></x-shadow-host-root-0-0-light>
+      </x-shadow-host-root-0-0>
+    </div>
+    <x-shadow-host-root-0-1>
+      <x-shadow-host-root-0-1-light></x-shadow-host-root-0-1-light>
+    </x-shadow-host-root-0-1>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-0-light">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0-light',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-0-0">
+  <template>
+    <content></content>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0-0',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</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',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </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>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0-1',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-0-1-light">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-0-1-light',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-1">
+  <template>
+    <content></content>
+    <div>
+      <x-shadow-host-root-1-0>
+        <x-shadow-host-root-1-0-light></x-shadow-host-root-1-0-light>
+      </x-shadow-host-root-1-0>
+    </div>
+    <div>
+      <div>
+        <div>
+          <x-shadow-host-root-1-1>
+            <x-shadow-host-root-1-1-light></x-shadow-host-root-1-1-light>
+          </x-shadow-host-root-1-1>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</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',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </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>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1-0',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-1-0-light">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1-0-light',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-1-1">
+  <template>
+    <content></content>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1-1',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="x-shadow-host-root-1-1-light">
+  <script>
+    Polymer({
+      is: 'x-shadow-host-root-1-1-light',
+      hostAttributes: {
+        tabindex: '-1'
+      }
+    });
+  </script>
+</dom-module>
diff --git a/test/unit/polymer-dom-shadow.html b/test/unit/polymer-dom-shadow.html
@@ -57,6 +57,10 @@
 
 <x-wrapped></x-wrapped>
 
+<x-shadow-host-root>
+  <x-shadow-host-root-light></x-shadow-host-root-light>
+</x-shadow-host-root>
+
 <script src="polymer-dom.js"></script>
 
 </body>

diff --git a/test/unit/polymer-dom.html b/test/unit/polymer-dom.html
@@ -57,6 +57,10 @@
 
 <x-wrapped></x-wrapped>
 
+<x-shadow-host-root>
+  <x-shadow-host-root-light></x-shadow-host-root-light>
+</x-shadow-host-root>
+
 <script src="polymer-dom.js"></script>
 
 </body>