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

fix(animations): set animations styles properly on platform-server (#24624)

Browse Source 
Animations styles weren't getting properly set on platform-server because of erroneous checks and absence of reflection of style property to attribute on the server.

The fix corrects the check for platform and explicitly reflects the style property to the attribute.

PR Close #24624
This commit is contained in:
Vikram Subramanian
2018-06-21 22:55:47 -07:00
committed by Miško Hevery
parent a886659444
commit 0b356d4163
4 changed files with 71 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/platform-server/test/integration_spec.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AnimationBuilder, animate, style, transition, trigger} from '@angular/animations';
import {AnimationBuilder, animate, state, style, transition, trigger} from '@angular/animations';
import {APP_BASE_HREF, PlatformLocation, isPlatformServer} from '@angular/common';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
@ -136,12 +136,21 @@ class SVGServerModule {
@Component({
selector: 'app',
template: '<div @myAnimation>{{text}}</div>',
template: `<div [@myAnimation]="state">{{text}}</div>`,
animations: [trigger(
'myAnimation',
[transition('void => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
[
state('void', style({'opacity': '0'})),
state('active', style({
'opacity': '1', // simple supported property
'font-weight': 'bold', // property with dashed name
'transform': 'translate3d(0, 0, 0)', // not natively supported by Domino
})),
transition('void => *', [animate('0ms')]),
], )]
})
class MyAnimationApp {
state = 'active';
constructor(private builder: AnimationBuilder) {}
text = 'Works!';
@ -509,6 +518,8 @@ class EscapedTransferStoreModule {
// PlatformConfig takes in a parsed document so that it can be cached across requests.
doc = '<html><head></head><body><app></app></body></html>';
called = false;
(global as any)['window'] = undefined;
(global as any)['document'] = undefined;
});
afterEach(() => { expect(called).toBe(true); });
@ -561,6 +572,9 @@ class EscapedTransferStoreModule {
renderModule(AnimationServerModule, {document: doc}).then(output => {
expect(output).toContain('Works!');
expect(output).toContain('ng-trigger-myAnimation');
expect(output).toContain('opacity:1;');
expect(output).toContain('transform:translate3d(0, 0, 0);');
expect(output).toContain('font-weight:bold;');
called = true;
});
}));