fix(animations): properly clean up queried element styles in safari/edge (#23633)
Prior to this patch, if an element is queried and animated for 0 seconds (just a style() call and nothing else) then the styles applied would not be properly cleaned up due to their camelCased nature. PR Close #23633
This commit is contained in:

committed by
Igor Minar

parent
2cf6244b1d
commit
da9ff255dd
@ -248,6 +248,61 @@ import {TestBed} from '../../testing';
|
||||
assertStyle(element, 'width', '200px');
|
||||
assertStyle(element, 'height', '50px');
|
||||
});
|
||||
|
||||
it('should clean up 0 second animation styles (queried styles) that contain camel casing when complete',
|
||||
() => {
|
||||
@Component({
|
||||
selector: 'ani-cmp',
|
||||
template: `
|
||||
<div #elm [@myAnimation]="myAnimationExp">
|
||||
<div class="foo"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
`,
|
||||
animations: [
|
||||
trigger(
|
||||
'myAnimation',
|
||||
[
|
||||
state('go', style({width: '200px'})),
|
||||
transition(
|
||||
'* => go',
|
||||
[
|
||||
query('.foo', [style({maxHeight: '0px'})]),
|
||||
query(
|
||||
'.bar',
|
||||
[
|
||||
style({width: '0px'}),
|
||||
animate('1s', style({width: '100px'})),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
]
|
||||
})
|
||||
class Cmp {
|
||||
@ViewChild('elm') public element: any;
|
||||
|
||||
public myAnimationExp = '';
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Cmp]});
|
||||
|
||||
const engine = TestBed.get(AnimationEngine);
|
||||
const fixture = TestBed.createComponent(Cmp);
|
||||
const cmp = fixture.componentInstance;
|
||||
|
||||
const elm = cmp.element.nativeElement;
|
||||
const foo = elm.querySelector('.foo') as HTMLElement;
|
||||
|
||||
cmp.myAnimationExp = 'go';
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(foo.style.getPropertyValue('max-height')).toEqual('0px');
|
||||
|
||||
const player = engine.players.pop();
|
||||
player.finish();
|
||||
|
||||
expect(foo.style.getPropertyValue('max-height')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
|
Reference in New Issue
Block a user