render ssa/ass subs in browser
This commit is contained in:
parent
3c2d0cd3a1
commit
cc2c794ad0
26 changed files with 10493 additions and 138 deletions
|
@ -127,10 +127,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<input id="focusInput" placeholder="focus input">
|
||||
|
||||
<script>
|
||||
|
||||
HTMLImports.whenReady(function() {
|
||||
// Enable document-wide tap recognizer.
|
||||
Polymer.Gestures.add(document, 'tap', null);
|
||||
});
|
||||
|
||||
function runAfterOpen(overlay, callback) {
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
Polymer.Base.async(callback, 1);
|
||||
});
|
||||
overlay.addEventListener('iron-overlay-opened', callback);
|
||||
overlay.open();
|
||||
}
|
||||
|
||||
|
@ -168,10 +172,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlay.opened = true;
|
||||
});
|
||||
|
||||
test('closed overlay does not refit on iron-resize', function() {
|
||||
test('open() refits overlay only once', function(done) {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
runAfterOpen(overlay, function() {
|
||||
assert.equal(spy.callCount, 1, 'overlay did refit only once');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('open overlay refits on iron-resize', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
Polymer.dom.flush();
|
||||
requestAnimationFrame(function() {
|
||||
assert.isTrue(spy.called, 'overlay did refit');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('closed overlay does not refit on iron-resize', function(done) {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
assert.isFalse(spy.called, 'overlay should not refit');
|
||||
Polymer.dom.flush();
|
||||
requestAnimationFrame(function() {
|
||||
assert.isFalse(spy.called, 'overlay should not refit');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('open() triggers iron-resize', function(done) {
|
||||
|
@ -242,6 +270,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
|
||||
test('open overlay on mousedown does not close it', function(done) {
|
||||
var btn = document.createElement('button');
|
||||
btn.addEventListener('mousedown', overlay.open.bind(overlay));
|
||||
document.body.appendChild(btn);
|
||||
// It triggers mousedown, mouseup, and click.
|
||||
MockInteractions.tap(btn);
|
||||
document.body.removeChild(btn);
|
||||
|
||||
assert.isTrue(overlay.opened, 'overlay opened');
|
||||
overlay.async(function() {
|
||||
assert.isTrue(overlay.opened, 'overlay is still open');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
||||
test('clicking outside fires iron-overlay-canceled', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
|
@ -396,18 +439,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('open overlay refits on iron-resize', function(done) {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
// At this point, overlay is still opening.
|
||||
overlay.fire('iron-resize');
|
||||
assert.isFalse(spy.called, 'overlay did not refit while animating');
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
overlay.fire('iron-resize');
|
||||
assert.isTrue(spy.called, 'overlay did refit');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('focus handling', function() {
|
||||
|
@ -504,17 +535,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlay.withBackdrop = true;
|
||||
var focusableNodes = overlay._focusableNodes;
|
||||
runAfterOpen(overlay, function() {
|
||||
// Go to last element.
|
||||
MockInteractions.focus(focusableNodes[focusableNodes.length-1]);
|
||||
// Simulate TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[0], document.activeElement, 'focus wrapped to first focusable');
|
||||
// Simulate Shift+TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9, ['shift']);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[focusableNodes.length-1], document.activeElement, 'focus wrapped to last focusable');
|
||||
done();
|
||||
Polymer.Base.async(function() {
|
||||
// Go to last element.
|
||||
MockInteractions.focus(focusableNodes[focusableNodes.length-1]);
|
||||
// Simulate TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9);
|
||||
MockInteractions.focus(document.body);
|
||||
|
||||
assert.equal(focusableNodes[0], document.activeElement, 'focus wrapped to first focusable');
|
||||
// Simulate Shift+TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9, ['shift']);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[focusableNodes.length-1], document.activeElement, 'focus wrapped to last focusable');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -522,17 +556,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlayWithTabIndex.withBackdrop = true;
|
||||
var focusableNodes = overlayWithTabIndex._focusableNodes;
|
||||
runAfterOpen(overlayWithTabIndex, function() {
|
||||
// Go to last element.
|
||||
MockInteractions.focus(focusableNodes[focusableNodes.length-1]);
|
||||
// Simulate TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[0], document.activeElement, 'focus wrapped to first focusable');
|
||||
// Simulate Shift+TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9, ['shift']);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[focusableNodes.length-1], document.activeElement, 'focus wrapped to last focusable');
|
||||
done();
|
||||
Polymer.Base.async(function() {
|
||||
// Go to last element.
|
||||
MockInteractions.focus(focusableNodes[focusableNodes.length-1]);
|
||||
// Simulate TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[0], document.activeElement, 'focus wrapped to first focusable');
|
||||
// Simulate Shift+TAB & focus out of overlay.
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 9, ['shift']);
|
||||
MockInteractions.focus(document.body);
|
||||
assert.equal(focusableNodes[focusableNodes.length-1], document.activeElement, 'focus wrapped to last focusable');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -890,7 +926,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
Polymer.Base.async(function() {
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'backdrop element removed from the DOM');
|
||||
done();
|
||||
}, 1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
test('newest overlay appear on top', function(done) {
|
||||
|
@ -950,7 +986,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
suite('always-on-top', function() {
|
||||
|
@ -1003,6 +1039,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
});
|
||||
|
||||
suite('animations', function() {
|
||||
|
||||
test('overlay animations correctly triggered', function(done) {
|
||||
var overlay = fixture('basic');
|
||||
overlay.animated = true;
|
||||
overlay.open();
|
||||
overlay.addEventListener('simple-overlay-open-animation-start', function() {
|
||||
// Since animated overlay will transition center + 300px to center,
|
||||
// we should not find the element at the center when the open animation starts.
|
||||
var centerElement = document.elementFromPoint(window.innerWidth/2, window.innerHeight/2);
|
||||
assert.notEqual(centerElement, overlay, 'overlay should not be centered already');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('a11y', function() {
|
||||
|
||||
test('overlay has aria-hidden=true when opened', function() {
|
||||
|
|
|
@ -15,13 +15,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<dom-module id="test-overlay">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
:host([animated]) {
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
-webkit-transform: translateY(300px);
|
||||
transform: translateY(300px);
|
||||
}
|
||||
|
||||
:host(.opened[animated]) {
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
@ -31,19 +41,62 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
(function() {
|
||||
Polymer({
|
||||
|
||||
Polymer({
|
||||
is: 'test-overlay',
|
||||
|
||||
is: 'test-overlay',
|
||||
properties: {
|
||||
animated: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true
|
||||
}
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
]
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
],
|
||||
|
||||
});
|
||||
listeners: {
|
||||
'transitionend': '__onTransitionEnd'
|
||||
},
|
||||
|
||||
})();
|
||||
_renderOpened: function() {
|
||||
if (this.animated) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.open();
|
||||
}
|
||||
this.classList.add('opened');
|
||||
this.fire('simple-overlay-open-animation-start');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
_renderClosed: function() {
|
||||
if (this.animated) {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.close();
|
||||
}
|
||||
this.classList.remove('opened');
|
||||
this.fire('simple-overlay-close-animation-start');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
__onTransitionEnd: function(e) {
|
||||
if (e && e.target === this) {
|
||||
if (this.opened) {
|
||||
this._finishRenderOpened();
|
||||
} else {
|
||||
this._finishRenderClosed();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue