fix(animations): do not leak DOM nodes/styling for host triggered animations (#18853)

Closes #18606

PR Close #18853
This commit is contained in:
Matias Niemelä
2017-08-23 15:32:26 -07:00
committed by Jason Aden
parent fd701b07f0
commit fcadeb2079
2 changed files with 55 additions and 8 deletions

View File

@ -733,6 +733,46 @@ export function main() {
flushMicrotasks();
expect(fixture.debugElement.nativeElement.children.length).toBe(0);
}));
it('should properly evaluate pre/auto-style values when components are inserted/removed which contain host animations',
fakeAsync(() => {
@Component({
selector: 'parent-cmp',
template: `
<child-cmp *ngFor="let item of items"></child-cmp>
`
})
class ParentCmp {
items: any[] = [1, 2, 3, 4, 5];
}
@Component({
selector: 'child-cmp',
template: '... child ...',
animations:
[trigger('host', [transition(':leave', [animate(1000, style({opacity: 0}))])])]
})
class ChildCmp {
@HostBinding('@host') public hostAnimation = 'a';
}
TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(ParentCmp);
const cmp = fixture.componentInstance;
const element = fixture.nativeElement;
fixture.detectChanges();
cmp.items = [0, 2, 4, 6]; // 1,3,5 get removed
fixture.detectChanges();
const items = element.querySelectorAll('child-cmp');
for (let i = 0; i < items.length; i++) {
const item = items[i];
expect(item.style['display']).toBeFalsy();
}
}));
});
it('should cancel and merge in mid-animation styles into the follow-up animation, but only for animation keyframes that start right away',