diff --git a/README.md b/README.md
index a71ed57..2a36589 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
 iron-dropdown
 =============
 
+An element that implements a simple drop-down menu widget with a trigger and content.
diff --git a/bower.json b/bower.json
index b69ac3a..c1ddc61 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-dropdown",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "",
   "authors": [
     "The Polymer Authors"
@@ -19,18 +19,20 @@
   "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/iron-dropdown",
   "dependencies": {
-    "polymer": "polymer/polymer#^0.9.0",
-    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^0.9.0"
+    "polymer": "polymer/polymer#^1.0.0",
+    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
+    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
+    "neon-animation": "polymerelements/neon-animation#^1.0.0",
+    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-image": "polymerelements/iron-image#^1.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^0.9.0",
-    "test-fixture": "polymerelements/test-fixture#^0.9.0",
-    "iron-icon": "polymerelements/iron-icon#^0.9.0",
-    "iron-icons": "polymerelements/iron-icons#^0.9.0",
-    "iron-test-helpers": "polymerelements/iron-test-helpers#^0.9.0",
-    "paper-styles": "polymerelements/paper-styles#^0.9.0",
+    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "web-component-tester": "*",
-    "paper-menu": "polymerelements/paper-menu#^0.9.0"
+    "iron-image": "polymerelements/iron-image#^1.0.0"
   }
 }
diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html
new file mode 100644
index 0000000..e2fdc44
--- /dev/null
+++ b/demo/grow-height-animation.html
@@ -0,0 +1,36 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../neon-animation/neon-animation-behavior.html">
+
+<script>
+  Polymer({
+    is: 'expand-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      var height = node.getBoundingClientRect().height;
+
+      this._effect = new KeyframeEffect(node, [{
+        height: (height / 2) + 'px'
+      }, {
+        height: height + 'px'
+      }], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+  });
+</script>
diff --git a/demo/index.html b/demo/index.html
index 4f00e68..2725057 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <!--
+@license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
@@ -13,16 +14,150 @@
   <title>iron-dropdown</title>
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-dropdown.html">
-  <link rel="import" href="../../paper-menu/paper-menu.html">
+  <link rel="import" href="../../iron-image/iron-image.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="x-select.html">
+  <style>
+
+    ul {
+      display: block;
+      position: relative;
+      background-color: #fff;
+      box-shadow: 0px 2px 6px #ccc;
+      margin: 0.25em 0;
+      padding: 0.25em;
+      border-radius: 3px;
+    }
+
+    [vertical-align="top"] ul {
+      margin-top: 0;
+    }
+
+    [vertical-align="bottom"] ul {
+      margin-bottom: 0;
+    }
+
+    li {
+      display: block;
+      position: relative;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      display: block;
+      position: relative;
+      padding: 1em;
+      text-decoration: none;
+    }
+
+    li:not(:last-of-type) {
+      border-bottom: 1px solid #eee;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    button {
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 1em;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+
+    button:focus {
+      outline: none;
+      border-color: blue;
+    }
+
+    iron-image {
+      padding: 1em;
+      background-color: #fff;
+      box-shadow: 0px 2px 6px #ccc;
+      border-radius: 3px;
+    }
+  </style>
 </head>
 <body>
-  <iron-dropdown>
-    <button dropdown-trigger>Tap</button>
-    <paper-menu tabindex="0" dropdown-content>
-      <a href="javascript:console.log('lorem')">Lorem</a>
-      <a href="javascript:console.log('ipsum')">Ipsum</a>
-    </paper-menu>
-  </iron-dropdown>
+  <template is="dom-bind" id="Demo">
+    <div class="horizontal-section flex layout horizontal">
+      <x-select>
+        <button class="dropdown-trigger">Basic</button>
+        <ul class="dropdown-content">
+          <template is="dom-repeat" items="[[letters]]">
+            <li><a href="javascript:void(0)">[[item]]</a></li>
+          </template>
+        </ul>
+      </x-select>
+      <x-select>
+        <button class="dropdown-trigger">Overflowing</button>
+        <ul class="dropdown-content" tabindex="0">
+          <template is="dom-repeat" items="[[dinosaurs]]">
+            <li><a href="javascript:void(0)">[[item]]</a></li>
+          </template>
+        </ul>
+      </x-select>
+      <x-select vertical-align="bottom">
+        <button class="dropdown-trigger">Bottom-left Aligned</button>
+        <ul class="dropdown-content">
+          <template is="dom-repeat" items="[[letters]]">
+            <li><a href="javascript:void(0)">[[item]]</a></li>
+          </template>
+        </ul>
+      </x-select>
+      <x-select horizontal-align="right" vertical-align="top">
+        <button class="dropdown-trigger">Top-right Aligned</button>
+        <ul class="dropdown-content">
+          <template is="dom-repeat" items="[[dinosaurs]]">
+            <li><a href="javascript:void(0)">[[item]]</a></li>
+          </template>
+        </ul>
+      </x-select>
+      <x-select horizontal-align="left" vertical-align="top">
+        <button class="dropdown-trigger">Alternate Content</button>
+        <iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
+      </x-select>
+    </div>
+  </template>
+
+  <script>
+    Demo.letters = [
+      'alpha',
+      'beta',
+      'gamma',
+      'delta',
+      'epsilon'
+    ];
+    Demo.dinosaurs = [
+      'allosaurus',
+      'brontosaurus',
+      'carcharodontosaurus',
+      'diplodocus',
+      'ekrixinatosaurus',
+      'fukuiraptor',
+      'gallimimus',
+      'hadrosaurus',
+      'iguanodon',
+      'jainosaurus',
+      'kritosaurus',
+      'liaoceratops',
+      'megalosaurus',
+      'nemegtosaurus',
+      'ornithomimus',
+      'protoceratops',
+      'quetecsaurus',
+      'rajasaurus',
+      'stegosaurus',
+      'triceratops',
+      'utahraptor',
+      'vulcanodon',
+      'wannanosaurus',
+      'xenoceratops',
+      'yandusaurus',
+      'zephyrosaurus'
+    ];
+  </script>
 </body>
 </html>
diff --git a/demo/x-select.html b/demo/x-select.html
new file mode 100644
index 0000000..2216c65
--- /dev/null
+++ b/demo/x-select.html
@@ -0,0 +1,80 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../iron-dropdown.html">
+<link rel="import" href="../../neon-animation/neon-animations.html">
+<link rel="import" href="grow-height-animation.html">
+
+<dom-module id="x-select">
+  <style>
+    :host {
+      display: inline-block;
+      margin: 1em;
+    }
+  </style>
+  <template>
+    <div on-tap="open">
+      <content select=".dropdown-trigger"></content>
+    </div>
+    <iron-dropdown id="dropdown"
+      vertical-align="[[verticalAlign]]"
+      horizontal-align="[[horizontalAlign]]"
+      disabled="[[disabled]]"
+      open-animation-config="[[openAnimationConfig]]"
+      close-animation-config="[[closeAnimationConfig]]">
+      <content select=".dropdown-content"></content>
+    </iron-dropdown>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-select',
+
+      properties: {
+        verticalAlign: String,
+        horizontalAlign: String,
+        disabled: Boolean,
+        openAnimationConfig: {
+          type: Array,
+          value: function() {
+            return [{
+              name: 'fade-in-animation',
+              timing: {
+                delay: 150,
+                duration: 50
+              }
+            }, {
+              name: 'expand-animation',
+              timing: {
+                delay: 150,
+                duration: 200
+              }
+            }];
+          }
+        },
+
+        closeAnimationConfig: {
+          type: Array,
+          value: function() {
+            return [{
+              name: 'fade-out-animation',
+              timing: {
+                duration: 200
+              }
+            }];
+          }
+        }
+      },
+
+      open: function() {
+        this.$.dropdown.open();
+      }
+    });
+  </script>
+</dom-module>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1d3d6ca
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+<head>
+
+  <title>iron-dropdown</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/iron-dropdown-overlay.html b/iron-dropdown-overlay.html
deleted file mode 100644
index dd25ddf..0000000
--- a/iron-dropdown-overlay.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
-
-<dom-module id="iron-dropdown-overlay">
-  <template>
-    <content></content>
-  </template>
-  <script>
-    (function() {
-      'use strict';
-
-      Polymer({
-        is: 'iron-dropdown-overlay',
-
-        behaviors: [
-          Polymer.IronOverlayBehavior
-        ]
-      });
-    })();
-  </script>
-</dom-module>
diff --git a/iron-dropdown-scroll-manager.html b/iron-dropdown-scroll-manager.html
new file mode 100644
index 0000000..2dea219
--- /dev/null
+++ b/iron-dropdown-scroll-manager.html
@@ -0,0 +1,153 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+
+<script>
+  (function() {
+    'use strict';
+
+    /**
+     * The IronDropdownScrollManager is intended to provide a central source
+     * of authority and control over which elements in a document are currently
+     * allowed to scroll.
+     */
+
+    Polymer.IronDropdownScrollManager = {
+
+      /**
+       * The current element that defines the DOM boundaries of the
+       * scroll lock. This is always the most recently locking element.
+       */
+      get currentLockingElement() {
+        return this._lockingElements[this._lockingElements.length - 1];
+      },
+
+      /**
+       * Returns true if the provided element is "scroll locked," which is to
+       * say that it cannot be scrolled via pointer or keyboard interactions.
+       *
+       * @param {HTMLElement} element An HTML element instance which may or may
+       * not be scroll locked.
+       */
+      elementIsScrollLocked: function(element) {
+        var currentLockingElement = this.currentLockingElement;
+
+        return !!currentLockingElement &&
+          currentLockingElement !== element &&
+          !currentLockingElement.contains(element);
+      },
+
+      /**
+       * Push an element onto the current scroll lock stack. The most recently
+       * pushed element and its children will be considered scrollable. All
+       * other elements will not be scrollable.
+       *
+       * Scroll locking is implemented as a stack so that cases such as
+       * dropdowns within dropdowns are handled well.
+       *
+       * @param {HTMLElement} element The element that should lock scroll.
+       */
+      pushScrollLock: function(element) {
+        if (this._lockingElements.length === 0) {
+          this._lockScrollInteractions();
+        }
+
+        this._lockingElements.push(element);
+      },
+
+      /**
+       * Remove an element from the scroll lock stack. The element being
+       * removed does not need to be the most recently pushed element. However,
+       * the scroll lock constraints only change when the most recently pushed
+       * element is removed.
+       *
+       * @param {HTMLElement} element The element to remove from the scroll
+       * lock stack.
+       */
+      removeScrollLock: function(element) {
+        var index = this._lockingElements.indexOf(element);
+
+        if (index === -1) {
+          return;
+        }
+
+        this._lockingElements.splice(index, 1);
+
+        if (this._lockingElements.length === 0) {
+          this._unlockScrollInteractions();
+        }
+      },
+
+      _lockingElements: [],
+
+      _originalBodyStyles: {},
+
+      _isScrollingKeypress: function(event) {
+        return Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(
+          event, 'pageup pagedown home end up left down right');
+      },
+
+      _scrollInteractionHandler: function(event) {
+        if (Polymer
+              .IronDropdownScrollManager
+              .elementIsScrollLocked(event.target)) {
+          if (event.type === 'keydown' &&
+              !Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
+            return;
+          }
+
+          event.preventDefault();
+        }
+      },
+
+      _lockScrollInteractions: function() {
+        // Memoize body inline styles:
+        this._originalBodyStyles.overflow = document.body.style.overflow;
+        this._originalBodyStyles.overflowX = document.body.style.overflowX;
+        this._originalBodyStyles.overflowY = document.body.style.overflowY;
+
+        // Disable overflow scrolling on body:
+        // TODO(cdata): It is technically not sufficient to hide overflow on
+        // body alone. A better solution might be to traverse all ancestors of
+        // the current scroll locking element and hide overflow on them. This
+        // becomes expensive, though, as it would have to be redone every time
+        // a new scroll locking element is added.
+        document.body.style.overflow = 'hidden';
+        document.body.style.overflowX = 'hidden';
+        document.body.style.overflowY = 'hidden';
+
+        // Modern `wheel` event for mouse wheel scrolling:
+        window.addEventListener('wheel', this._scrollInteractionHandler, true);
+        // Older, non-standard `mousewheel` event for some FF:
+        window.addEventListener('mousewheel', this._scrollInteractionHandler, true);
+        // IE:
+        window.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
+        // Mobile devices can scroll on touch move:
+        window.addEventListener('touchmove', this._scrollInteractionHandler, true);
+        // Capture keydown to prevent scrolling keys (pageup, pagedown etc.)
+        document.addEventListener('keydown', this._scrollInteractionHandler, true);
+      },
+
+      _unlockScrollInteractions: function() {
+        document.body.style.overflow = this._originalBodyStyles.overflow;
+        document.body.style.overflowX = this._originalBodyStyles.overflowX;
+        document.body.style.overflowY = this._originalBodyStyles.overflowY;
+
+        window.removeEventListener('wheel', this._scrollInteractionHandler, true);
+        window.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
+        window.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
+        window.removeEventListener('touchmove', this._scrollInteractionHandler, true);
+        document.removeEventListener('keydown', this._scrollInteractionHandler, true);
+      }
+    };
+  })();
+</script>
diff --git a/iron-dropdown.html b/iron-dropdown.html
index b215295..048bc0c 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -9,16 +9,58 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="iron-dropdown-overlay.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-behaviors/iron-control-state.html">
+<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../neon-animation/animations/opaque-animation.html">
+<link rel="import" href="iron-dropdown-scroll-manager.html">
+
+<!--
+`<iron-dropdown>` is a generalized element that is useful when you have
+hidden content (`.dropdown-content`) that is revealed due to some change in
+state that should cause it to do so.
+
+Note that this is a low-level element intended to be used as part of other
+composite elements that cause dropdowns to be revealed.
+
+Examples of elements that might be implemented using an `iron-dropdown`
+include comboboxes, menubuttons, selects. The list goes on.
+
+The `<iron-dropdown>` element exposes attributes that allow the position
+of the `.dropdown-content` relative to the `.dropdown-trigger` to be
+configured.
+
+    <iron-dropdown horizontal-align="right" vertical-align="top">
+      <div class="dropdown-content">Hello!</div>
+    </iron-dropdown>
+
+In the above example, the `<div>` with class `.dropdown-content` will be
+hidden until the dropdown element has `opened` set to true, or when the `open`
+method is called on the element.
+
+@demo demo/index.html
+-->
 
 <dom-module id="iron-dropdown">
