<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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>