2015-06-19 09:36:51 -07:00
|
|
|
<!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>
|
2016-02-18 11:20:10 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
<title>iron-overlay-behavior tests</title>
|
|
|
|
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
|
|
|
|
|
|
|
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../../web-component-tester/browser.js"></script>
|
2015-12-14 08:43:03 -07:00
|
|
|
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
2015-06-19 09:36:51 -07:00
|
|
|
<link rel="import" href="test-overlay.html">
|
2016-01-29 19:43:11 -07:00
|
|
|
<link rel="import" href="test-overlay2.html">
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<style is="custom-style">
|
|
|
|
|
iron-overlay-backdrop {
|
|
|
|
|
/* For quicker tests */
|
|
|
|
|
--iron-overlay-backdrop: {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
</head>
|
2016-02-18 11:20:10 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<test-fixture id="basic">
|
|
|
|
|
<template>
|
|
|
|
|
<test-overlay>
|
|
|
|
|
Basic Overlay
|
|
|
|
|
</test-overlay>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
|
|
|
|
<test-fixture id="opened">
|
|
|
|
|
<template>
|
|
|
|
|
<test-overlay opened>
|
|
|
|
|
Basic Overlay
|
|
|
|
|
</test-overlay>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
|
|
|
|
<test-fixture id="autofocus">
|
|
|
|
|
<template>
|
|
|
|
|
<test-overlay>
|
|
|
|
|
Autofocus
|
|
|
|
|
<button autofocus>button</button>
|
|
|
|
|
</test-overlay>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-fixture id="backdrop">
|
2015-06-19 09:36:51 -07:00
|
|
|
<template>
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-overlay with-backdrop>
|
|
|
|
|
Overlay with backdrop
|
2015-06-19 09:36:51 -07:00
|
|
|
</test-overlay>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-fixture id="multiple">
|
2015-06-19 09:36:51 -07:00
|
|
|
<template>
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-overlay class="overlay-1">
|
|
|
|
|
Test overlay 1
|
2015-06-19 09:36:51 -07:00
|
|
|
</test-overlay>
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-overlay class="overlay-2">
|
|
|
|
|
Test overlay 2
|
2016-01-29 19:43:11 -07:00
|
|
|
</test-overlay>
|
2016-02-18 11:20:10 -07:00
|
|
|
<test-overlay2 class="overlay-3">
|
|
|
|
|
Other overlay 3
|
2016-01-29 19:43:11 -07:00
|
|
|
</test-overlay2>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
<script>
|
2016-02-18 11:20:10 -07:00
|
|
|
function runAfterOpen(overlay, callback) {
|
2015-06-19 09:36:51 -07:00
|
|
|
overlay.addEventListener('iron-overlay-opened', function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
Polymer.Base.async(callback, 1);
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
overlay.open();
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
function runAfterClose(overlay, callback) {
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', callback);
|
|
|
|
|
overlay.close();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
suite('basic overlay', function() {
|
2015-06-19 09:36:51 -07:00
|
|
|
var overlay;
|
|
|
|
|
|
|
|
|
|
setup(function() {
|
|
|
|
|
overlay = fixture('basic');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('overlay starts hidden', function() {
|
|
|
|
|
assert.isFalse(overlay.opened, 'overlay starts closed');
|
|
|
|
|
assert.equal(getComputedStyle(overlay).display, 'none', 'overlay starts hidden');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('overlay open/close events', function(done) {
|
|
|
|
|
var nevents = 0;
|
|
|
|
|
|
|
|
|
|
overlay.addEventListener('iron-overlay-opened', function() {
|
|
|
|
|
nevents += 1;
|
|
|
|
|
overlay.opened = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', function() {
|
|
|
|
|
nevents += 1;
|
|
|
|
|
assert.equal(nevents, 2, 'opened and closed events fired');
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
overlay.opened = true;
|
|
|
|
|
});
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
test('closed overlay does not refit on iron-resize', function() {
|
|
|
|
|
var spy = sinon.spy(overlay, 'refit');
|
|
|
|
|
overlay.fire('iron-resize');
|
|
|
|
|
assert.isFalse(spy.called, 'overlay should not refit');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('open() triggers iron-resize', function(done) {
|
2016-02-22 10:20:38 -07:00
|
|
|
// Ignore the iron-resize on attached.
|
|
|
|
|
var callCount = -1;
|
2016-01-29 19:43:11 -07:00
|
|
|
// Ignore iron-resize triggered by window resize.
|
|
|
|
|
window.addEventListener('resize', function() { callCount--; }, true);
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay.addEventListener('iron-resize', function() { callCount++; });
|
|
|
|
|
runAfterOpen(overlay, function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
assert.equal(callCount, 1, 'iron-resize called once before iron-overlay-opened');
|
2016-01-29 19:43:11 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-22 10:20:38 -07:00
|
|
|
test('close() triggers iron-resize', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-resize', spy);
|
|
|
|
|
runAfterClose(overlay, function() {
|
|
|
|
|
assert.equal(spy.callCount, 1, 'iron-resize called once before iron-overlay-closed');
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
test('closed overlay does not trigger iron-resize when its content changes', function(done) {
|
|
|
|
|
// Ignore iron-resize triggered by window resize.
|
|
|
|
|
var callCount = 0;
|
|
|
|
|
window.addEventListener('resize', function() { callCount--; }, true);
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay.addEventListener('iron-resize', function() { callCount++; });
|
|
|
|
|
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
|
|
|
|
overlay.async(function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
assert.equal(callCount, 0, 'iron-resize should not be called');
|
|
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('open overlay triggers iron-resize when its content changes', function(done) {
|
2016-02-18 11:20:10 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-resize', spy);
|
2016-02-18 11:20:10 -07:00
|
|
|
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
|
|
|
|
overlay.async(function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
assert.equal(spy.callCount, 1, 'iron-resize should be called once');
|
2016-01-29 19:43:11 -07:00
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
test('close an overlay quickly after open', function(done) {
|
|
|
|
|
// first, open the overlay
|
|
|
|
|
overlay.open();
|
|
|
|
|
overlay.async(function() {
|
|
|
|
|
// during the opening transition, close the overlay
|
|
|
|
|
this.close();
|
|
|
|
|
// wait for any exceptions to be thrown until the transition is done
|
|
|
|
|
this.async(function() {
|
|
|
|
|
done();
|
|
|
|
|
}, 300);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('clicking an overlay does not close it', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', spy);
|
2016-02-18 11:20:10 -07:00
|
|
|
MockInteractions.tap(overlay);
|
|
|
|
|
overlay.async(function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('clicking outside fires iron-overlay-canceled', function(done) {
|
2015-10-01 23:14:04 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
2016-02-18 11:20:10 -07:00
|
|
|
assert.equal(event.detail.target, document.body, 'detail contains original click event');
|
2015-10-01 23:14:04 -07:00
|
|
|
done();
|
|
|
|
|
});
|
2015-12-14 08:43:03 -07:00
|
|
|
MockInteractions.tap(document.body);
|
2015-10-01 23:14:04 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('clicking outside closes the overlay', function(done) {
|
2015-06-19 09:36:51 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', function(event) {
|
|
|
|
|
assert.isTrue(event.detail.canceled, 'overlay is canceled');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2015-12-14 08:43:03 -07:00
|
|
|
MockInteractions.tap(document.body);
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('iron-overlay-canceled event can be prevented', function(done) {
|
2015-10-01 23:14:04 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', spy);
|
2015-12-14 08:43:03 -07:00
|
|
|
MockInteractions.tap(document.body);
|
2016-02-18 11:20:10 -07:00
|
|
|
Polymer.Base.async(function() {
|
|
|
|
|
assert.isTrue(overlay.opened, 'overlay is still open');
|
|
|
|
|
assert.isFalse(spy.called, 'iron-overlay-closed not fired');
|
2015-10-01 23:14:04 -07:00
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
test('cancel an overlay with esc key', function(done) {
|
2015-10-01 23:14:04 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
2016-02-18 11:20:10 -07:00
|
|
|
assert.equal(event.detail.type, 'keydown');
|
2015-10-01 23:14:04 -07:00
|
|
|
done();
|
|
|
|
|
});
|
2016-02-18 11:20:10 -07:00
|
|
|
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
2015-10-01 23:14:04 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('close an overlay with esc key', function(done) {
|
2015-06-19 09:36:51 -07:00
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', function(event) {
|
|
|
|
|
assert.isTrue(event.detail.canceled, 'overlay is canceled');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2016-02-18 11:20:10 -07:00
|
|
|
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('no-cancel-on-outside-click property', function(done) {
|
|
|
|
|
overlay.noCancelOnOutsideClick = true;
|
|
|
|
|
runAfterOpen(overlay, function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', spy);
|
2015-12-14 08:43:03 -07:00
|
|
|
MockInteractions.tap(document.body);
|
2016-02-18 11:20:10 -07:00
|
|
|
Polymer.Base.async(function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('no-cancel-on-esc-key property', function(done) {
|
|
|
|
|
overlay.noCancelOnEscKey = true;
|
|
|
|
|
runAfterOpen(overlay, function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
var spy = sinon.stub();
|
|
|
|
|
overlay.addEventListener('iron-overlay-closed', spy);
|
2016-02-18 11:20:10 -07:00
|
|
|
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
|
|
|
|
Polymer.Base.async(function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
}, 10);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('with-backdrop sets tabindex=-1 and removes it', function() {
|
|
|
|
|
overlay.withBackdrop = true;
|
|
|
|
|
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
|
|
|
|
|
overlay.withBackdrop = false;
|
|
|
|
|
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('with-backdrop does not override tabindex if already set', function() {
|
|
|
|
|
overlay.setAttribute('tabindex', '1');
|
|
|
|
|
overlay.withBackdrop = true;
|
|
|
|
|
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
|
|
|
|
|
overlay.withBackdrop = false;
|
|
|
|
|
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
suite('opened overlay', function() {
|
|
|
|
|
var overlay;
|
2015-06-19 09:36:51 -07:00
|
|
|
|
|
|
|
|
setup(function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay = fixture('opened');
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('overlay open by default', function(done) {
|
|
|
|
|
overlay.addEventListener('iron-overlay-opened', function() {
|
|
|
|
|
assert.isTrue(overlay.opened, 'overlay starts opened');
|
|
|
|
|
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
|
|
|
|
|
done();
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
});
|
2015-12-14 08:43:03 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('overlay positioned & sized properly', function(done) {
|
|
|
|
|
overlay.addEventListener('iron-overlay-opened', function() {
|
|
|
|
|
var s = getComputedStyle(overlay);
|
|
|
|
|
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth) / 2, 'centered horizontally');
|
|
|
|
|
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight) / 2, 'centered vertically');
|
|
|
|
|
done();
|
2015-12-14 08:43:03 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('open overlay refits on iron-resize', function() {
|
|
|
|
|
var spy = sinon.spy(overlay, 'refit');
|
|
|
|
|
overlay.fire('iron-resize');
|
|
|
|
|
assert.isTrue(spy.called, 'overlay should refit');
|
|
|
|
|
});
|
2015-12-14 08:43:03 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite('focus handling', function() {
|
|
|
|
|
var overlay;
|
2015-12-14 08:43:03 -07:00
|
|
|
|
|
|
|
|
setup(function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay = fixture('autofocus');
|
2015-12-14 08:43:03 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('node with autofocus is focused', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2015-12-14 08:43:03 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('no-auto-focus will not focus node with autofocus', function(done) {
|
|
|
|
|
overlay.noAutoFocus = true;
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not focused after opened');
|
2015-12-14 08:43:03 -07:00
|
|
|
done();
|
|
|
|
|
});
|
2016-02-18 11:20:10 -07:00
|
|
|
// In Safari the element with autofocus will immediately receive focus when displayed for the first time http://jsbin.com/woroci/2/
|
|
|
|
|
// Ensure this is not the case for overlay.
|
|
|
|
|
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not immediately focused');
|
2015-12-14 08:43:03 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
|
|
|
|
|
overlay.noCancelOnOutsideClick = true;
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
MockInteractions.tap(document.body);
|
|
|
|
|
Polymer.Base.async(function() {
|
|
|
|
|
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
|
|
|
|
done();
|
|
|
|
|
}, 10);
|
2015-12-14 08:43:03 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('with-backdrop traps the focus within the overlay', function(done) {
|
|
|
|
|
var focusSpy = sinon.stub();
|
|
|
|
|
var button = document.createElement('button');
|
|
|
|
|
document.body.appendChild(button);
|
|
|
|
|
button.addEventListener('focus', focusSpy, true);
|
2015-12-14 08:43:03 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay.withBackdrop = true;
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
// Try to steal the focus
|
|
|
|
|
MockInteractions.focus(button);
|
|
|
|
|
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
|
|
|
|
|
assert.equal(focusSpy.callCount, 0, 'button in body did not get the focus');
|
|
|
|
|
document.body.removeChild(button);
|
2015-12-14 08:43:03 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
suite('overlay with backdrop', function() {
|
|
|
|
|
var overlay;
|
2015-06-19 09:36:51 -07:00
|
|
|
|
|
|
|
|
setup(function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
overlay = fixture('backdrop');
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('backdrop is opened when overlay is opened', function(done) {
|
|
|
|
|
assert.isDefined(overlay.backdropElement, 'backdrop is defined');
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
assert.isTrue(overlay.backdropElement.opened, 'backdrop is opened');
|
|
|
|
|
assert.isDefined(overlay.backdropElement.parentNode, 'backdrop is inserted in the DOM');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('backdrop appears behind the overlay', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
styleZ = parseInt(window.getComputedStyle(overlay).zIndex, 10);
|
|
|
|
|
backdropStyleZ = parseInt(window.getComputedStyle(overlay.backdropElement).zIndex, 10);
|
|
|
|
|
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('backdrop is removed when overlay is closed', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
runAfterClose(overlay, function() {
|
|
|
|
|
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
|
|
|
|
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
|
|
|
|
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('backdrop is removed when the element is removed from DOM', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
Polymer.dom(overlay).parentNode.removeChild(overlay);
|
|
|
|
|
// Wait enough so detached is executed.
|
|
|
|
|
Polymer.Base.async(function() {
|
|
|
|
|
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
|
|
|
|
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
|
|
|
|
done();
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
2016-02-05 23:33:34 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('manager.getBackdrops() immediately updated on opened changes', function() {
|
|
|
|
|
overlay.opened = true;
|
|
|
|
|
assert.equal(overlay._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
|
|
|
|
overlay.opened = false;
|
|
|
|
|
assert.equal(overlay._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
2016-02-05 23:33:34 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('updating with-backdrop to false closes backdrop', function(done) {
|
|
|
|
|
runAfterOpen(overlay, function() {
|
|
|
|
|
overlay.withBackdrop = false;
|
|
|
|
|
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
|
|
|
|
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2016-02-05 23:33:34 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('backdrop is removed when toggling overlay opened', function(done) {
|
|
|
|
|
overlay.open();
|
|
|
|
|
assert.isObject(overlay.backdropElement.parentNode, 'backdrop is immediately inserted in the document');
|
|
|
|
|
runAfterClose(overlay, function() {
|
|
|
|
|
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
|
|
|
|
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
|
2016-02-05 23:33:34 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
2016-02-18 11:20:10 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
suite('multiple overlays', function() {
|
|
|
|
|
var overlay1, overlay2;
|
2015-06-19 09:36:51 -07:00
|
|
|
|
|
|
|
|
setup(function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
var f = fixture('multiple');
|
|
|
|
|
overlay1 = f[0];
|
|
|
|
|
overlay2 = f[1];
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('new overlays appear on top', function(done) {
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
runAfterOpen(overlay2, function() {
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
var styleZ1 = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
|
|
|
|
assert.isTrue(styleZ1 > styleZ, 'overlay2 has higher z-index than overlay1');
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('ESC closes only the top overlay', function(done) {
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
runAfterOpen(overlay2, function() {
|
|
|
|
|
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
|
|
|
|
assert.isFalse(overlay2.opened, 'overlay2 was closed');
|
|
|
|
|
assert.isTrue(overlay1.opened, 'overlay1 is still opened');
|
2015-06-19 09:36:51 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('close an overlay in proximity to another overlay', function(done) {
|
|
|
|
|
// Open and close a separate overlay.
|
|
|
|
|
overlay1.open();
|
|
|
|
|
overlay1.close();
|
2016-02-05 23:33:34 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
// Open the overlay we care about.
|
|
|
|
|
overlay2.open();
|
2016-01-29 19:43:11 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
// Immediately close the first overlay.
|
|
|
|
|
// Wait for infinite recursion, otherwise we win.
|
|
|
|
|
runAfterClose(overlay2, function() {
|
|
|
|
|
done();
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite('z-ordering', function() {
|
|
|
|
|
|
|
|
|
|
var originalMinimumZ;
|
|
|
|
|
var overlay1, overlay2;
|
|
|
|
|
|
|
|
|
|
setup(function() {
|
|
|
|
|
var f = fixture('multiple');
|
|
|
|
|
overlay1 = f[0];
|
|
|
|
|
overlay2 = f[1];
|
|
|
|
|
originalMinimumZ = Polymer.IronOverlayManager._minimumZ;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
teardown(function() {
|
|
|
|
|
Polymer.IronOverlayManager._minimumZ = originalMinimumZ;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// for iframes
|
|
|
|
|
test('default z-index is greater than 100', function(done) {
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
assert.isTrue(styleZ > 100, 'overlay1 z-index is <= 100');
|
2016-01-29 19:43:11 -07:00
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('ensureMinimumZ() effects z-index', function(done) {
|
|
|
|
|
Polymer.IronOverlayManager.ensureMinimumZ(1000);
|
|
|
|
|
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
|
2016-02-05 23:33:34 -07:00
|
|
|
done();
|
2016-02-18 11:20:10 -07:00
|
|
|
});
|
2016-02-05 23:33:34 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('ensureMinimumZ() never decreases the minimum z-index', function(done) {
|
|
|
|
|
Polymer.IronOverlayManager.ensureMinimumZ(1000);
|
|
|
|
|
Polymer.IronOverlayManager.ensureMinimumZ(500);
|
|
|
|
|
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
|
|
|
|
|
done();
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
suite('multiple overlays with backdrop', function() {
|
|
|
|
|
var overlay1, overlay2, overlay3;
|
2016-01-29 19:43:11 -07:00
|
|
|
|
|
|
|
|
setup(function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
var f = fixture('multiple');
|
|
|
|
|
overlay1 = f[0];
|
|
|
|
|
overlay2 = f[1];
|
|
|
|
|
overlay3 = f[2];
|
|
|
|
|
overlay1.withBackdrop = overlay2.withBackdrop = overlay3.withBackdrop = true;
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('multiple overlays share the same backdrop', function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
assert.isTrue(overlay1.backdropElement === overlay2.backdropElement, 'overlay1 and overlay2 have the same backdrop element');
|
|
|
|
|
assert.isTrue(overlay1.backdropElement === overlay3.backdropElement, 'overlay1 and overlay3 have the same backdrop element');
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('only one iron-overlay-backdrop in the DOM', function() {
|
|
|
|
|
// Open them all.
|
|
|
|
|
overlay1.opened = overlay2.opened = overlay3.opened = true;
|
|
|
|
|
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1, 'only one backdrop element in the DOM');
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('iron-overlay-backdrop is removed from the DOM when all overlays with backdrop are closed', function(done) {
|
|
|
|
|
// Open & close them all.
|
|
|
|
|
overlay1.opened = overlay2.opened = overlay3.opened = true;
|
|
|
|
|
overlay1.opened = overlay2.opened = overlay3.opened = false;
|
|
|
|
|
Polymer.Base.async(function() {
|
|
|
|
|
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'backdrop element removed from the DOM');
|
|
|
|
|
done();
|
|
|
|
|
}, 1);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('newest overlay appear on top', function(done) {
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
runAfterOpen(overlay2, function() {
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
|
|
|
|
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
|
|
|
|
|
assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
|
|
|
|
|
assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
|
|
|
|
|
done();
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
2016-02-18 11:20:10 -07:00
|
|
|
});
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
test('updating with-backdrop updates z-index', function(done) {
|
|
|
|
|
runAfterOpen(overlay1, function() {
|
|
|
|
|
runAfterOpen(overlay2, function() {
|
|
|
|
|
overlay1.withBackdrop = false;
|
|
|
|
|
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
|
|
|
|
|
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
|
|
|
|
|
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
|
|
|
|
|
assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
|
|
|
|
|
assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
|
|
|
|
|
done();
|
|
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
});
|
2016-01-29 19:43:11 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
suite('a11y', function() {
|
|
|
|
|
|
|
|
|
|
test('overlay has aria-hidden=true when opened', function() {
|
|
|
|
|
var overlay = fixture('basic');
|
|
|
|
|
assert.equal(overlay.getAttribute('aria-hidden'), 'true', 'overlay has aria-hidden="true"');
|
|
|
|
|
overlay.open();
|
|
|
|
|
assert.isFalse(overlay.hasAttribute('aria-hidden'), 'overlay does not have aria-hidden attribute');
|
|
|
|
|
overlay.close();
|
|
|
|
|
assert.equal(overlay.getAttribute('aria-hidden'), 'true', 'overlay has aria-hidden="true"');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
2016-02-18 11:20:10 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
</html>
|
