| <!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"> |
| <link rel="import" href="x-scrollable-element.html"> |
| </head> |
| |
| <body> |
| |
| <test-fixture id="DOMSubtree"> |
| <template> |
| <x-scrollable-element id="Parent"></x-scrollable-element> |
| </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.$$('#ChildOne'); |
| childTwo = parent.$$('#ChildTwo'); |
| grandChildOne = parent.$$('#GrandchildOne'); |
| grandChildTwo = parent.$$('#GrandchildTwo'); |
| ancestor = document.body; |
| }); |
| |
| suite('constraining 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); |
| }); |
| |
| suite('various scroll events', function() { |
| var scrollEvents; |
| var events; |
| |
| setup(function() { |
| scrollEvents = [ |
| 'wheel', |
| 'mousewheel', |
| 'DOMMouseScroll', |
| 'touchmove' |
| ]; |
| |
| events = scrollEvents.map(function(scrollEvent) { |
| var event = new CustomEvent(scrollEvent, { |
| bubbles: true, |
| cancelable: true |
| }); |
| event.deltaX = 0; |
| event.deltaY = 10; |
| return event; |
| }); |
| }); |
| |
| test('prevents wheel events from locked elements', function() { |
| events.forEach(function(event) { |
| childTwo.dispatchEvent(event); |
| expect(event.defaultPrevented).to.be.eql(true); |
| }); |
| }); |
| |
| 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); |
| }); |
| |
| test('arrow keyboard events not prevented by manager', function() { |
| // Even if these events might cause scrolling, they should not be |
| // prevented because they might cause a11y issues (e.g. arrow keys |
| // used for navigating the content). iron-dropdown is capable of |
| // restoring the scroll position of the document if necessary. |
| var left = MockInteractions.keyboardEventFor('keydown', 37); |
| var up = MockInteractions.keyboardEventFor('keydown', 38); |
| var right = MockInteractions.keyboardEventFor('keydown', 39); |
| var down = MockInteractions.keyboardEventFor('keydown', 40); |
| grandChildOne.dispatchEvent(left); |
| grandChildOne.dispatchEvent(up); |
| grandChildOne.dispatchEvent(right); |
| grandChildOne.dispatchEvent(down); |
| expect(left.defaultPrevented).to.be.eql(false); |
| expect(up.defaultPrevented).to.be.eql(false); |
| expect(right.defaultPrevented).to.be.eql(false); |
| expect(down.defaultPrevented).to.be.eql(false); |
| }); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| |
| </html> |