+  <style>
+    :host {
+      position: fixed;
+    }
+
+    #contentWrapper ::content > * {
+      overflow: auto;
+    }
+
+    #contentWrapper.animating ::content > * {
+      overflow: hidden;
+    }
+  </style>
   <template>
-    <div on-tap="_onTriggerTap" class="content dropdown-trigger">
-      <content select="[dropdown-trigger]"></content>
+    <div id="contentWrapper">
+      <content id="content" select=".dropdown-content"></content>
     </div>
-    <iron-dropdown-overlay id="overlay">
-      <content select="[dropdown-content]"></content>
-    </iron-dropdown-overlay>
   </template>
 
   <script>
@@ -28,20 +70,273 @@
       Polymer({
         is: 'iron-dropdown',
 
+        behaviors: [
+          Polymer.IronControlState,
+          Polymer.IronA11yKeysBehavior,
+          Polymer.IronOverlayBehavior,
+          Polymer.NeonAnimationRunnerBehavior
+        ],
+
         properties: {
+          /**
+           * The orientation against which to align the dropdown content
+           * horizontally relative to the dropdown trigger.
+           */
+          horizontalAlign: {
+            type: String,
+            value: 'left',
+            reflectToAttribute: true
+          },
 
           /**
-           * True if the menu is open.
+           * The orientation against which to align the dropdown content
+           * vertically relative to the dropdown trigger.
            */
-          opened: {
-            type: Boolean,
-            value: false,
+          verticalAlign: {
+            type: String,
+            value: 'top',
             reflectToAttribute: true
+          },
+
+          /**
+           * The element that should be used to position the dropdown when
+           * it is opened.
+           */
+          positionTarget: {
+            type: Object,
+            observer: '_positionTargetChanged'
+          },
+
+          /**
+           * An animation config. If provided, this will be used to animate the
+           * opening of the dropdown.
+           */
+          openAnimationConfig: {
+            type: Object
+          },
+
+          /**
+           * An animation config. If provided, this will be used to animate the
+           * closing of the dropdown.
+           */
+          closeAnimationConfig: {
+            type: Object
+          },
+
+          /**
+           * Set to true to disable animations when opening and closing the
+           * dropdown.
+           */
+          noAnimations: {
+            type: Boolean,
+            value: false
+          },
+
+          /**
+           * We memoize the positionTarget bounding rectangle so that we can
+           * limit the number of times it is queried per resize / relayout.
+           */
+          _positionRectMemo: {
+            type: Object
+          }
+        },
+
+        listeners: {
+          'neon-animation-finish': '_onNeonAnimationFinish'
+        },
+
+        observers: [
+          '_updateOverlayPosition(verticalAlign, horizontalAlign)'
+        ],
+
+        attached: function() {
+          if (this.positionTarget === undefined) {
+            this.positionTarget = this._defaultPositionTarget;
+          }
+        },
+
+        /**
+         * The element that is contained by the dropdown, if any.
+         */
+        get containedElement() {
+          return Polymer.dom(this.$.content).getDistributedNodes()[0];
+        },
+
+        get _defaultPositionTarget() {
+          var parent = Polymer.dom(this).parentNode;
+
+          if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            parent = parent.host;
+          }
+
+          return parent;
+        },
+
+        get _positionRect() {
+          if (!this._positionRectMemo && this.positionTarget) {
+            this._positionRectMemo = this.positionTarget.getBoundingClientRect();
+          }
+
+          return this._positionRectMemo;
+        },
+
+        get _horizontalAlignTargetValue() {
+          var target;
+
+          if (this.horizontalAlign === 'right') {
+            target = document.documentElement.clientWidth - this._positionRect.right;
+          } else {
+            target = this._positionRect.left;
+          }
+
+          return Math.max(target, 0);
+        },
+
+        get _verticalAlignTargetValue() {
+          var target;
+
+          if (this.verticalAlign === 'bottom') {
+            target = document.documentElement.clientHeight - this._positionRect.bottom;
+          } else {
+            target = this._positionRect.top;
+          }
+
+          return Math.max(target, 0);
+        },
+
+        _openedChanged: function(opened) {
+          if (opened && this.disabled) {
+            this.cancel();
+          } else {
+            this._cancelAnimations();
+            this._prepareDropdown();
+            Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
+          }
+        },
+
+        _renderOpened: function() {
+          Polymer.IronDropdownScrollManager.pushScrollLock(this);
+          if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
+            this.$.contentWrapper.classList.add('animating');
+            this.playAnimation('open');
+          } else {
+            this._focusContent();
+            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
+          }
+        },
+
+        _renderClosed: function() {
+          Polymer.IronDropdownScrollManager.removeScrollLock(this);
+          if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
+            this.$.contentWrapper.classList.add('animating');
+            this.playAnimation('close');
+          } else {
+            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
+          }
+        },
+
+        _onNeonAnimationFinish: function() {
+          this.$.contentWrapper.classList.remove('animating');
+          if (this.opened) {
+            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this);
+          } else if (!this.cancelled) {
+            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this);
+          }
+        },
+
+        _onIronResize: function() {
+          var containedElement = this.containedElement;
+          var scrollTop;
+          var scrollLeft;
+
+          if (containedElement) {
+            scrollTop = containedElement.scrollTop;
+            scrollLeft = containedElement.scrollLeft;
+          }
+
+          if (this.opened) {
+            this._updateOverlayPosition();
+          }
+
+          Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
+
+          if (containedElement) {
+            containedElement.scrollTop = scrollTop;
+            containedElement.scrollLeft = scrollLeft;
+          }
+        },
+
+        _positionTargetChanged: function() {
+          this._updateOverlayPosition();
+        },
+
+        _cancelAnimations: function() {
+          this.cancelAnimation('open');
+          this.cancelAnimation('close');
+        },
+
+        _updateAnimationConfig: function() {
+          var animationConfig = {};
+          var animations = [];
+
+          if (this.openAnimationConfig) {
+            // NOTE(cdata): When making `display:none` elements visible in Safari,
+            // the element will paint once in a fully visible state, causing the
+            // dropdown to flash before it fades in. We prepend an
+            // `opaque-animation` to fix this problem:
+            animationConfig.open = [{
+              name: 'opaque-animation',
+            }].concat(this.openAnimationConfig);
+            animations = animations.concat(animationConfig.open);
+          }
+
+          if (this.closeAnimationConfig) {
+            animationConfig.close = this.closeAnimationConfig;
+            animations = animations.concat(animationConfig.close);
+          }
+
+          animations.forEach(function(animation) {
+            animation.node = this.containedElement;
+          }, this);
+
+          this.animationConfig = animationConfig;
+        },
+
+        _prepareDropdown: function() {
+          this.sizingTarget = this.containedElement || this.sizingTarget;
+          this._updateAnimationConfig();
+          this._updateOverlayPosition();
+        },
+
+        _updateOverlayPosition: function() {
+          this._positionRectMemo = null;
+
+          if (!this.positionTarget) {
+            return;
+          }
+
+          this.style[this.horizontalAlign] =
+            this._horizontalAlignTargetValue + 'px';
+
+          this.style[this.verticalAlign] =
+            this._verticalAlignTargetValue + 'px';
+
+          // NOTE(cdata): We re-memoize inline styles here, otherwise
+          // calling `refit` from `IronFitBehavior` will reset inline styles
+          // to whatever they were when the dropdown first opened.
+          if (this._fitInfo) {
+            this._fitInfo.inlineStyle[this.horizontalAlign] =
+              this.style[this.horizontalAlign];
+
+            this._fitInfo.inlineStyle[this.verticalAlign] =
+              this.style[this.verticalAlign];
           }
         },
 
-        _onTriggerTap: function() {
-          this.$.overlay.open();
+        _focusContent: function() {
+          if (this.containedElement) {
+            this.containedElement.focus();
+          }
         }
       });
     })();
diff --git a/test/index.html b/test/index.html
index 2d4ee7c..4c92af8 100644
--- a/test/index.html
+++ b/test/index.html
@@ -18,7 +18,8 @@
 <body>
   <script>
     WCT.loadSuites([
-      'paper-button.html'
+      'iron-dropdown.html',
+      'iron-dropdown-scroll-manager.html'
     ]);
   </script>
 </body>
diff --git a/test/iron-dropdown-scroll-manager.html b/test/iron-dropdown-scroll-manager.html
new file mode 100644
index 0000000..33cdcea
--- /dev/null
+++ b/test/iron-dropdown-scroll-manager.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>iron-dropdown-scroll-manager tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <link rel="import" href="../iron-dropdown-scroll-manager.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+
+  <test-fixture id="DOMSubtree">
+    <template>
+      <div id="Parent">
+        <div id="ChildOne">
+          <div id="GrandchildOne"></div>
+        </div>
+        <div id="ChildTwo">
+          <div id="GrandchildTwo"></div>
+        </div>
+      </div>
+    </template>
+  </test-fixture>
+  <script>
+    suite('IronDropdownScrollManager', function() {
+      var parent;
+      var childOne;
+      var childTwo;
+      var grandchildOne;
+      var grandchildTwo;
+      var ancestor;
+
+      setup(function() {
+        parent = fixture('DOMSubtree');
+        childOne = parent.querySelector('#ChildOne');
+        childTwo = parent.querySelector('#ChildTwo');
+        grandChildOne = parent.querySelector('#GrandchildOne');
+        grandChildTwo = parent.querySelector('#GrandchildTwo');
+        ancestor = document.body;
+      });
+
+      suite('contraining scroll in the DOM', function() {
+        setup(function() {
+          Polymer.IronDropdownScrollManager.pushScrollLock(childOne);
+        });
+
+        teardown(function() {
+          Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
+        });
+
+        test('recognizes sibling as locked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childTwo))
+            .to.be.equal(true);
+        });
+
+        test('recognizes neice as locked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildTwo))
+            .to.be.equal(true);
+        });
+
+        test('recognizes parent as locked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
+            .to.be.equal(true);
+        });
+
+        test('recognizes ancestor as locked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(ancestor))
+            .to.be.equal(true);
+        });
+
+        test('recognizes locking child as unlocked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childOne))
+            .to.be.equal(false);
+        });
+
+        test('recognizes descendant of locking child as unlocked', function() {
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildOne))
+            .to.be.equal(false);
+        });
+
+        test('unlocks locked elements when there are no locking elements', function() {
+          Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
+
+          expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
+            .to.be.equal(false);
+        });
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index 827eb94..9cd4f51 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -27,11 +27,99 @@
 
   <test-fixture id="TrivialDropdown">
     <template>
