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

Closes #11582
Closes #12481
Closes #12755

modules/@angular/compiler/src/schema/dom_element_schema_registry.ts

@@ -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;
+  }
 }

modules/@angular/compiler/src/schema/element_schema_registry.ts

@@ -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};
 }