From 4a00d0b8d4fa00920885450f444051600db63845 Mon Sep 17 00:00:00 2001
From: Valdrin Koshi <valdrin@google.com>
Date: Tue, 19 Jul 2016 16:18:13 -0700
Subject: [PATCH] keep overflow, prevent events that cause scrolling (#93)

* keep overflow, calculate scroll size

* check either horizontal or vertical scroll delta, not both

* restore scroll position when scroll happens

* scroll listener on dropdown, call refit if allowScrollOutside

* normalize wheel delta

* prevent scrolling keys

* store EVENT_PATH on touchstart

* use touches to find the deltaX/Y

* restore elementIsScrollLocked, make _shouldPreventScrolling private

* ensure touchstart is prevented only if happens outside the locking element

* ensure touchstart is not prevented

* store last touch position instead of the event

* return an object scrollDeltaInfo since event.deltaX is readonly

* store only scrollable nodes

* avoid preventing events that are not cancelable, e.g. scroll that cannot be interrupted

* fix bug on touch events, update docs

* check only one axis according to where there is more scroll
---
 iron-dropdown-scroll-manager.html      | 219 ++++++++++++++++++++-----
 iron-dropdown.html                     |  69 +++++++-
 test/iron-dropdown-scroll-manager.html |  56 ++++---
 test/iron-dropdown.html                | 104 +++++++++---
 test/x-scrollable-element.html         |  30 +++-
 5 files changed, 392 insertions(+), 86 deletions(-)

diff --git a/iron-dropdown-scroll-manager.html b/iron-dropdown-scroll-manager.html
index 5e9176e..8b48d1d 100644
--- a/iron-dropdown-scroll-manager.html
+++ b/iron-dropdown-scroll-manager.html
@@ -14,6 +14,14 @@
 <script>
   (function() {
     'use strict';
+    // Used to calculate the scroll direction during touch events.
+    var LAST_TOUCH_POSITION = {
+      pageX: 0,
+      pageY: 0
+    };
+    // Used to avoid computing event.path and filter scrollable nodes (better perf).
+    var ROOT_TARGET = null;
+    var SCROLLABLE_NODES = [];
 
     /**
      * The IronDropdownScrollManager is intended to provide a central source
@@ -31,9 +39,8 @@
         return this._lockingElements[this._lockingElements.length - 1];
       },
 
-
       /**
-       * Returns true if the provided element is "scroll locked," which is to
+       * 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
@@ -126,8 +133,6 @@
 
       _unlockedElementCache: null,
 
-      _originalBodyStyles: {},
-
       _isScrollingKeypress: function(event) {
         return Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(
           event, 'pageup pagedown home end up left down right');
@@ -175,58 +180,186 @@
       },
 
       _scrollInteractionHandler: function(event) {
-        var scrolledElement =
-            /** @type {HTMLElement} */(Polymer.dom(event).rootTarget);
-        if (Polymer
-              .IronDropdownScrollManager
-              .elementIsScrollLocked(scrolledElement)) {
-          if (event.type === 'keydown' &&
-              !Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
-            return;
-          }
-
+        // Avoid canceling an event with cancelable=false, e.g. scrolling is in
+        // progress and cannot be interrupted.
+        if (event.cancelable && this._shouldPreventScrolling(event)) {
           event.preventDefault();
         }
+        // If event has targetTouches (touch event), update last touch position.
+        if (event.targetTouches) {
+          var touch = event.targetTouches[0];
+          LAST_TOUCH_POSITION.pageX = touch.pageX;
+          LAST_TOUCH_POSITION.pageY = touch.pageY;
+        }
       },
 
       _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';
-
+        this._boundScrollHandler = this._boundScrollHandler ||
+          this._scrollInteractionHandler.bind(this);
         // Modern `wheel` event for mouse wheel scrolling:
-        document.addEventListener('wheel', this._scrollInteractionHandler, true);
+        document.addEventListener('wheel', this._boundScrollHandler, true);
         // Older, non-standard `mousewheel` event for some FF:
-        document.addEventListener('mousewheel', this._scrollInteractionHandler, true);
+        document.addEventListener('mousewheel', this._boundScrollHandler, true);
         // IE:
-        document.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
+        document.addEventListener('DOMMouseScroll', this._boundScrollHandler, true);
+        // Save the SCROLLABLE_NODES on touchstart, to be used on touchmove.
+        document.addEventListener('touchstart', this._boundScrollHandler, true);
         // Mobile devices can scroll on touch move:
-        document.addEventListener('touchmove', this._scrollInteractionHandler, true);
+        document.addEventListener('touchmove', this._boundScrollHandler, true);
         // Capture keydown to prevent scrolling keys (pageup, pagedown etc.)
-        document.addEventListener('keydown', this._scrollInteractionHandler, true);
+        document.addEventListener('keydown', this._boundScrollHandler, true);
       },
 
       _unlockScrollInteractions: function() {
-        document.body.style.overflow = this._originalBodyStyles.overflow;
-        document.body.style.overflowX = this._originalBodyStyles.overflowX;
-        document.body.style.overflowY = this._originalBodyStyles.overflowY;
-
-        document.removeEventListener('wheel', this._scrollInteractionHandler, true);
-        document.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
-        document.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
-        document.removeEventListener('touchmove', this._scrollInteractionHandler, true);
-        document.removeEventListener('keydown', this._scrollInteractionHandler, true);
+        document.removeEventListener('wheel', this._boundScrollHandler, true);
+        document.removeEventListener('mousewheel', this._boundScrollHandler, true);
+        document.removeEventListener('DOMMouseScroll', this._boundScrollHandler, true);
+        document.removeEventListener('touchstart', this._boundScrollHandler, true);
+        document.removeEventListener('touchmove', this._boundScrollHandler, true);
+        document.removeEventListener('keydown', this._boundScrollHandler, true);
+      },
+
+      /**
+       * Returns true if the event causes scroll outside the current locking
+       * element, e.g. pointer/keyboard interactions, or scroll "leaking"
+       * outside the locking element when it is already at its scroll boundaries.
+       * @param {!Event} event
+       * @return {boolean}
+       * @private
+       */
+      _shouldPreventScrolling: function(event) {
+        // Avoid expensive checks if the event is not one of the observed keys.
+        if (event.type === 'keydown') {
+          // Prevent event if it is one of the scrolling keys.
+          return this._isScrollingKeypress(event);
+        }
+
+        // Update if root target changed. For touch events, ensure we don't
+        // update during touchmove.
+        var target = Polymer.dom(event).rootTarget;
+        if (event.type !== 'touchmove' && ROOT_TARGET !== target) {
+          ROOT_TARGET = target;
+          SCROLLABLE_NODES = this._getScrollableNodes(Polymer.dom(event).path);
+        }
+
+        // Prevent event if no scrollable nodes.
+        if (!SCROLLABLE_NODES.length) {
+          return true;
+        }
+        // Don't prevent touchstart event inside the locking element when it has
+        // scrollable nodes.
+        if (event.type === 'touchstart') {
+          return false;
+        }
+        // Get deltaX/Y.
+        var info = this._getScrollInfo(event);
+        // Prevent if there is no child that can scroll.
+        return !this._getScrollingNode(SCROLLABLE_NODES, info.deltaX, info.deltaY);
+      },
+
+      /**
+       * Returns an array of scrollable nodes up to the current locking element,
+       * which is included too if scrollable.
+       * @param {!Array<Node>} nodes
+       * @return {Array<Node>} scrollables
+       * @private
+       */
+      _getScrollableNodes: function(nodes) {
+        var scrollables = [];
+        var lockingIndex = nodes.indexOf(this.currentLockingElement);
+        // Loop from root target to locking element (included).
+        for (var i = 0; i <= lockingIndex; i++) {
+          var node = nodes[i];
+          // Skip document fragments.
+          if (node.nodeType === 11) {
+            continue;
+          }
+          // Check inline style before checking computed style.
+          var style = node.style;
+          if (style.overflow !== 'scroll' && style.overflow !== 'auto') {
+            style = window.getComputedStyle(node);
+          }
+          if (style.overflow === 'scroll' || style.overflow === 'auto') {
+            scrollables.push(node);
+          }
+        }
+        return scrollables;
+      },
+
+      /**
+       * Returns the node that is scrolling. If there is no scrolling,
+       * returns undefined.
+       * @param {!Array<Node>} nodes
+       * @param {number} deltaX Scroll delta on the x-axis
+       * @param {number} deltaY Scroll delta on the y-axis
+       * @return {Node|undefined}
+       * @private
+       */
+      _getScrollingNode: function(nodes, deltaX, deltaY) {
+        // No scroll.
+        if (!deltaX && !deltaY) {
+          return;
+        }
+        // Check only one axis according to where there is more scroll.
+        // Prefer vertical to horizontal.
+        var verticalScroll = Math.abs(deltaY) >= Math.abs(deltaX);
+        for (var i = 0; i < nodes.length; i++) {
+          var node = nodes[i];
+          var canScroll = false;
+          if (verticalScroll) {
+            // delta < 0 is scroll up, delta > 0 is scroll down.
+            canScroll = deltaY < 0 ? node.scrollTop > 0 :
+              node.scrollTop < node.scrollHeight - node.clientHeight;
+          } else {
+            // delta < 0 is scroll left, delta > 0 is scroll right.
+            canScroll = deltaX < 0 ? node.scrollLeft > 0 :
+              node.scrollLeft < node.scrollWidth - node.clientWidth;
+          }
+          if (canScroll) {
+            return node;
+          }
+        }
+      },
+
+      /**
+       * Returns scroll `deltaX` and `deltaY`.
+       * @param {!Event} event The scroll event
+       * @return {{
+       *  deltaX: number The x-axis scroll delta (positive: scroll right,
+       *                 negative: scroll left, 0: no scroll),
+       *  deltaY: number The y-axis scroll delta (positive: scroll down,
+       *                 negative: scroll up, 0: no scroll)
+       * }} info
+       * @private
+       */
+      _getScrollInfo: function(event) {
+        var info = {
+          deltaX: event.deltaX,
+          deltaY: event.deltaY
+        };
+        // Already available.
+        if ('deltaX' in event) {
+          // do nothing, values are already good.
+        }
+        // Safari has scroll info in `wheelDeltaX/Y`.
+        else if ('wheelDeltaX' in event) {
+          info.deltaX = -event.wheelDeltaX;
+          info.deltaY = -event.wheelDeltaY;
+        }
+        // Firefox has scroll info in `detail` and `axis`.
+        else if ('axis' in event) {
+          info.deltaX = event.axis === 1 ? event.detail : 0;
+          info.deltaY = event.axis === 2 ? event.detail : 0;
+        }
+        // On mobile devices, calculate scroll direction.
+        else if (event.targetTouches) {
+          var touch = event.targetTouches[0];
+          // Touch moves from right to left => scrolling goes right.
+          info.deltaX = LAST_TOUCH_POSITION.pageX - touch.pageX;
+          // Touch moves from down to up => scrolling goes down.
+          info.deltaY = LAST_TOUCH_POSITION.pageY - touch.pageY;
+        }
+        return info;
       }
     };
   })();