+      <iron-dropdown>
+        <div class="dropdown-content">Hello!</div>
+      </iron-dropdown>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="AlignedDropdown">
+    <template>
+      <div style="display: block; position: relative; width: 100px; height: 100px;">
+        <iron-dropdown horizontal-align="right" vertical-align="top">
+          <div class="dropdown-content">Hello!</div>
+        </iron-dropdown>
+      </div>
     </template>
   </test-fixture>
 
   <script>
     suite('<iron-dropdown>', function() {
+      var dropdown;
+      suite('basic', function() {
+        setup(function() {
+          dropdown = fixture('TrivialDropdown');
+        });
+
+        test('effectively hides the dropdown content', function() {
+          var content = dropdown.querySelector('.dropdown-content');
+          var contentRect = content.getBoundingClientRect();
+
+          expect(contentRect.width).to.be.equal(0);
+          expect(contentRect.height).to.be.equal(0);
+        });
+
+        test('shows dropdown content when opened', function(done) {
+          var content = dropdown.querySelector('.dropdown-content');
+          var contentRect;
+
+          dropdown.open();
+
+          Polymer.Base.async(function() {
+            contentRect = content.getBoundingClientRect();
+
+            expect(contentRect.width).to.be.greaterThan(0);
+            expect(contentRect.height).to.be.greaterThan(0);
+            done();
+          });
+        });
+      });
+
+      suite('aligned dropdown', function() {
+        var parent;
+        setup(function() {
+          parent = fixture('AlignedDropdown');
+          dropdown = parent.querySelector('iron-dropdown');
+        });
+
+        test('can be re-aligned to the right and the top', function(done) {
+          var parentRect;
+          var dropdownRect;
+
+          dropdown.opened = true;
+
+          Polymer.Base.async(function() {
+            dropdownRect = dropdown.getBoundingClientRect();
+            parentRect = parent.getBoundingClientRect();
+
+            // NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
+            // so we assert with `closeTo` and a tight threshold:
+            expect(dropdownRect.top).to.be.closeTo(parentRect.top, 0.1);
+            expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
+            done();
+          }, 1);
+        });
+
+        test('can be re-aligned to the bottom', function(done) {
+          var parentRect;
+          var dropdownRect;
+
+          dropdown.verticalAlign = 'bottom';
+          dropdown.opened = true;
+
+          Polymer.Base.async(function() {
+            parentRect = parent.getBoundingClientRect();
+            dropdownRect = dropdown.getBoundingClientRect();
+
+            // NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
+            // so we assert with `closeTo` and a tight threshold:
+            expect(dropdownRect.bottom).to.be.closeTo(parentRect.bottom, 0.1);
+            expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
+            done();
+          }, 1);
+        });
+
+      });
     });
   </script>
 </body>
