render ssa/ass subs in browser

This commit is contained in:
Luke Pulverenti 2016-04-04 21:23:42 -04:00
parent 3c2d0cd3a1
commit cc2c794ad0
26 changed files with 10493 additions and 138 deletions

View file

@ -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() {

View file

@ -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>