diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-dropdown/test/iron-dropdown.html')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-dropdown/test/iron-dropdown.html | 597 |
1 files changed, 597 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-dropdown/test/iron-dropdown.html b/catapult/third_party/polymer/components/iron-dropdown/test/iron-dropdown.html new file mode 100644 index 00000000..a01b0001 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-dropdown/test/iron-dropdown.html @@ -0,0 +1,597 @@ +<!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 basic 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.html"> + <link rel="import" href="../../test-fixture/test-fixture.html"> + +</head> +<style> + body { + margin: 0; + padding: 0; + } + + .container { + display: block; + position: relative; + width: 100px; + height: 100px; + background-color: yellow; + } + + .positioned { + position: absolute; + top: 40px; + left: 40px; + } + + .dropdown-content { + width: 50px; + height: 50px; + background-color: orange; + } + + .big { + width: 3000px; + height: 3000px; + } +</style> + +<body> + + <test-fixture id="TrivialDropdown"> + <template> + <iron-dropdown> + <div class="dropdown-content"></div> + </iron-dropdown> + </template> + </test-fixture> + + <test-fixture id="NonLockingDropdown"> + <template> + <iron-dropdown allow-outside-scroll> + <div class="dropdown-content">I don't lock scroll!</div> + </iron-dropdown> + </template> + </test-fixture> + + <test-fixture id="AlignedDropdown"> + <template> + <div class="container"> + <iron-dropdown horizontal-align="right" vertical-align="top"> + <div class="dropdown-content big"></div> + </iron-dropdown> + </div> + </template> + </test-fixture> + + <!-- Absolutely position the dropdown so that it has enough space to move around --> + <test-fixture id="OffsetDropdownTopLeft"> + <template> + <div class="container positioned"> + <iron-dropdown> + <div class="dropdown-content"></div> + </iron-dropdown> + </div> + </template> + </test-fixture> + + <test-fixture id="OffsetDropdownBottomRight"> + <template> + <div class="container positioned"> + <iron-dropdown horizontal-align="right" vertical-align="bottom"> + <div class="dropdown-content"></div> + </iron-dropdown> + </div> + </template> + </test-fixture> + + <test-fixture id="FocusableContentDropdown"> + <template> + <iron-dropdown> + <div class="dropdown-content" tabindex="0"> + <div class="subcontent" tabindex="0"></div> + </div> + </iron-dropdown> + </template> + </test-fixture> + + <test-fixture id="RTLDropdownLeft"> + <template> + <div dir="rtl" class="container"> + <iron-dropdown> + <div class="dropdown-content"></div> + </iron-dropdown> + </div> + </template> + </test-fixture> + + <test-fixture id="RTLDropdownRight"> + <template> + <div dir="rtl" class="container"> + <iron-dropdown horizontal-align="right"> + <div class="dropdown-content"></div> + </iron-dropdown> + </div> + </template> + </test-fixture> + + <test-fixture id="sizingTarget"> + <template> + <iron-dropdown> + <div class="dropdown-content"> + <div class="subcontent"></div> + </div> + </iron-dropdown> + </template> + </test-fixture> + + <test-fixture id="EmptyDropdown"> + <template> + <iron-dropdown></iron-dropdown> + </template> + </test-fixture> + + <script> + function elementIsVisible(element) { + var contentRect = element.getBoundingClientRect(); + var computedStyle = window.getComputedStyle(element); + + return computedStyle.display !== 'none' && + contentRect.width > 0 && + contentRect.height > 0; + } + + function runAfterOpen(overlay, callback) { + overlay.addEventListener('iron-overlay-opened', callback); + 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; + + suite('basic', function() { + setup(function() { + dropdown = fixture('TrivialDropdown'); + content = Polymer.dom(dropdown).querySelector('.dropdown-content'); + }); + + test('effectively hides the dropdown content', function() { + expect(elementIsVisible(content)).to.be.equal(false); + }); + + test('shows dropdown content when opened', function(done) { + runAfterOpen(dropdown, function() { + expect(elementIsVisible(content)).to.be.equal(true); + done(); + }); + }); + + test('hides dropdown content when outside is clicked', function(done) { + runAfterOpen(dropdown, function() { + expect(elementIsVisible(content)).to.be.equal(true); + dropdown.addEventListener('iron-overlay-closed', function() { + expect(elementIsVisible(content)).to.be.equal(false); + done(); + }); + MockInteractions.tap(dropdown.parentNode); + }); + }); + + suite('when content is focusable', function() { + setup(function() { + dropdown = fixture('FocusableContentDropdown'); + content = Polymer.dom(dropdown).querySelector('.dropdown-content'); + }); + test('focuses the content when opened', function(done) { + runAfterOpen(dropdown, function() { + expect(document.activeElement).to.be.equal(content); + done(); + }); + }); + + test('focuses a configured focus target', function(done) { + var focusableChild = Polymer.dom(content).querySelector('div[tabindex]'); + dropdown.focusTarget = focusableChild; + + runAfterOpen(dropdown, function() { + expect(document.activeElement).to.not.be.equal(content); + expect(document.activeElement).to.be.equal(focusableChild); + done(); + }); + }); + }); + + suite('when dropdown is empty', function() { + test('keeps the sizingTarget default value', function() { + dropdown = fixture('EmptyDropdown'); + expect(dropdown.sizingTarget).to.be.equal(dropdown); + }); + }); + + suite('correct animationConfig setup', function() { + test('as objects', function() { + dropdown.openAnimationConfig = { + name: 'open-animation' + }; + dropdown.closeAnimationConfig = { + name: 'close-animation' + }; + + dropdown.opened = true; + + assert.deepEqual(dropdown.openAnimationConfig, { + name: 'open-animation', + node: content + }, 'open animation ok'); + + assert.deepEqual(dropdown.closeAnimationConfig, { + name: 'close-animation', + node: content + }, 'close animation ok'); + + assert.deepEqual(dropdown.animationConfig, { + open: dropdown.openAnimationConfig, + close: dropdown.closeAnimationConfig + }, 'animationConfig ok'); + }); + + test('as arrays', function() { + dropdown.openAnimationConfig = [{ + name: 'open-animation-1' + }, { + name: 'open-animation-2' + }]; + dropdown.closeAnimationConfig = [{ + name: 'close-animation-1' + }, { + name: 'close-animation-2' + }]; + + dropdown.opened = true; + + assert.deepEqual(dropdown.openAnimationConfig, [{ + name: 'open-animation-1', + node: content + }, { + name: 'open-animation-2', + node: content + }], 'open animation ok'); + + assert.deepEqual(dropdown.closeAnimationConfig, [{ + name: 'close-animation-1', + node: content + }, { + name: 'close-animation-2', + node: content + }], 'close animation ok'); + + assert.deepEqual(dropdown.animationConfig, { + open: dropdown.openAnimationConfig, + close: dropdown.closeAnimationConfig + }, 'animationConfig ok'); + }); + }); + + }); + + 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() { + expect(Polymer.IronDropdownScrollManager._lockingElements.length) + .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) { + // This triggers a second `pushScrollLock` with the same element, however + // that should not add the element to the `_lockingElements` stack twice + dropdown.close(); + dropdown.open(); + } else { + done(); + } + 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() { + + setup(function() { + dropdown = fixture('NonLockingDropdown'); + }); + + test('can be disabled with `allowOutsideScroll`', function(done) { + 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(); + }); + }); + }); + + suite('aligned dropdown', function() { + var parent; + var parentRect; + var dropdownRect; + + 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() { + dropdownRect = dropdown.getBoundingClientRect(); + assert.equal(dropdownRect.top, parentRect.top, 'top ok'); + assert.equal(dropdownRect.left, 0, 'left ok'); + assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok'); + assert.equal(dropdownRect.right, parentRect.right, 'right ok'); + done(); + }); + }); + + test('can be re-aligned to the bottom', function(done) { + dropdown.verticalAlign = 'bottom'; + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + assert.equal(dropdownRect.top, 0, 'top ok'); + assert.equal(dropdownRect.left, 0, 'left ok'); + assert.equal(dropdownRect.bottom, parentRect.bottom, 'bottom ok'); + assert.equal(dropdownRect.right, parentRect.right, 'right ok'); + done(); + }); + }); + + test('handles parent\'s stacking context', function(done) { + // This will create a new stacking context. + parent.style.transform = 'translateZ(0)'; + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + assert.equal(dropdownRect.top, parentRect.top, 'top ok'); + assert.equal(dropdownRect.left, 0, 'left ok'); + assert.equal(dropdownRect.bottom, window.innerHeight, 'bottom ok'); + assert.equal(dropdownRect.right, parentRect.right, 'right ok'); + done(); + }); + }); + }); + + suite('when align is left/top, with an offset', function() { + var dropdownRect; + var offsetDropdownRect; + setup(function() { + var parent = fixture('OffsetDropdownTopLeft'); + dropdown = parent.querySelector('iron-dropdown'); + }); + + test('can be offset towards the bottom right', function(done) { + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + dropdown.verticalOffset = 10; + dropdown.horizontalOffset = 10; + // Force refit instead of waiting for requestAnimationFrame. + dropdown.refit(); + offsetDropdownRect = dropdown.getBoundingClientRect(); + // verticalAlign is top, so a positive offset moves down. + assert.equal(dropdownRect.top + 10, offsetDropdownRect.top, 'top ok'); + // horizontalAlign is left, so a positive offset moves to the right. + assert.equal(dropdownRect.left + 10, offsetDropdownRect.left, 'left ok'); + done(); + }); + }); + + test('can be offset towards the top left', function(done) { + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + dropdown.verticalOffset = -10; + dropdown.horizontalOffset = -10; + // Force refit instead of waiting for requestAnimationFrame. + dropdown.refit(); + offsetDropdownRect = dropdown.getBoundingClientRect(); + // verticalAlign is top, so a negative offset moves up. + assert.equal(dropdownRect.top - 10, offsetDropdownRect.top, 'top ok'); + // horizontalAlign is left, so a negative offset moves to the left. + assert.equal(dropdownRect.left - 10, offsetDropdownRect.left, 'left ok'); + done(); + }); + }); + }); + + suite('when align is right/bottom, with an offset', function() { + var dropdownRect; + var offsetDropdownRect; + setup(function() { + var parent = fixture('OffsetDropdownBottomRight'); + dropdown = parent.querySelector('iron-dropdown'); + }); + + test('can be offset towards the top left', function(done) { + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + dropdown.verticalOffset = 10; + dropdown.horizontalOffset = 10; + // Force refit instead of waiting for requestAnimationFrame. + dropdown.refit(); + offsetDropdownRect = dropdown.getBoundingClientRect(); + // verticalAlign is bottom, so a positive offset moves up. + assert.equal(dropdownRect.bottom - 10, offsetDropdownRect.bottom, 'bottom ok'); + // horizontalAlign is right, so a positive offset moves to the left. + assert.equal(dropdownRect.right - 10, offsetDropdownRect.right, 'right ok'); + done(); + }); + }); + + test('can be offset towards the bottom right', function(done) { + runAfterOpen(dropdown, function() { + dropdownRect = dropdown.getBoundingClientRect(); + dropdown.verticalOffset = -10; + dropdown.horizontalOffset = -10; + // Force refit instead of waiting for requestAnimationFrame. + dropdown.refit(); + offsetDropdownRect = dropdown.getBoundingClientRect(); + // verticalAlign is bottom, so a negative offset moves down. + assert.equal(dropdownRect.bottom + 10, offsetDropdownRect.bottom, 'bottom ok'); + // horizontalAlign is right, so a positive offset moves to the right. + assert.equal(dropdownRect.right + 10, offsetDropdownRect.right, 'right ok'); + done(); + }); + }); + }); + + suite('RTL', function() { + var dropdownRect; + + test('with horizontalAlign=left', function(done) { + var parent = fixture('RTLDropdownLeft'); + dropdown = parent.querySelector('iron-dropdown'); + 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. + dropdownRect = dropdown.getBoundingClientRect(); + expect(dropdownRect.top).to.be.equal(0); + expect(dropdownRect.right).to.be.equal(100); + done(); + }); + }); + + test('with horizontalAlign=right', function(done) { + var parent = fixture('RTLDropdownRight'); + dropdown = parent.querySelector('iron-dropdown'); + 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. + dropdownRect = dropdown.getBoundingClientRect(); + expect(dropdownRect.top).to.be.equal(0); + expect(dropdownRect.left).to.be.equal(0); + done(); + }); + }); + }); + + suite('sizing target', function() { + setup(function() { + dropdown = fixture('sizingTarget'); + content = Polymer.dom(dropdown).querySelector('.dropdown-content'); + }); + + test('sizingTarget is the content element by default', function(done) { + runAfterOpen(dropdown, function() { + expect(dropdown.sizingTarget).to.be.equal(content); + expect(content.style.maxHeight).to.be.not.empty; + expect(content.style.maxWidth).to.be.not.empty; + done(); + }); + }); + + test('sizingTarget can be set to a child element', function(done) { + var subcontent = Polymer.dom(dropdown).querySelector('.subcontent'); + dropdown.sizingTarget = subcontent; + + runAfterOpen(dropdown, function() { + expect(dropdown.sizingTarget).to.be.equal(subcontent); + expect(subcontent.style.maxHeight).to.be.not.empty; + expect(subcontent.style.maxWidth).to.be.not.empty; + done(); + }); + }); + }); + }); + </script> +</body> + +</html> |