cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): ensure all child elements are rendered before running animations

Browse Source 
Closes #9402
Closes #9775
Closes #9887
This commit is contained in:
Matias Niemelä
2016-07-01 16:01:57 -07:00
parent daa9da4047
commit c3bdd504d0
20 changed files with 340 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts
View File

@ -12,6 +12,7 @@ import {el} from '@angular/platform-browser/testing/browser_util';
import {AnimationKeyframe, AnimationStyles} from '../../core_private';
import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
import {WebAnimationsDriver} from '../../src/dom/web_animations_driver';
import {WebAnimationsPlayer} from '../../src/dom/web_animations_player';
import {StringMapWrapper} from '../../src/facade/collection';
import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
@ -51,8 +52,8 @@ export function main() {
_makeKeyframe(1, {'font-size': '555px'})
];
driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
var details = driver.log.pop();
var player = driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
var details = _formatOptions(player);
var startKeyframe = details['keyframes'][0];
var firstKeyframe = details['keyframes'][1];
var lastKeyframe = details['keyframes'][2];
@ -71,8 +72,8 @@ export function main() {
var startingStyles = _makeStyles({'borderTopWidth': 40});
var styles = [_makeKeyframe(0, {'font-size': 100}), _makeKeyframe(1, {'height': '555em'})];
driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
var details = driver.log.pop();
var player = driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
var details = _formatOptions(player);
var startKeyframe = details['keyframes'][0];
var firstKeyframe = details['keyframes'][1];
var lastKeyframe = details['keyframes'][2];
@ -88,8 +89,8 @@ export function main() {
var startingStyles = _makeStyles({});
var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];
driver.animate(elm, startingStyles, styles, 1000, 1000, 'linear');
var details = driver.log.pop();
var player = driver.animate(elm, startingStyles, styles, 1000, 1000, 'linear');
var details = _formatOptions(player);
var options = details['options'];
expect(options['fill']).toEqual('both');
});
@ -98,8 +99,8 @@ export function main() {
var startingStyles = _makeStyles({});
var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];
driver.animate(elm, startingStyles, styles, 1000, 1000, 'ease-out');
var details = driver.log.pop();
var player = driver.animate(elm, startingStyles, styles, 1000, 1000, 'ease-out');
var details = _formatOptions(player);
var options = details['options'];
expect(options['easing']).toEqual('ease-out');
});
@ -108,11 +109,15 @@ export function main() {
var startingStyles = _makeStyles({});
var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];
driver.animate(elm, startingStyles, styles, 1000, 1000, null);
var details = driver.log.pop();
var player = driver.animate(elm, startingStyles, styles, 1000, 1000, null);
var details = _formatOptions(player);
var options = details['options'];
var keys = StringMapWrapper.keys(options);
expect(keys.indexOf('easing')).toEqual(-1);
});
});
}
function _formatOptions(player: WebAnimationsPlayer): {[key: string]: any} {
return {'element': player.element, 'keyframes': player.keyframes, 'options': player.options};
}

24
modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts
View File

@ -7,16 +7,32 @@
*/
import {AsyncTestCompleter, MockAnimationPlayer, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {el} from '@angular/platform-browser/testing/browser_util';
import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
import {WebAnimationsPlayer} from '../../src/dom/web_animations_player';
import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
class ExtendedWebAnimationsPlayer extends WebAnimationsPlayer {
public domPlayer = new MockDomAnimatePlayer();
constructor(
public element: HTMLElement, public keyframes: {[key: string]: string | number}[],
public options: {[key: string]: string | number}) {
super(element, keyframes, options);
}
_triggerWebAnimation(elm: any, keyframes: any[], options: any): DomAnimatePlayer {
return this.domPlayer;
}
}
export function main() {
function makePlayer(): {[key: string]: any} {
var mockPlayer = new MockDomAnimatePlayer();
var c = mockPlayer.captures;
var p = new WebAnimationsPlayer(mockPlayer, 0);
return {'captures': c, 'player': p};
var someElm = el('<div></div>');
var player = new ExtendedWebAnimationsPlayer(someElm, [], {});
player.init();
return {'captures': player.domPlayer.captures, 'player': player};
}
describe('WebAnimationsPlayer', () => {