update components

Conflicts:
	MediaBrowser.WebDashboard/dashboard-ui/bower_components/emby-webcomponents/.bower.json
This commit is contained in:
Luke Pulverenti 2016-01-29 21:43:11 -05:00
parent d3f40bd6d9
commit 0c696294ae
42 changed files with 1514 additions and 361 deletions

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.1.2",
"version": "1.2.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -29,16 +29,16 @@
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
"_release": "1.1.2",
"_release": "1.2.0",
"_resolution": {
"type": "version",
"tag": "v1.1.2",
"commit": "40e39a971474f48f5c2c8ee7b8568a0ad5426bd8"
"tag": "v1.2.0",
"commit": "1d8e1d29c601add9c135e5103c4d1d0d652dd957"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: H8AA9JkWfG/vc3MiimoIoYi45KD10hKzitLJnExkomgzFI/f5o9SGtwjCii5P8Kvf4xndftDjYwRgbYyJpSg0IJeq8rm1WS89cY8O6/1dlI/tK1j5xbVRrhqmRQncxUb3K4MAT6Z9br1jwEeamRa+NKmq+v+VEpQY5vwuQ/BHJw=
- secure: EaE1AUVgWyn0Y6kqkb54z5r39RvTJzAOmeM0lRl7wXzr5k0mq3VGlxTksJqCVd1PdJESXEhy8eldBnlkwZir/imDTNQxKm13k7ZiFC0000XAzpLZElkH2cLlYCRWcuM+vS7dA9hytV0UcGK2VGqbxfpcesB20dPSneDEUuc5X64=
node_js: 4
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.1.2",
"version": "1.2.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -29,7 +29,7 @@
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": []

View file

@ -85,13 +85,18 @@ Custom property | Description | Default
},
listeners: {
'transitionend' : '_onTransitionend'
},
/**
* Appends the backdrop to document body and sets its `z-index` to be below the latest overlay.
*/
prepare: function() {
// Always update z-index
this.style.zIndex = this._manager.backdropZ();
if (!this.parentNode) {
Polymer.dom(document.body).appendChild(this);
this.style.zIndex = this._manager.currentOverlayZ() - 1;
}
},
@ -109,9 +114,14 @@ Custom property | Description | Default
* Hides the backdrop if needed.
*/
close: function() {
// only need to make the backdrop invisible if this is called by the last overlay with a backdrop
if (this._manager.getBackdrops().length < 2) {
// Always update z-index
this.style.zIndex = this._manager.backdropZ();
// close only if no element with backdrop is left
if (this._manager.getBackdrops().length === 0) {
this._setOpened(false);
// complete() will be called after the transition is done.
// If animations are disabled via custom-styles, user is expected to call
// complete() after close()
}
},
@ -123,6 +133,12 @@ Custom property | Description | Default
if (this._manager.getBackdrops().length === 0 && this.parentNode) {
Polymer.dom(this.parentNode).removeChild(this);
}
},
_onTransitionend: function (event) {
if (event && event.target === this) {
this.complete();
}
}
});

View file

