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

fix(animations): always normalize style properties and values during compilation (#12755)

Browse Source 
Closes #11582
Closes #12481
Closes #12755
This commit is contained in:
Matias Niemelä
2016-11-08 15:45:30 -08:00
committed by vikerman
parent 3dc61779f0
commit a0e9fde653
16 changed files with 448 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/@angular/compiler/index.ts
View File

@ -52,5 +52,6 @@ export * from './src/selector';
export * from './src/style_compiler';
export * from './src/template_parser/template_parser';
export {ViewCompiler} from './src/view_compiler/view_compiler';
export {AnimationParser} from './src/animation/animation_parser';
// This file only reexports content of the `src` folder. Keep it that way.

74
modules/@angular/compiler/src/animation/animation_parser.ts
View File

@ -6,11 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Injectable} from '@angular/core';
import {CompileAnimationAnimateMetadata, CompileAnimationEntryMetadata, CompileAnimationGroupMetadata, CompileAnimationKeyframesSequenceMetadata, CompileAnimationMetadata, CompileAnimationSequenceMetadata, CompileAnimationStateDeclarationMetadata, CompileAnimationStateTransitionMetadata, CompileAnimationStyleMetadata, CompileAnimationWithStepsMetadata, CompileDirectiveMetadata} from '../compile_metadata';
import {StringMapWrapper} from '../facade/collection';
import {isBlank, isPresent} from '../facade/lang';
import {ParseError} from '../parse_util';
import {ANY_STATE, FILL_STYLE_FLAG} from '../private_import_core';
import {ElementSchemaRegistry} from '../schema/element_schema_registry';
import {AnimationAst, AnimationEntryAst, AnimationGroupAst, AnimationKeyframeAst, AnimationSequenceAst, AnimationStateDeclarationAst, AnimationStateTransitionAst, AnimationStateTransitionExpression, AnimationStepAst, AnimationStylesAst, AnimationWithStepsAst} from './animation_ast';
import {StylesCollection} from './styles_collection';
@ -32,7 +35,10 @@ export class AnimationEntryParseResult {
constructor(public ast: AnimationEntryAst, public errors: AnimationParseError[]) {}
}
@Injectable()
export class AnimationParser {
constructor(private _schema: ElementSchemaRegistry) {}
parseComponent(component: CompileDirectiveMetadata): AnimationEntryAst[] {
const errors: string[] = [];
const componentName = component.type.name;
@ -73,7 +79,7 @@ export class AnimationParser {
var stateDeclarationAsts: AnimationStateDeclarationAst[] = [];
entry.definitions.forEach(def => {
if (def instanceof CompileAnimationStateDeclarationMetadata) {
_parseAnimationDeclarationStates(def, errors).forEach(ast => {
_parseAnimationDeclarationStates(def, this._schema, errors).forEach(ast => {
stateDeclarationAsts.push(ast);
stateStyles[ast.stateName] = ast.styles;
});
@ -82,8 +88,8 @@ export class AnimationParser {
}
});
var stateTransitionAsts =
transitions.map(transDef => _parseAnimationStateTransition(transDef, stateStyles, errors));
var stateTransitionAsts = transitions.map(
transDef => _parseAnimationStateTransition(transDef, stateStyles, this._schema, errors));
var ast = new AnimationEntryAst(entry.name, stateDeclarationAsts, stateTransitionAsts);
return new AnimationEntryParseResult(ast, errors);
@ -91,27 +97,17 @@ export class AnimationParser {
}
function _parseAnimationDeclarationStates(
stateMetadata: CompileAnimationStateDeclarationMetadata,
stateMetadata: CompileAnimationStateDeclarationMetadata, schema: ElementSchemaRegistry,
errors: AnimationParseError[]): AnimationStateDeclarationAst[] {
var styleValues: Styles[] = [];
stateMetadata.styles.styles.forEach(stylesEntry => {
// TODO (matsko): change this when we get CSS class integration support
if (typeof stylesEntry === 'object' && stylesEntry !== null) {
styleValues.push(stylesEntry as Styles);
} else {
errors.push(new AnimationParseError(
`State based animations cannot contain references to other states`));
}
});
var defStyles = new AnimationStylesAst(styleValues);
var normalizedStyles = _normalizeStyleMetadata(stateMetadata.styles, {}, schema, errors, false);
var defStyles = new AnimationStylesAst(normalizedStyles);
var states = stateMetadata.stateNameExpr.split(/\s*,\s*/);
return states.map(state => new AnimationStateDeclarationAst(state, defStyles));
}
function _parseAnimationStateTransition(
transitionStateMetadata: CompileAnimationStateTransitionMetadata,
stateStyles: {[key: string]: AnimationStylesAst},
stateStyles: {[key: string]: AnimationStylesAst}, schema: ElementSchemaRegistry,
errors: AnimationParseError[]): AnimationStateTransitionAst {
var styles = new StylesCollection();
var transitionExprs: AnimationStateTransitionExpression[] = [];
@ -119,7 +115,7 @@ function _parseAnimationStateTransition(
transitionStates.forEach(
expr => { transitionExprs.push(..._parseAnimationTransitionExpr(expr, errors)); });
var entry = _normalizeAnimationEntry(transitionStateMetadata.steps);
var animation = _normalizeStyleSteps(entry, stateStyles, errors);
var animation = _normalizeStyleSteps(entry, stateStyles, schema, errors);
var animationAst = _parseTransitionAnimation(animation, 0, styles, stateStyles, errors);
if (errors.length == 0) {
_fillAnimationAstStartingKeyframes(animationAst, styles, errors);
@ -176,13 +172,31 @@ function _normalizeAnimationEntry(entry: CompileAnimationMetadata | CompileAnima
function _normalizeStyleMetadata(
entry: CompileAnimationStyleMetadata, stateStyles: {[key: string]: AnimationStylesAst},
errors: AnimationParseError[]): {[key: string]: string | number}[] {
schema: ElementSchemaRegistry, errors: AnimationParseError[],
permitStateReferences: boolean): {[key: string]: string | number}[] {
var normalizedStyles: {[key: string]: string | number}[] = [];
entry.styles.forEach(styleEntry => {
if (typeof styleEntry === 'string') {
normalizedStyles.push(..._resolveStylesFromState(<string>styleEntry, stateStyles, errors));
if (permitStateReferences) {
normalizedStyles.push(..._resolveStylesFromState(<string>styleEntry, stateStyles, errors));
} else {
errors.push(new AnimationParseError(
`State based animations cannot contain references to other states`));
}
} else {
normalizedStyles.push(<{[key: string]: string | number}>styleEntry);
var stylesObj = <Styles>styleEntry;
var normalizedStylesObj: Styles = {};
Object.keys(stylesObj).forEach(propName => {
var normalizedProp = schema.normalizeAnimationStyleProperty(propName);
var normalizedOutput =
schema.normalizeAnimationStyleValue(normalizedProp, propName, stylesObj[propName]);
var normalizationError = normalizedOutput['error'];
if (normalizationError) {
errors.push(new AnimationParseError(normalizationError));
}
normalizedStylesObj[normalizedProp] = normalizedOutput['value'];
});
normalizedStyles.push(normalizedStylesObj);
}
});
return normalizedStyles;
@ -190,8 +204,8 @@ function _normalizeStyleMetadata(
function _normalizeStyleSteps(
entry: CompileAnimationMetadata, stateStyles: {[key: string]: AnimationStylesAst},
errors: AnimationParseError[]): CompileAnimationMetadata {
var steps = _normalizeStyleStepEntry(entry, stateStyles, errors);
schema: ElementSchemaRegistry, errors: AnimationParseError[]): CompileAnimationMetadata {
var steps = _normalizeStyleStepEntry(entry, stateStyles, schema, errors);
return (entry instanceof CompileAnimationGroupMetadata) ?
new CompileAnimationGroupMetadata(steps) :
new CompileAnimationSequenceMetadata(steps);
@ -213,7 +227,7 @@ function _mergeAnimationStyles(
function _normalizeStyleStepEntry(
entry: CompileAnimationMetadata, stateStyles: {[key: string]: AnimationStylesAst},
errors: AnimationParseError[]): CompileAnimationMetadata[] {
schema: ElementSchemaRegistry, errors: AnimationParseError[]): CompileAnimationMetadata[] {
var steps: CompileAnimationMetadata[];
if (entry instanceof CompileAnimationWithStepsMetadata) {
steps = entry.steps;
@ -232,7 +246,8 @@ function _normalizeStyleStepEntry(
if (!isPresent(combinedStyles)) {
combinedStyles = [];
}
_normalizeStyleMetadata(<CompileAnimationStyleMetadata>step, stateStyles, errors)
_normalizeStyleMetadata(
<CompileAnimationStyleMetadata>step, stateStyles, schema, errors, true)
.forEach(entry => { _mergeAnimationStyles(combinedStyles, entry); });
} else {
// it is important that we create a metadata entry of the combined styles
@ -250,13 +265,14 @@ function _normalizeStyleStepEntry(
var animateStyleValue = (<CompileAnimationAnimateMetadata>step).styles;
if (animateStyleValue instanceof CompileAnimationStyleMetadata) {
animateStyleValue.styles =
_normalizeStyleMetadata(animateStyleValue, stateStyles, errors);
_normalizeStyleMetadata(animateStyleValue, stateStyles, schema, errors, true);
} else if (animateStyleValue instanceof CompileAnimationKeyframesSequenceMetadata) {
animateStyleValue.steps.forEach(
step => { step.styles = _normalizeStyleMetadata(step, stateStyles, errors); });
animateStyleValue.steps.forEach(step => {
step.styles = _normalizeStyleMetadata(step, stateStyles, schema, errors, true);
});
}
} else if (step instanceof CompileAnimationWithStepsMetadata) {
let innerSteps = _normalizeStyleStepEntry(step, stateStyles, errors);
let innerSteps = _normalizeStyleStepEntry(step, stateStyles, schema, errors);
step = step instanceof CompileAnimationGroupMetadata ?
new CompileAnimationGroupMetadata(innerSteps) :
new CompileAnimationSequenceMetadata(innerSteps);

4
modules/@angular/compiler/src/compiler.ts
View File

@ -8,6 +8,7 @@
import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, Injectable, Optional, PLATFORM_INITIALIZER, PlatformRef, Provider, ReflectiveInjector, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore} from '@angular/core';
import {AnimationParser} from './animation/animation_parser';
import {CompilerConfig} from './config';
import {DirectiveNormalizer} from './directive_normalizer';
import {DirectiveResolver} from './directive_resolver';
@ -74,7 +75,8 @@ export const COMPILER_PROVIDERS: Array<any|Type<any>|{[k: string]: any}|any[]> =
UrlResolver,
DirectiveResolver,
PipeResolver,
NgModuleResolver
NgModuleResolver,
AnimationParser
];

4
modules/@angular/compiler/src/offline_compiler.ts
View File

@ -109,7 +109,6 @@ export function analyzeNgModules(
}
export class OfflineCompiler {
private _animationParser = new AnimationParser();
private _animationCompiler = new AnimationCompiler();
constructor(
@ -118,7 +117,8 @@ export class OfflineCompiler {
private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
private _dirWrapperCompiler: DirectiveWrapperCompiler,
private _ngModuleCompiler: NgModuleCompiler, private _outputEmitter: OutputEmitter,
private _localeId: string, private _translationFormat: string) {}
private _localeId: string, private _translationFormat: string,
private _animationParser: AnimationParser) {}
clearCache() {
this._directiveNormalizer.clearCache();

3
modules/@angular/compiler/src/runtime_compiler.ts
View File

@ -43,7 +43,6 @@ export class RuntimeCompiler implements Compiler {
private _compiledHostTemplateCache = new Map<Type<any>, CompiledTemplate>();
private _compiledDirectiveWrapperCache = new Map<Type<any>, Type<any>>();
private _compiledNgModuleCache = new Map<Type<any>, NgModuleFactory<any>>();
private _animationParser = new AnimationParser();
private _animationCompiler = new AnimationCompiler();
constructor(
@ -52,7 +51,7 @@ export class RuntimeCompiler implements Compiler {
private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
private _ngModuleCompiler: NgModuleCompiler,
private _directiveWrapperCompiler: DirectiveWrapperCompiler,
private _compilerConfig: CompilerConfig) {}
private _compilerConfig: CompilerConfig, private _animationParser: AnimationParser) {}
get injector(): Injector { return this._injector; }

64
modules/@angular/compiler/src/schema/dom_element_schema_registry.ts
View File

@ -6,7 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/
import {CUSTOM_ELEMENTS_SCHEMA, Injectable, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '@angular/core';
import {AUTO_STYLE, CUSTOM_ELEMENTS_SCHEMA, Injectable, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '@angular/core';
import {dashCaseToCamelCase} from '../util';
import {SECURITY_SCHEMA} from './dom_security_schema';
import {ElementSchemaRegistry} from './element_schema_registry';
@ -373,4 +375,64 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
}
allKnownElementNames(): string[] { return Object.keys(this._schema); }
normalizeAnimationStyleProperty(propName: string): string {
return dashCaseToCamelCase(propName);
}
normalizeAnimationStyleValue(camelCaseProp: string, userProvidedProp: string, val: string|number):
{error: string, value: string} {
var unit: string = '';
var strVal = val.toString().trim();
var errorMsg: string = null;
if (_isPixelDimensionStyle(camelCaseProp) && val !== 0 && val !== '0') {
if (typeof val === 'number') {
unit = 'px';
} else {
let valAndSuffixMatch = val.match(/^[+-]?[\d\.]+([a-z]*)$/);
if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
errorMsg = `Please provide a CSS unit value for ${userProvidedProp}:${val}`;
}
}
}
return {error: errorMsg, value: strVal + unit};
}
}
function _isPixelDimensionStyle(prop: string): boolean {
switch (prop) {
case 'width':
case 'height':
case 'minWidth':
case 'minHeight':
case 'maxWidth':
case 'maxHeight':
case 'left':
case 'top':
case 'bottom':
case 'right':
case 'fontSize':
case 'outlineWidth':
case 'outlineOffset':
case 'paddingTop':
case 'paddingLeft':
case 'paddingBottom':
case 'paddingRight':
case 'marginTop':
case 'marginLeft':
case 'marginBottom':
case 'marginRight':
case 'borderRadius':
case 'borderWidth':
case 'borderTopWidth':
case 'borderLeftWidth':
case 'borderRightWidth':
case 'borderBottomWidth':
case 'textIndent':
return true;
default:
return false;
}
}

4
modules/@angular/compiler/src/schema/element_schema_registry.ts
View File

@ -18,4 +18,8 @@ export abstract class ElementSchemaRegistry {
abstract getDefaultComponentElementName(): string;
abstract validateProperty(name: string): {error: boolean, msg?: string};
abstract validateAttribute(name: string): {error: boolean, msg?: string};
abstract normalizeAnimationStyleProperty(propName: string): string;
abstract normalizeAnimationStyleValue(
camelCaseProp: string, userProvidedProp: string,
val: string|number): {error: string, value: string};
}

5
modules/@angular/compiler/src/util.ts
View File

@ -11,11 +11,16 @@ import {isBlank, isPrimitive, isStrictStringMap} from './facade/lang';
export const MODULE_SUFFIX = '';
const CAMEL_CASE_REGEXP = /([A-Z])/g;
const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
export function camelCaseToDashCase(input: string): string {
return input.replace(CAMEL_CASE_REGEXP, (...m: any[]) => '-' + m[1].toLowerCase());
}
export function dashCaseToCamelCase(input: string): string {
return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
}
export function splitAtColon(input: string, defaultValues: string[]): string[] {
return _splitAt(input, ':', defaultValues);
}

11
modules/@angular/compiler/test/animation/animation_compiler_spec.ts
View File

@ -12,14 +12,19 @@ import {AnimationCompiler, AnimationEntryCompileResult} from '../../src/animatio
import {AnimationParser} from '../../src/animation/animation_parser';
import {CompileAnimationEntryMetadata, CompileDirectiveMetadata, CompileTemplateMetadata, CompileTypeMetadata} from '../../src/compile_metadata';
import {CompileMetadataResolver} from '../../src/metadata_resolver';
import {ElementSchemaRegistry} from '../../src/schema/element_schema_registry';
export function main() {
describe('RuntimeAnimationCompiler', () => {
var resolver: CompileMetadataResolver;
beforeEach(
inject([CompileMetadataResolver], (res: CompileMetadataResolver) => { resolver = res; }));
var parser: AnimationParser;
beforeEach(inject(
[CompileMetadataResolver, ElementSchemaRegistry],
(res: CompileMetadataResolver, schema: ElementSchemaRegistry) => {
resolver = res;
parser = new AnimationParser(schema);
}));
const parser = new AnimationParser();
const compiler = new AnimationCompiler();
var compileAnimations =

109
modules/@angular/compiler/test/animation/animation_parser_spec.ts
View File

@ -13,6 +13,7 @@ import {expect} from '@angular/platform-browser/testing/matchers';
import {AnimationEntryAst, AnimationGroupAst, AnimationKeyframeAst, AnimationSequenceAst, AnimationStepAst, AnimationStylesAst} from '../../src/animation/animation_ast';
import {AnimationParser} from '../../src/animation/animation_parser';
import {CompileMetadataResolver} from '../../src/metadata_resolver';
import {ElementSchemaRegistry} from '../../src/schema/element_schema_registry';
import {FILL_STYLE_FLAG, flattenStyles} from '../private_import_core';
export function main() {
@ -39,13 +40,18 @@ export function main() {
};
var resolver: CompileMetadataResolver;
beforeEach(
inject([CompileMetadataResolver], (res: CompileMetadataResolver) => { resolver = res; }));
var schema: ElementSchemaRegistry;
beforeEach(inject(
[CompileMetadataResolver, ElementSchemaRegistry],
(res: CompileMetadataResolver, sch: ElementSchemaRegistry) => {
resolver = res;
schema = sch;
}));
var parseAnimation = (data: AnimationMetadata[]) => {
const entry = trigger('myAnimation', [transition('state1 => state2', sequence(data))]);
const compiledAnimationEntry = resolver.getAnimationEntryMetadata(entry);
const parser = new AnimationParser();
const parser = new AnimationParser(schema);
return parser.parseEntry(compiledAnimationEntry);
};
@ -59,21 +65,21 @@ export function main() {
it('should merge repeated style steps into a single style ast step entry', () => {
var ast = parseAnimationAst([
style({'color': 'black'}), style({'background': 'red'}), style({'opacity': 0}),
animate(1000, style({'color': 'white', 'background': 'black', 'opacity': 1}))
style({'color': 'black'}), style({'background': 'red'}), style({'opacity': '0'}),
animate(1000, style({'color': 'white', 'background': 'black', 'opacity': '1'}))
]);
expect(ast.steps.length).toEqual(1);
var step = <AnimationStepAst>ast.steps[0];
expect(step.startingStyles.styles[0])
.toEqual({'color': 'black', 'background': 'red', 'opacity': 0});
.toEqual({'color': 'black', 'background': 'red', 'opacity': '0'});
expect(step.keyframes[0].styles.styles[0])
.toEqual({'color': 'black', 'background': 'red', 'opacity': 0});
.toEqual({'color': 'black', 'background': 'red', 'opacity': '0'});
expect(step.keyframes[1].styles.styles[0])
.toEqual({'color': 'white', 'background': 'black', 'opacity': 1});
.toEqual({'color': 'white', 'background': 'black', 'opacity': '1'});
});
it('should animate only the styles requested within an animation step', () => {
@ -93,7 +99,7 @@ export function main() {
it('should populate the starting and duration times propertly', () => {
var ast = parseAnimationAst([
style({'color': 'black', 'opacity': 1}),
style({'color': 'black', 'opacity': '1'}),
animate(1000, style({'color': 'red'})),
animate(4000, style({'color': 'yellow'})),
sequence(
@ -144,13 +150,13 @@ export function main() {
it('should apply the correct animate() styles when parallel animations are active and use the same properties',
() => {
var details = parseAnimation([
style({'opacity': 0, 'color': 'red'}), group([
style({'opacity': '0', 'color': 'red'}), group([
sequence([
animate(2000, style({'color': 'black'})),
animate(2000, style({'opacity': 0.5})),
animate(2000, style({'opacity': '0.5'})),
]),
sequence([
animate(2000, style({'opacity': 0.8})),
animate(2000, style({'opacity': '0.8'})),
animate(2000, style({'color': 'blue'}))
])
])
@ -169,10 +175,10 @@ export function main() {
expect(collectStepStyles(sq1a1)).toEqual([{'color': 'red'}, {'color': 'black'}]);
var sq1a2 = <AnimationStepAst>sq1.steps[1];
expect(collectStepStyles(sq1a2)).toEqual([{'opacity': 0.8}, {'opacity': 0.5}]);
expect(collectStepStyles(sq1a2)).toEqual([{'opacity': '0.8'}, {'opacity': '0.5'}]);
var sq2a1 = <AnimationStepAst>sq2.steps[0];
expect(collectStepStyles(sq2a1)).toEqual([{'opacity': 0}, {'opacity': 0.8}]);
expect(collectStepStyles(sq2a1)).toEqual([{'opacity': '0'}, {'opacity': '0.8'}]);
var sq2a2 = <AnimationStepAst>sq2.steps[1];
expect(collectStepStyles(sq2a2)).toEqual([{'color': 'black'}, {'color': 'blue'}]);
@ -180,8 +186,8 @@ export function main() {
it('should throw errors when animations animate a CSS property at the same time', () => {
var animation1 = parseAnimation([
style({'opacity': 0}),
group([animate(1000, style({'opacity': 1})), animate(2000, style({'opacity': 0.5}))])
style({'opacity': '0'}),
group([animate(1000, style({'opacity': '1'})), animate(2000, style({'opacity': '0.5'}))])
]);
var errors1 = animation1.errors;
@ -205,23 +211,24 @@ export function main() {
it('should return an error when an animation style contains an invalid timing value', () => {
var errors = parseAnimationAndGetErrors(
[style({'opacity': 0}), animate('one second', style({'opacity': 1}))]);
[style({'opacity': '0'}), animate('one second', style({'opacity': '1'}))]);
expect(errors[0].msg).toContainError(`The provided timing value "one second" is invalid.`);
});
it('should collect and return any errors collected when parsing the metadata', () => {
var errors = parseAnimationAndGetErrors([
style({'opacity': 0}), animate('one second', style({'opacity': 1})), style({'opacity': 0}),
animate('one second', null), style({'background': 'red'})
style({'opacity': '0'}), animate('one second', style({'opacity': '1'})),
style({'opacity': '0'}), animate('one second', null), style({'background': 'red'})
]);
expect(errors.length).toBeGreaterThan(1);
});
it('should normalize a series of keyframe styles into a list of offset steps', () => {
var ast = parseAnimationAst([animate(1000, keyframes([
style({'width': 0}), style({'width': 25}),
style({'width': 50}), style({'width': 75})
]))]);
var ast =
parseAnimationAst([animate(1000, keyframes([
style({'width': '0'}), style({'width': '25px'}),
style({'width': '50px'}), style({'width': '75px'})
]))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.keyframes.length).toEqual(4);
@ -233,11 +240,11 @@ export function main() {
});
it('should use an existing collection of offset steps if provided', () => {
var ast = parseAnimationAst(
[animate(1000, keyframes([
style({'height': 0, 'offset': 0}), style({'height': 25, 'offset': 0.6}),
style({'height': 50, 'offset': 0.7}), style({'height': 75, 'offset': 1})
]))]);
var ast = parseAnimationAst([animate(
1000, keyframes([
style({'height': '0', 'offset': 0}), style({'height': '25px', 'offset': 0.6}),
style({'height': '50px', 'offset': 0.7}), style({'height': '75px', 'offset': 1})
]))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.keyframes.length).toEqual(4);
@ -251,24 +258,25 @@ export function main() {
it('should sort the provided collection of steps that contain offsets', () => {
var ast = parseAnimationAst([animate(
1000, keyframes([
style({'opacity': 0, 'offset': 0.9}), style({'opacity': .25, 'offset': 0}),
style({'opacity': .50, 'offset': 1}), style({'opacity': .75, 'offset': 0.91})
style({'opacity': '0', 'offset': 0.9}), style({'opacity': '0.25', 'offset': 0}),
style({'opacity': '0.50', 'offset': 1}),
style({'opacity': '0.75', 'offset': 0.91})
]))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.keyframes.length).toEqual(4);
expect(step.keyframes[0].offset).toEqual(0);
expect(step.keyframes[0].styles.styles[0]['opacity']).toEqual(.25);
expect(step.keyframes[0].styles.styles[0]['opacity']).toEqual('0.25');
expect(step.keyframes[1].offset).toEqual(0.9);
expect(step.keyframes[1].styles.styles[0]['opacity']).toEqual(0);
expect(step.keyframes[1].styles.styles[0]['opacity']).toEqual('0');
expect(step.keyframes[2].offset).toEqual(0.91);
expect(step.keyframes[2].styles.styles[0]['opacity']).toEqual(.75);
expect(step.keyframes[2].styles.styles[0]['opacity']).toEqual('0.75');
expect(step.keyframes[3].offset).toEqual(1);
expect(step.keyframes[3].styles.styles[0]['opacity']).toEqual(.50);
expect(step.keyframes[3].styles.styles[0]['opacity']).toEqual('0.50');
});
it('should throw an error if a partial amount of keyframes contain an offset', () => {
@ -302,7 +310,7 @@ export function main() {
it('should copy over any missing styles to the final keyframe if not already defined', () => {
var ast = parseAnimationAst([animate(
1000, keyframes([
style({'color': 'white', 'border-color': 'white'}),
style({'color': 'white', 'borderColor': 'white'}),
style({'color': 'red', 'background': 'blue'}), style({'background': 'blue'})
]))]);
@ -312,20 +320,17 @@ export function main() {
var kf3 = keyframesStep.keyframes[2];
expect(flattenStyles(kf3.styles.styles))
.toEqual({'background': 'blue', 'color': 'red', 'border-color': 'white'});
.toEqual({'background': 'blue', 'color': 'red', 'borderColor': 'white'});
});
it('should create an initial keyframe if not detected and place all keyframes styles there',
() => {
var ast = parseAnimationAst(
[animate(1000, keyframes([
style({'color': 'white', 'background': 'black', 'offset': 0.5}), style({
'color': 'orange',
'background': 'red',
'font-size': '100px',
'offset': 1
})
]))]);
var ast = parseAnimationAst([animate(
1000, keyframes([
style({'color': 'white', 'background': 'black', 'offset': 0.5}),
style(
{'color': 'orange', 'background': 'red', 'fontSize': '100px', 'offset': 1})
]))]);
var keyframesStep = <AnimationStepAst>ast.steps[0];
expect(keyframesStep.keyframes.length).toEqual(3);
@ -335,7 +340,7 @@ export function main() {
expect(kf1.offset).toEqual(0);
expect(flattenStyles(kf1.styles.styles)).toEqual({
'font-size': FILL_STYLE_FLAG,
'fontSize': FILL_STYLE_FLAG,
'background': FILL_STYLE_FLAG,
'color': FILL_STYLE_FLAG
});
@ -353,7 +358,7 @@ export function main() {
style({
'color': 'orange',
'background': 'red',
'font-size': '100px',
'fontSize': '100px',
'offset': 0.5
})
]))]);
@ -369,13 +374,13 @@ export function main() {
'color': 'orange',
'background': 'red',
'transform': 'rotate(360deg)',
'font-size': '100px'
'fontSize': '100px'
});
});
describe('easing / duration / delay', () => {
it('should parse simple string-based values', () => {
var ast = parseAnimationAst([animate('1s .5s ease-out', style({'opacity': 1}))]);
var ast = parseAnimationAst([animate('1s .5s ease-out', style({'opacity': '1'}))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.duration).toEqual(1000);
@ -384,7 +389,7 @@ export function main() {
});
it('should parse a numeric duration value', () => {
var ast = parseAnimationAst([animate(666, style({'opacity': 1}))]);
var ast = parseAnimationAst([animate(666, style({'opacity': '1'}))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.duration).toEqual(666);
@ -393,7 +398,7 @@ export function main() {
});
it('should parse an easing value without a delay', () => {
var ast = parseAnimationAst([animate('5s linear', style({'opacity': 1}))]);
var ast = parseAnimationAst([animate('5s linear', style({'opacity': '1'}))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.duration).toEqual(5000);
@ -403,7 +408,7 @@ export function main() {
it('should parse a complex easing value', () => {
var ast =
parseAnimationAst([animate('30ms cubic-bezier(0, 0,0, .69)', style({'opacity': 1}))]);
parseAnimationAst([animate('30ms cubic-bezier(0, 0,0, .69)', style({'opacity': '1'}))]);
var step = <AnimationStepAst>ast.steps[0];
expect(step.duration).toEqual(30);

39
modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts
View File

@ -192,5 +192,44 @@ If 'onAnything' is a directive input, make sure the directive is imported by the
});
}
describe('normalizeAnimationStyleProperty', () => {
it('should normalize the given CSS property to camelCase', () => {
expect(registry.normalizeAnimationStyleProperty('border-radius')).toBe('borderRadius');
expect(registry.normalizeAnimationStyleProperty('zIndex')).toBe('zIndex');
expect(registry.normalizeAnimationStyleProperty('-webkit-animation'))
.toBe('WebkitAnimation');
});
});
describe('normalizeAnimationStyleValue', () => {
it('should normalize the given dimensional CSS style value to contain a PX value when numeric',
() => {
expect(
registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', 10)['value'])
.toBe('10px');
});
it('should not normalize any values that are of zero', () => {
expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0)['value']).toBe('0');
expect(registry.normalizeAnimationStyleValue('width', 'width', 0)['value']).toBe('0');
});
it('should retain the given dimensional CSS style value\'s unit if it already exists', () => {
expect(
registry.normalizeAnimationStyleValue('borderRadius', 'border-radius', '10em')['value'])
.toBe('10em');
});
it('should trim the provided CSS style value', () => {
expect(registry.normalizeAnimationStyleValue('color', 'color', ' red ')['value'])
.toBe('red');
});
it('should stringify all non dimensional numeric style values', () => {
expect(registry.normalizeAnimationStyleValue('zIndex', 'zIndex', 10)['value']).toBe('10');
expect(registry.normalizeAnimationStyleValue('opacity', 'opacity', 0.5)['value'])
.toBe('0.5');
});
});
});
}

6
modules/@angular/compiler/testing/schema_registry_mock.ts
View File

@ -54,4 +54,10 @@ export class MockSchemaRegistry implements ElementSchemaRegistry {
return {error: false};
}
}
normalizeAnimationStyleProperty(propName: string): string { return propName; }
normalizeAnimationStyleValue(camelCaseProp: string, userProvidedProp: string, val: string|number):
{error: string, value: string} {
return {error: null, value: val.toString()};
}
}