diff --git a/iron-dropdown.html b/iron-dropdown.html
index b54c2f8..d262e48 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -143,6 +143,18 @@
           allowOutsideScroll: {
             type: Boolean,
             value: false
+          },
+
+          /**
+           * Callback for scroll events.
+           * @type {Function}
+           * @private
+           */
+          _boundOnCaptureScroll: {
+            type: Function,
+            value: function() {
+              return this._onCaptureScroll.bind(this);
+            }
           }
         },
 
@@ -169,6 +181,14 @@
           return this.focusTarget || this.containedElement;
         },
 
+        ready: function() {
+          // Memoized scrolling position, used to block scrolling outside.
+          this._scrollTop = 0;
+          this._scrollLeft = 0;
+          // Used to perform a non-blocking refit on scroll.
+          this._refitOnScrollRAF = null;
+        },
+
         detached: function() {
           this.cancelAnimation();
           Polymer.IronDropdownScrollManager.removeScrollLock(this);
@@ -185,9 +205,12 @@
             this.cancelAnimation();
             this.sizingTarget = this.containedElement || this.sizingTarget;
             this._updateAnimationConfig();
-            if (this.opened && !this.allowOutsideScroll) {
-              Polymer.IronDropdownScrollManager.pushScrollLock(this);
+            this._saveScrollPosition();
+            if (this.opened) {
+              document.addEventListener('scroll', this._boundOnCaptureScroll);
+              !this.allowOutsideScroll && Polymer.IronDropdownScrollManager.pushScrollLock(this);
             } else {
+              document.removeEventListener('scroll', this._boundOnCaptureScroll);
               Polymer.IronDropdownScrollManager.removeScrollLock(this);
             }
             Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
@@ -210,6 +233,7 @@
          * Overridden from `IronOverlayBehavior`.
          */
         _renderClosed: function() {
+
           if (!this.noAnimations && this.animationConfig.close) {
             this.$.contentWrapper.classList.add('animating');
             this.playAnimation('close');
@@ -233,6 +257,47 @@
           }
         },
 
+        _onCaptureScroll: function() {
+          if (!this.allowOutsideScroll) {
+            this._restoreScrollPosition();
+          } else {
+            this._refitOnScrollRAF && window.cancelAnimationFrame(this._refitOnScrollRAF);
+            this._refitOnScrollRAF = window.requestAnimationFrame(this.refit.bind(this));
+          }
+        },
+
+        /**
+         * Memoizes the scroll position of the outside scrolling element.
+         * @private
+         */
+        _saveScrollPosition: function() {
+          if (document.scrollingElement) {
+            this._scrollTop = document.scrollingElement.scrollTop;
+            this._scrollLeft = document.scrollingElement.scrollLeft;
+          } else {
+            // Since we don't know if is the body or html, get max.
+            this._scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+            this._scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
+          }
+        },
+
+        /**
+         * Resets the scroll position of the outside scrolling element.
+         * @private
+         */
+        _restoreScrollPosition: function() {
+          if (document.scrollingElement) {
+            document.scrollingElement.scrollTop = this._scrollTop;
+            document.scrollingElement.scrollLeft = this._scrollLeft;
+          } else {
+            // Since we don't know if is the body or html, set both.
+            document.documentElement.scrollTop = this._scrollTop;
+            document.documentElement.scrollLeft = this._scrollLeft;
+            document.body.scrollTop = this._scrollTop;
+            document.body.scrollLeft = this._scrollLeft;
+          }
+        },
+
         /**
          * Constructs the final animation config from different properties used
          * to configure specific parts of the opening and closing animations.
diff --git a/test/iron-dropdown-scroll-manager.html b/test/iron-dropdown-scroll-manager.html
index 885a5f9..4d7a2e8 100644
--- a/test/iron-dropdown-scroll-manager.html
+++ b/test/iron-dropdown-scroll-manager.html
@@ -9,6 +9,7 @@
 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>
@@ -23,6 +24,7 @@
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="x-scrollable-element.html">
 </head>
+
 <body>
 
   <test-fixture id="DOMSubtree">
@@ -31,12 +33,13 @@
     </template>
   </test-fixture>
   <script>
+
     suite('IronDropdownScrollManager', function() {
       var parent;
       var childOne;
       var childTwo;
-      var grandchildOne;
-      var grandchildTwo;
+      var grandChildOne;
+      var grandChildTwo;
       var ancestor;
 
       setup(function() {
@@ -94,23 +97,6 @@
             .to.be.equal(false);
         });
 
-        test('does not check locked elements when there are no locking elements', function() {
-          sinon.spy(Polymer.IronDropdownScrollManager, 'elementIsScrollLocked');
-          childOne.dispatchEvent(new CustomEvent('wheel', {
-            bubbles: true,
-            cancelable: true
-          }));
-          expect(Polymer.IronDropdownScrollManager
-              .elementIsScrollLocked.callCount).to.be.eql(1);
-          Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
-          childOne.dispatchEvent(new CustomEvent('wheel', {
-            bubbles: true,
-            cancelable: true
-          }));
-          expect(Polymer.IronDropdownScrollManager
-              .elementIsScrollLocked.callCount).to.be.eql(1);
-        });
-
         suite('various scroll events', function() {
           var scrollEvents;
           var events;
@@ -124,10 +110,13 @@
             ];
 
             events = scrollEvents.map(function(scrollEvent) {
-              return new CustomEvent(scrollEvent, {
+              var event = new CustomEvent(scrollEvent, {
                 bubbles: true,
                 cancelable: true
               });
+              event.deltaX = 0;
+              event.deltaY = 10;
+              return event;
             });
           });
 
@@ -138,15 +127,42 @@
             });
           });
 
+          test('allows wheel events when there are no locking elements', function() {
+            Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
+            events.forEach(function(event) {
+              childTwo.dispatchEvent(event);
+              expect(event.defaultPrevented).to.be.eql(false);
+            });
+          });
+
           test('allows wheel events from unlocked elements', function() {
             events.forEach(function(event) {
               childOne.dispatchEvent(event);
               expect(event.defaultPrevented).to.be.eql(false);
             });
           });
+
+          test('touchstart is prevented if dispatched by an element outside the locking element', function() {
+            var event = new CustomEvent('touchstart', {
+              bubbles: true,
+              cancelable: true
+            });
+            childTwo.dispatchEvent(event);
+            expect(event.defaultPrevented).to.be.eql(true);
+          });
+
+          test('touchstart is not prevented if dispatched by an element inside the locking element', function() {
+            var event = new CustomEvent('touchstart', {
+              bubbles: true,
+              cancelable: true
+            });
+            grandChildOne.dispatchEvent(event);
+            expect(event.defaultPrevented).to.be.eql(false);
+          });
         });
       });
     });
   </script>
 </body>
+
 </html>
diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index dffc458..0dcfecd 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -9,6 +9,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
   <title>iron-dropdown basic tests</title>
@@ -54,6 +55,7 @@
     height: 3000px;
   }
 </style>
+
 <body>
 
   <test-fixture id="TrivialDropdown">
@@ -133,6 +135,7 @@
     </template>
   </test-fixture>
 
+
   <script>
     function elementIsVisible(element) {
       var contentRect = element.getBoundingClientRect();
@@ -148,6 +151,24 @@
       overlay.open();
     }
 
+    function fireWheel(node, deltaX, deltaY) {
+      // IE 11 doesn't support WheelEvent, use CustomEvent.
+      var event = new CustomEvent('wheel', {
+        cancelable: true,
+        bubbles: true
+      });
+      event.deltaX = deltaX;
+      event.deltaY = deltaY;
+      node.dispatchEvent(event);
+      return event;
+    }
+
+    function dispatchScroll(target, scrollLeft, scrollTop) {
+      target.scrollLeft = scrollLeft;
+      target.scrollTop = scrollTop;
+      target.dispatchEvent(new CustomEvent('scroll', { bubbles:true } ));
+    }
+
     suite('<iron-dropdown>', function() {
       var dropdown;
       var content;
@@ -163,14 +184,14 @@
         });
 
         test('shows dropdown content when opened', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             expect(elementIsVisible(content)).to.be.equal(true);
             done();
           });
         });
 
         test('hides dropdown content when outside is clicked', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             expect(elementIsVisible(content)).to.be.equal(true);
             dropdown.addEventListener('iron-overlay-closed', function() {
               expect(elementIsVisible(content)).to.be.equal(false);
@@ -186,7 +207,7 @@
             content = Polymer.dom(dropdown).querySelector('.dropdown-content');
           });
           test('focuses the content when opened', function(done) {
-            runAfterOpen(dropdown, function () {
+            runAfterOpen(dropdown, function() {
               expect(document.activeElement).to.be.equal(content);
               done();
             });
@@ -196,7 +217,7 @@
             var focusableChild = Polymer.dom(content).querySelector('div[tabindex]');
             dropdown.focusTarget = focusableChild;
 
-            runAfterOpen(dropdown, function () {
+            runAfterOpen(dropdown, function() {
               expect(document.activeElement).to.not.be.equal(content);
               expect(document.activeElement).to.be.equal(focusableChild);
               done();
@@ -207,10 +228,34 @@
 
       suite('locking scroll', function() {
 
+        var bigDiv, scrollTarget;
+        suiteSetup(function() {
+          bigDiv = document.createElement('div');
+          bigDiv.classList.add('big');
+          document.body.appendChild(bigDiv);
+          // Need to discover if html or body is scrollable.
+          // Here we are sure the page is scrollable.
+          document.documentElement.scrollTop = 1;
+          if (document.documentElement.scrollTop === 1) {
+            document.documentElement.scrollTop = 0;
+            scrollTarget = document.documentElement;
+          } else {
+            scrollTarget = document.body;
+          }
+        });
+
+        suiteTeardown(function() {
+          document.body.removeChild(bigDiv);
+        });
+
         setup(function() {
           dropdown = fixture('TrivialDropdown');
         });
 
+        teardown(function() {
+          dispatchScroll(scrollTarget, 0, 0);
+        });
+
         test('should lock, only once', function(done) {
           var openCount = 0;
           runAfterOpen(dropdown, function() {
@@ -218,8 +263,9 @@
               .to.be.equal(1);
             expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
               .to.be.equal(true);
+            expect(fireWheel(document.body, 0, 10).defaultPrevented).to.be.equal(true);
 
-            if(openCount === 0) {
+            if (openCount === 0) {
               // This triggers a second `pushScrollLock` with the same element, however
               // that should not add the element to the `_lockingElements` stack twice
               dropdown.close();
@@ -230,6 +276,26 @@
             openCount++;
           });
         });
+
+        test('should lock scroll', function(done) {
+          runAfterOpen(dropdown, function() {
+            dispatchScroll(scrollTarget, 10, 10);
+            assert.equal(scrollTarget.scrollTop, 0, 'scrollTop ok');
+            assert.equal(scrollTarget.scrollLeft, 0, 'scrollLeft ok');
+            done();
+          });
+        });
+
+        test('can be disabled with `allowOutsideScroll`', function(done) {
+          dropdown.allowOutsideScroll = true;
+          runAfterOpen(dropdown, function() {
+            dispatchScroll(scrollTarget, 10, 10);
+            assert.equal(scrollTarget.scrollTop, 10, 'scrollTop ok');
+            assert.equal(scrollTarget.scrollLeft, 10, 'scrollLeft ok');
+            done();
+          });
+        });
+
       });
 
       suite('non locking scroll', function() {
@@ -242,6 +308,7 @@
           runAfterOpen(dropdown, function() {
             expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
               .to.be.equal(false);
+            expect(fireWheel(document.body, 0, 10).defaultPrevented).to.be.equal(false);
             done();
           });
         });
@@ -255,15 +322,15 @@
         setup(function() {
           parent = fixture('AlignedDropdown');
           dropdown = parent.querySelector('iron-dropdown');
+          parentRect = parent.getBoundingClientRect();
         });
 
         test('can be re-aligned to the right and the top', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
-            parentRect = parent.getBoundingClientRect();
             assert.equal(dropdownRect.top, parentRect.top, 'top ok');
             assert.equal(dropdownRect.left, 0, 'left ok');
-            assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
+            assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok');
             assert.equal(dropdownRect.right, parentRect.right, 'right ok');
             done();
           });
@@ -271,8 +338,7 @@
 
         test('can be re-aligned to the bottom', function(done) {
           dropdown.verticalAlign = 'bottom';
-          runAfterOpen(dropdown, function () {
-            parentRect = parent.getBoundingClientRect();
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
             assert.equal(dropdownRect.top, 0, 'top ok');
             assert.equal(dropdownRect.left, 0, 'left ok');
@@ -285,12 +351,11 @@
         test('handles parent\'s stacking context', function(done) {
           // This will create a new stacking context.
           parent.style.transform = 'translateZ(0)';
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
-            parentRect = parent.getBoundingClientRect();
             assert.equal(dropdownRect.top, parentRect.top, 'top ok');
             assert.equal(dropdownRect.left, 0, 'left ok');
-            assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
+            assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok');
             assert.equal(dropdownRect.right, parentRect.right, 'right ok');
             done();
           });
@@ -306,7 +371,7 @@
         });
 
         test('can be offset towards the bottom right', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
             dropdown.verticalOffset = 10;
             dropdown.horizontalOffset = 10;
@@ -322,7 +387,7 @@
         });
 
         test('can be offset towards the top left', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
             dropdown.verticalOffset = -10;
             dropdown.horizontalOffset = -10;
@@ -347,7 +412,7 @@
         });
 
         test('can be offset towards the top left', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
             dropdown.verticalOffset = 10;
             dropdown.horizontalOffset = 10;
@@ -363,7 +428,7 @@
         });
 
         test('can be offset towards the bottom right', function(done) {
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             dropdownRect = dropdown.getBoundingClientRect();
             dropdown.verticalOffset = -10;
             dropdown.horizontalOffset = -10;
@@ -385,7 +450,7 @@
         test('with horizontalAlign=left', function(done) {
           var parent = fixture('RTLDropdownLeft');
           dropdown = parent.querySelector('iron-dropdown');
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             // In RTL, if `horizontalAlign` is "left", that's the same as
             // being right-aligned in LTR. So the dropdown should be in the top
             // right corner.
@@ -399,7 +464,7 @@
         test('with horizontalAlign=right', function(done) {
           var parent = fixture('RTLDropdownRight');
           dropdown = parent.querySelector('iron-dropdown');
-          runAfterOpen(dropdown, function () {
+          runAfterOpen(dropdown, function() {
             // In RTL, if `horizontalAlign` is "right", that's the same as
             // being left-aligned in LTR. So the dropdown should be in the top
             // left corner.
@@ -413,4 +478,5 @@
     });
   </script>
 </body>
+
 </html>
diff --git a/test/x-scrollable-element.html b/test/x-scrollable-element.html
index a3012e2..3bdb3cf 100644
--- a/test/x-scrollable-element.html
+++ b/test/x-scrollable-element.html
@@ -12,11 +12,37 @@
 
 <dom-module id="x-scrollable-element">
   <template>
+    <style>
+      :host {
+        display: block;
+        height: 100px;
+        border: 1px solid red;
+        overflow: auto;
+      }
+      #ChildOne, #ChildTwo {
+        height: 200px;
+        border: 1px solid blue;
+        overflow: auto;
+      }
+      #GrandchildOne, #GrandchildTwo {
+        height: 300px;
+        border: 1px solid green;
+        overflow: auto;
+      }
+      .scrollContent {
+        height: 400px;
+        background-color: yellow;
+      }
+    </style>
     <div id="ChildOne">
-      <div id="GrandchildOne"></div>
+      <div id="GrandchildOne">
+        <div class="scrollContent"></div>
+      </div>
     </div>
     <div id="ChildTwo">
-      <div id="GrandchildTwo"></div>
+      <div id="GrandchildTwo">
+        <div class="scrollContent"></div>
+      </div>
     </div>
   </template>
   <script>