@ -80,8 +80,8 @@ context. You should place this element as a child of `<body>` whenever possible.
* Set to true to display a backdrop behind the overlay.
*/
withBackdrop: {
type: Boolean,
value: false
observer: '_withBackdropChanged',
type: Boolean
},
/**
@ -148,17 +148,13 @@ context. You should place this element as a child of `<body>` whenever possible.
* @type Node
*/
get backdropElement() {
return this._backdrop;
return this._manager.backdropElement;
},
get _focusNode() {
return Polymer.dom(this).querySelector('[autofocus]') || this;
},
registered: function() {
this._backdrop = document.createElement('iron-overlay-backdrop');
},
ready: function() {
this._ensureSetup();
},
@ -172,7 +168,7 @@ context. You should place this element as a child of `<body>` whenever possible.
detached: function() {
this.opened = false;
this._completeBackdrop();
this._manager.trackBackdrop(this);
this._manager.removeOverlay(this);
},
@ -180,6 +176,7 @@ context. You should place this element as a child of `<body>` whenever possible.
* Toggle the opened state of the overlay.
*/
toggle: function() {
this._setCanceled(false);
this.opened = !this.opened;
},
@ -187,16 +184,16 @@ context. You should place this element as a child of `<body>` whenever possible.
* Open the overlay.
*/
open: function() {
this._setCanceled(false);
this.opened = true;
this.closingReason = {canceled: false};
},
/**
* Close the overlay.
*/
close: function() {
this.opened = false;
this._setCanceled(false);
this.opened = false;
},
/**
@ -208,8 +205,8 @@ context. You should place this element as a child of `<body>` whenever possible.
return;
}
this.opened = false;
this._setCanceled(true);
this.opened = false;
},
_ensureSetup: function() {
@ -226,6 +223,7 @@ context. You should place this element as a child of `<body>` whenever possible.
this.removeAttribute('aria-hidden');
} else {
this.setAttribute('aria-hidden', 'true');
Polymer.dom(this).unobserveNodes(this._observer);
}
// wait to call after ready only if we're initially open
@ -233,30 +231,32 @@ context. You should place this element as a child of `<body>` whenever possible.
this._callOpenedWhenReady = this.opened;
return;
}
if (this._openChangedAsync) {
this.cancelAsync(this._openChangedAsync);
}
this._toggleListeners();
this._manager.trackBackdrop(this);
if (this.opened) {
this._prepareRenderOpened();
}
// async here to allow overlay layer to become visible.
if (this._openChangedAsync) {
this.cancelAsync(this._openChangedAsync);
}
// Async here to allow overlay layer to become visible, and to avoid
// listeners to immediately close via a click.
this._openChangedAsync = this.async(function() {
// overlay becomes visible here
this.style.display = '';
// force layout to ensure transitions will go
/** @suppress {suspiciousCode} */ this.offsetWidth;
// Force layout to ensure transition will go. Set offsetWidth to itself
// so that compilers won't remove it.
this.offsetWidth = this.offsetWidth;
if (this.opened) {
this._renderOpened();
} else {
this._renderClosed();
}
this._toggleListeners();
this._openChangedAsync = null;
});
}, 1);
},
_canceledChanged: function() {
@ -264,6 +264,21 @@ context. You should place this element as a child of `<body>` whenever possible.
this.closingReason.canceled = this.canceled;
},
_withBackdropChanged: function() {
if (this.opened) {
this._manager.trackBackdrop(this);
if (this.withBackdrop) {
this.backdropElement.prepare();
// Give time to be added to document.
this.async(function(){
this.backdropElement.open();
}, 1);
} else {
this.backdropElement.close();
}
}
},
_toggleListener: function(enable, node, event, boundListener, capture) {
if (enable) {
// enable document-wide tap recognizer
@ -280,30 +295,22 @@ context. You should place this element as a child of `<body>` whenever possible.
}
},
_toggleListeners: function() {
if (this._toggleListenersAsync) {
this.cancelAsync(this._toggleListenersAsync);
}
// async so we don't auto-close immediately via a click.
this._toggleListenersAsync = this.async(function() {
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
this._toggleListener(this.opened, document, 'keydown', this._boundOnCaptureKeydown, true);
this._toggleListenersAsync = null;
}, 1);
_toggleListeners: function () {
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
this._toggleListener(this.opened, document, 'keydown', this._boundOnCaptureKeydown, true);
},
// tasks which must occur before opening; e.g. making the element visible
_prepareRenderOpened: function() {
this._manager.addOverlay(this);
if (this.withBackdrop) {
this.backdropElement.prepare();
this._manager.trackBackdrop(this);
}
this._preparePositioning();
this.fit();
this._finishPositioning();
if (this.withBackdrop) {
this.backdropElement.prepare();
}
},
// tasks which cause the overlay to actually open; typically play an
@ -322,52 +329,24 @@ context. You should place this element as a child of `<body>` whenever possible.
this._finishRenderClosed();
},
_onTransitionend: function(event) {
// make sure this is our transition event.
if (event && event.target !== this) {
return;
}
if (this.opened) {
this._finishRenderOpened();
} else {
this._finishRenderClosed();
}
},
_finishRenderOpened: function() {
// focus the child node with [autofocus]
if (!this.noAutoFocus) {
this._focusNode.focus();
}
this._applyFocus();
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
this.fire('iron-overlay-opened');
this._squelchNextResize = true;
this.async(this.notifyResize);
},
_finishRenderClosed: function() {
// hide the overlay and remove the backdrop
this.resetFit();
this.style.display = 'none';
this._completeBackdrop();
this._manager.removeOverlay(this);
this._focusNode.blur();
// focus the next overlay, if there is one
this._manager.focusOverlay();
this._applyFocus();
this.notifyResize();
this.fire('iron-overlay-closed', this.closingReason);
this._squelchNextResize = true;
this.async(this.notifyResize);
},
_completeBackdrop: function() {
if (this.withBackdrop) {
this._manager.trackBackdrop(this);
this.backdropElement.complete();
}
},
_preparePositioning: function() {
@ -396,8 +375,8 @@ context. You should place this element as a child of `<body>` whenever possible.
},
_onCaptureClick: function(event) {
if (!this.noCancelOnOutsideClick &&
this._manager.currentOverlay() === this &&
if (this._manager.currentOverlay() === this &&
!this.noCancelOnOutsideClick &&
Polymer.dom(event).path.indexOf(this) === -1) {
this.cancel();
}
@ -405,18 +384,14 @@ context. You should place this element as a child of `<body>` whenever possible.
_onCaptureKeydown: function(event) {
var ESC = 27;
if (!this.noCancelOnEscKey && (event.keyCode === ESC)) {
if (this._manager.currentOverlay() === this &&
!this.noCancelOnEscKey &&
event.keyCode === ESC) {
this.cancel();
event.stopPropagation();
event.stopImmediatePropagation();
}
},
_onIronResize: function() {
if (this._squelchNextResize) {
this._squelchNextResize = false;
return;
}
if (this.opened) {
this.refit();
}

View file

@ -12,104 +12,148 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
Polymer.IronOverlayManager = {
_overlays: [],
// iframes have a default z-index of 100, so this default should be at least
// that.
_minimumZ: 101,
_backdrops: [],
_applyOverlayZ: function(overlay, aboveZ) {
this._setZ(overlay, aboveZ + 2);
},
_setZ: function(element, z) {
element.style.zIndex = z;
},
// track overlays for z-index and focus managemant
addOverlay: function(overlay) {
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
this._overlays.push(overlay);
var newZ = this.currentOverlayZ();
if (newZ <= minimumZ) {
this._applyOverlayZ(overlay, minimumZ);
}
},
removeOverlay: function(overlay) {
var i = this._overlays.indexOf(overlay);
if (i >= 0) {
this._overlays.splice(i, 1);
this._setZ(overlay, '');
}
},
currentOverlay: function() {
var i = this._overlays.length - 1;
while (this._overlays[i] && !this._overlays[i].opened) {
--i;
}
return this._overlays[i];
},
currentOverlayZ: function() {
var z = this._minimumZ;
var current = this.currentOverlay();
if (current) {
var z1 = window.getComputedStyle(current).zIndex;
if (!isNaN(z1)) {
z = Number(z1);
}
}
return z;
},
/**
* @struct
* @constructor
*/
Polymer.IronOverlayManagerClass = function() {
this._overlays = [];
/**
* Ensures that the minimum z-index of new overlays is at least `minimumZ`.
* This does not effect the z-index of any existing overlays.
*
* @param {number} minimumZ
* iframes have a default z-index of 100, so this default should be at least
* that.
* @private {number}
*/
ensureMinimumZ: function(minimumZ) {
this._minimumZ = Math.max(this._minimumZ, minimumZ);
},
this._minimumZ = 101;
focusOverlay: function() {
var current = this.currentOverlay();
// We have to be careful to focus the next overlay _after_ any current
// transitions are complete (due to the state being toggled prior to the
// transition). Otherwise, we risk infinite recursion when a transitioning
// (closed) overlay becomes the current overlay.
//
// NOTE: We make the assumption that any overlay that completes a transition
// will call into focusOverlay to kick the process back off. Currently:
// transitionend -> _applyFocus -> focusOverlay.
if (current && !current.transitioning) {
current._applyFocus();
}
},
trackBackdrop: function(element) {
// backdrops contains the overlays with a backdrop that are currently
// visible
if (element.opened) {
this._backdrops.push(element);
} else {
var index = this._backdrops.indexOf(element);
if (index >= 0) {
this._backdrops.splice(index, 1);
}
}
},
getBackdrops: function() {
return this._backdrops;
}
this._backdrops = [];
}
Polymer.IronOverlayManagerClass.prototype._applyOverlayZ = function(overlay, aboveZ) {
this._setZ(overlay, aboveZ + 2);
};
Polymer.IronOverlayManagerClass.prototype._setZ = function(element, z) {
element.style.zIndex = z;
};
/**
* track overlays for z-index and focus managemant
*/
Polymer.IronOverlayManagerClass.prototype.addOverlay = function(overlay) {
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
this._overlays.push(overlay);
var newZ = this.currentOverlayZ();
if (newZ <= minimumZ) {
this._applyOverlayZ(overlay, minimumZ);
}
};
Polymer.IronOverlayManagerClass.prototype.removeOverlay = function(overlay) {
var i = this._overlays.indexOf(overlay);
if (i >= 0) {
this._overlays.splice(i, 1);
this._setZ(overlay, '');
}
};
Polymer.IronOverlayManagerClass.prototype.currentOverlay = function() {
var i = this._overlays.length - 1;
while (this._overlays[i] && !this._overlays[i].opened) {
--i;
}
return this._overlays[i];
};
Polymer.IronOverlayManagerClass.prototype.currentOverlayZ = function() {
return this._getOverlayZ(this.currentOverlay());
};
/**
* Ensures that the minimum z-index of new overlays is at least `minimumZ`.
* This does not effect the z-index of any existing overlays.
*
* @param {number} minimumZ
*/
Polymer.IronOverlayManagerClass.prototype.ensureMinimumZ = function(minimumZ) {
this._minimumZ = Math.max(this._minimumZ, minimumZ);
};
Polymer.IronOverlayManagerClass.prototype.focusOverlay = function() {
var current = this.currentOverlay();
// We have to be careful to focus the next overlay _after_ any current
// transitions are complete (due to the state being toggled prior to the
// transition). Otherwise, we risk infinite recursion when a transitioning
// (closed) overlay becomes the current overlay.
//
// NOTE: We make the assumption that any overlay that completes a transition
// will call into focusOverlay to kick the process back off. Currently:
// transitionend -> _applyFocus -> focusOverlay.
if (current && !current.transitioning) {
current._applyFocus();
}
};
Polymer.IronOverlayManagerClass.prototype.trackBackdrop = function(element) {
// backdrops contains the overlays with a backdrop that are currently
// visible
var index = this._backdrops.indexOf(element);
if (element.opened && element.withBackdrop) {
// no duplicates
if (index === -1) {
this._backdrops.push(element);
}
} else if (index >= 0) {
this._backdrops.splice(index, 1);
}
};
Object.defineProperty(Polymer.IronOverlayManagerClass.prototype, "backdropElement", {
get: function() {
if (!this._backdropElement) {
this._backdropElement = document.createElement('iron-overlay-backdrop');
}
return this._backdropElement;
}
});
Polymer.IronOverlayManagerClass.prototype.getBackdrops = function() {
return this._backdrops;
};
/**
* Returns the z-index for the backdrop.
*/
Polymer.IronOverlayManagerClass.prototype.backdropZ = function() {
return this._getOverlayZ(this._overlayWithBackdrop()) - 1;
};
/**
* Returns the first opened overlay that has a backdrop.
*/
Polymer.IronOverlayManagerClass.prototype._overlayWithBackdrop = function() {
for (var i = 0; i < this._overlays.length; i++) {
if (this._overlays[i].opened && this._overlays[i].withBackdrop) {
return this._overlays[i];
}
}
};
/**
* Calculates the minimum z-index for the overlay.
*/
Polymer.IronOverlayManagerClass.prototype._getOverlayZ = function(overlay) {
var z = this._minimumZ;
if (overlay) {
var z1 = Number(window.getComputedStyle(overlay).zIndex);
// Check if is a number
// Number.isNaN not supported in IE 10+
if (z1 === z1) {
z = z1;
}
}
return z;
};
Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass();
</script>

View file

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!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
@ -7,9 +6,7 @@ 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>
--><html><head>
<title>iron-overlay-behavior tests</title>
@ -23,12 +20,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'iron-overlay-behavior.html',
'iron-overlay-behavior.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View file

@ -22,6 +22,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="test-overlay.html">
<link rel="import" href="test-overlay2.html">
</head>
<body>
@ -79,6 +80,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="backdrop-different-elements">
<template>
<test-overlay with-backdrop class="overlay-1">
Overlay 1 with backdrop
</test-overlay>
<test-overlay2 with-backdrop class="overlay-2">
Overlay 2 with backdrop
</test-overlay2>
</template>
</test-fixture>
<script>
function runAfterOpen(overlay, cb) {
@ -113,8 +125,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay = fixture('opened');
overlay.addEventListener('iron-overlay-opened', function() {
var s = getComputedStyle(overlay);
assert.isTrue(parseFloat(s.left) === (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
assert.isTrue(parseFloat(s.top) === (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
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();
});
});
@ -136,6 +148,60 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay.opened = true;
});
test('open overlay refits on iron-resize', function() {
var overlay = fixture('opened');
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
assert.isTrue(spy.called, 'overlay should refit');
});
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) {
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
runAfterOpen(overlay, function () {
assert.equal(callCount, 1, 'iron-resize should be called once');
done();
});
});
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);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
assert.equal(callCount, 0, 'iron-resize should not be called');
done();
}, 10);
});
test('open overlay triggers iron-resize when its content changes', function(done) {
runAfterOpen(overlay, function () {
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
assert.equal(callCount, 1, 'iron-resize should be called once');
done();
}, 10);
});
});
test('close an overlay quickly after open', function(done) {
// first, open the overlay
overlay.open();
@ -169,11 +235,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('clicking an overlay does not close it', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function() {
assert('iron-overlay-closed should not fire');
});
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
overlay.fire('click');
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
@ -211,13 +277,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay.addEventListener('iron-overlay-canceled', function(event) {
event.preventDefault();
});
var closedListener = function(event) {
throw new Error('iron-overlay-closed should not fire');
};
overlay.addEventListener('iron-overlay-closed', closedListener);
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
overlay.removeEventListener('iron-overlay-closed', closedListener);
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
@ -249,11 +313,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('no-cancel-on-outside-click property', function(done) {
overlay.noCancelOnOutsideClick = true;
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function() {
assert('iron-overlay-closed should not fire');
});
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
@ -262,13 +326,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('no-cancel-on-esc-key property', function(done) {
overlay.noCancelOnEscKey = true;
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function() {
assert('iron-overlay-cancel should not fire');
});
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
fireEvent('keydown', {
keyCode: 27
}, document);
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
done();
}, 10);
});
@ -383,6 +447,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.dom(backdrop.parentNode).removeChild(backdrop);
Polymer.dom.flush();
assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), (0));
done();
});
});
@ -393,6 +458,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
done();
});
});
test('manager backdrops immediately updated on opened changes', function() {
overlays[0].opened = true;
assert.equal(overlays[0]._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
overlays[0].opened = false;
assert.equal(overlays[0]._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
});
});
suite('multiple overlays with backdrop', function() {
@ -419,8 +491,72 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('updating with-backdrop to false closes backdrop', function(done) {
runAfterOpen(overlays[0], function() {
overlays[0].withBackdrop = false;
// Don't wait for animations.
overlays[0].backdropElement.complete();
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
done();
});
});
test('updating with-backdrop updates z-index', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
overlays[0].withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop');
done();
});
});
});
});
suite('multiple overlays with backdrop implemented in different elements', function () {
var overlays;
setup(function() {
overlays = fixture('backdrop-different-elements');
});
test('multiple overlays share the same backdrop', function() {
assert.equal(overlays[0].backdropElement, overlays[1].backdropElement);
});
test('when overlays close, the backdrop is closed', function(done) {
runAfterOpen(overlays[0], function () {
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1);
// After second overlay is closed, both backdrops should be hidden
overlays[1].addEventListener('iron-overlay-closed', function() {
Polymer.Base.async(function () {
assert.isFalse(overlays[1].backdropElement.opened, 'second overlay backdrop is closed');
assert.isFalse(overlays[0].backdropElement.opened, 'first overlay backdrop is closed');
done();
}, 1);
});
// After second overlay is opened, immediately close it
overlays[1].addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(function () {
overlays[1].close();
}, 1);
});
// Immediately close first overlay and open the other one
overlays[0].close();
overlays[1].open();
});
});
})
suite('a11y', function() {
test('overlay has aria-hidden=true when opened', function() {

View file

@ -0,0 +1,49 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-overlay-behavior.html">
<dom-module id="test-overlay2">
<style>
:host {
background: white;
color: black;
border: 1px solid black;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'test-overlay2',
behaviors: [
Polymer.IronOverlayBehavior
]
});
})();
</script>