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

Closes #11582
Closes #12481
Closes #12755

modules/@angular/platform-browser/src/dom/web_animations_driver.ts

@@ -6,13 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AUTO_STYLE} from '@angular/core';
-
 import {isPresent} from '../facade/lang';
 import {AnimationKeyframe, AnimationStyles} from '../private_import_core';
 
 import {AnimationDriver} from './animation_driver';
-import {dashCaseToCamelCase} from './util';
 import {WebAnimationsPlayer} from './web_animations_player';
 
 export class WebAnimationsDriver implements AnimationDriver {
@@ -63,14 +60,8 @@ function _populateStyles(
     element: any, styles: AnimationStyles,
     defaultStyles: {[key: string]: string | number}): {[key: string]: string | number} {
   var data: {[key: string]: string | number} = {};
-  styles.styles.forEach((entry) => {
-    Object.keys(entry).forEach(prop => {
-      const val = entry[prop];
-      var formattedProp = dashCaseToCamelCase(prop);
-      data[formattedProp] =
-          val == AUTO_STYLE ? val : val.toString() + _resolveStyleUnit(val, prop, formattedProp);
-    });
-  });
+  styles.styles.forEach(
+      (entry) => { Object.keys(entry).forEach(prop => { data[prop] = entry[prop]; }); });
   Object.keys(defaultStyles).forEach(prop => {
     if (!isPresent(data[prop])) {
       data[prop] = defaultStyles[prop];
@@ -78,66 +69,3 @@ function _populateStyles(
   });
   return data;
 }
-
-function _resolveStyleUnit(
-    val: string | number, userProvidedProp: string, formattedProp: string): string {
-  var unit = '';
-  if (_isPixelDimensionStyle(formattedProp) && val != 0 && val != '0') {
-    if (typeof val === 'number') {
-      unit = 'px';
-    } else if (_findDimensionalSuffix(val.toString()).length == 0) {
-      throw new Error('Please provide a CSS unit value for ' + userProvidedProp + ':' + val);
-    }
-  }
-  return unit;
-}
-
-const _$0 = 48;
-const _$9 = 57;
-const _$PERIOD = 46;
-
-function _findDimensionalSuffix(value: string): string {
-  for (var i = 0; i < value.length; i++) {
-    var c = value.charCodeAt(i);
-    if ((c >= _$0 && c <= _$9) || c == _$PERIOD) continue;
-    return value.substring(i, value.length);
-  }
-  return '';
-}
-
-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/platform-browser/test/dom/web_animations_driver_spec.ts

@@ -45,46 +45,6 @@ export function main() {
       elm = el('<div></div>');
     });
 
-    it('should convert all styles to camelcase', () => {
-      var startingStyles = _makeStyles({'border-top-right': '40px'});
-      var styles = [
-        _makeKeyframe(0, {'max-width': '100px', 'height': '200px'}),
-        _makeKeyframe(1, {'font-size': '555px'})
-      ];
-
-      var player = driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
-      var details = _formatOptions(player);
-      var startKeyframe = details['keyframes'][0];
-      var firstKeyframe = details['keyframes'][1];
-      var lastKeyframe = details['keyframes'][2];
-
-      expect(startKeyframe['borderTopRight']).toEqual('40px');
-
-      expect(firstKeyframe['maxWidth']).toEqual('100px');
-      expect(firstKeyframe['max-width']).toBeFalsy();
-      expect(firstKeyframe['height']).toEqual('200px');
-
-      expect(lastKeyframe['fontSize']).toEqual('555px');
-      expect(lastKeyframe['font-size']).toBeFalsy();
-    });
-
-    it('should auto prefix numeric properties with a `px` value', () => {
-      var startingStyles = _makeStyles({'borderTopWidth': 40});
-      var styles = [_makeKeyframe(0, {'font-size': 100}), _makeKeyframe(1, {'height': '555em'})];
-
-      var player = driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
-      var details = _formatOptions(player);
-      var startKeyframe = details['keyframes'][0];
-      var firstKeyframe = details['keyframes'][1];
-      var lastKeyframe = details['keyframes'][2];
-
-      expect(startKeyframe['borderTopWidth']).toEqual('40px');
-
-      expect(firstKeyframe['fontSize']).toEqual('100px');
-
-      expect(lastKeyframe['height']).toEqual('555em');
-    });
-
     it('should use a fill mode of `both`', () => {
       var startingStyles = _makeStyles({});
       var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];