79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright Google Inc. All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by an MIT-style license that can be
|
||
|
|
* found in the LICENSE file at https://angular.io/license
|
||
|
|
*/
|
||
|
|
import {DOMAnimation} from '../../src/render/web_animations/dom_animation';
|
||
|
|
import {WebAnimationsPlayer} from '../../src/render/web_animations/web_animations_player';
|
||
|
|
|
||
|
|
export function main() {
|
||
|
|
describe('WebAnimationsPlayer', function() {
|
||
|
|
// these tests are only mean't to be run within the DOM
|
||
|
|
if (typeof Element == 'undefined') return;
|
||
|
|
|
||
|
|
let element: any;
|
||
|
|
beforeEach(() => {
|
||
|
|
element = document.createElement('div');
|
||
|
|
document.body.appendChild(element);
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => { document.body.removeChild(element); });
|
||
|
|
|
||
|
|
it('should properly balance any previous player styles into the animation keyframes', () => {
|
||
|
|
element.style.height = '666px';
|
||
|
|
element.style.width = '333px';
|
||
|
|
|
||
|
|
const prevPlayer1 = new MockWebAnimationsPlayer(
|
||
|
|
element, [{width: '0px', offset: 0}, {width: '200px', offset: 1}], {});
|
||
|
|
prevPlayer1.play();
|
||
|
|
prevPlayer1.finish();
|
||
|
|
|
||
|
|
const prevPlayer2 = new MockWebAnimationsPlayer(
|
||
|
|
element, [{height: '0px', offset: 0}, {height: '200px', offset: 1}], {});
|
||
|
|
prevPlayer2.play();
|
||
|
|
prevPlayer2.finish();
|
||
|
|
|
||
|
|
// what needs to happen here is the player below should
|
||
|
|
// examine which styles are present in the provided previous
|
||
|
|
// players and use them as input data for the keyframes of
|
||
|
|
// the new player. Given that the players are in their finished
|
||
|
|
// state, the styles are copied over as the starting keyframe
|
||
|
|
// for the animation and if the styles are missing in later keyframes
|
||
|
|
// then the styling is resolved by computing the styles
|
||
|
|
const player = new MockWebAnimationsPlayer(
|
||
|
|
element, [{width: '100px', offset: 0}, {width: '500px', offset: 1}], {},
|
||
|
|
[prevPlayer1, prevPlayer2]);
|
||
|
|
|
||
|
|
player.init();
|
||
|
|
expect(player.capturedKeyframes).toEqual([
|
||
|
|
{height: '200px', width: '200px', offset: 0},
|
||
|
|
{height: '666px', width: '500px', offset: 1}
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
class MockWebAnimationsPlayer extends WebAnimationsPlayer {
|
||
|
|
capturedKeyframes: any[];
|
||
|
|
|
||
|
|
_triggerWebAnimation(element: any, keyframes: any[], options: any): any {
|
||
|
|
this.capturedKeyframes = keyframes;
|
||
|
|
return new MockDOMAnimation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class MockDOMAnimation implements DOMAnimation {
|
||
|
|
onfinish = (callback: (e: any) => any) => {};
|
||
|
|
position = 0;
|
||
|
|
currentTime = 0;
|
||
|
|
|
||
|
|
cancel(): void {}
|
||
|
|
play(): void {}
|
||
|
|
pause(): void {}
|
||
|
|
finish(): void {}
|
||
|
|
addEventListener(eventName: string, handler: (event: any) => any): any { return null; }
|
||
|
|
dispatchEvent(eventName: string): any { return null; }
|
||
|
|
}
|