fix(animations): ensure the web-animations driver converts style props to camel-case

The web animations API now requires that all styles are converted to
camel case. Chrome has already made this breaking change and hyphenated
styles are not functional anymore.

Closes #9111
Closes #9112

modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts

@@ -0,0 +1,78 @@
+import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
+import {el} from '@angular/platform-browser/testing';
+
+import {AnimationKeyframe, AnimationStyles} from '../../core_private';
+import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
+import {WebAnimationsDriver} from '../../src/dom/web_animations_driver';
+import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
+
+class ExtendedWebAnimationsDriver extends WebAnimationsDriver {
+  public log: {[key: string]: any}[] = [];
+
+  constructor() { super(); }
+
+  _triggerWebAnimation(elm: any, keyframes: any[], options: any): DomAnimatePlayer {
+    this.log.push({'elm': elm, 'keyframes': keyframes, 'options': options});
+    return new MockDomAnimatePlayer();
+  }
+}
+
+function _makeStyles(styles: {[key: string]: string | number}): AnimationStyles {
+  return new AnimationStyles([styles]);
+}
+
+function _makeKeyframe(
+    offset: number, styles: {[key: string]: string | number}): AnimationKeyframe {
+  return new AnimationKeyframe(offset, _makeStyles(styles));
+}
+
+export function main() {
+  describe('WebAnimationsDriver', () => {
+    var driver: ExtendedWebAnimationsDriver;
+    var elm: HTMLElement;
+    beforeEach(() => {
+      driver = new ExtendedWebAnimationsDriver();
+      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'})
+      ];
+
+      driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
+      var details = driver.log.pop();
+      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'})];
+
+      driver.animate(elm, startingStyles, styles, 0, 0, 'linear');
+      var details = driver.log.pop();
+      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');
+    });
+  });
+}

modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts

@@ -1,40 +1,7 @@
 import {AsyncTestCompleter, MockAnimationPlayer, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
 
-import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
 import {WebAnimationsPlayer} from '../../src/dom/web_animations_player';
-import {isPresent} from '../../src/facade/lang';
-
-export class MockDomAnimatePlayer implements DomAnimatePlayer {
-  public captures: {[key: string]: any[]} = {};
-  private _position: number = 0;
-  private _onfinish = () => {};
-  public currentTime: number;
-
-  _capture(method: string, data: any) {
-    if (!isPresent(this.captures[method])) {
-      this.captures[method] = [];
-    }
-    this.captures[method].push(data);
-  }
-
-  cancel() { this._capture('cancel', null); }
-  play() { this._capture('play', null); }
-  pause() { this._capture('pause', null); }
-  finish() {
-    this._capture('finish', null);
-    this._onfinish();
-  }
-  set onfinish(fn) {
-    this._capture('onfinish', fn);
-    this._onfinish = fn;
-  }
-  get onfinish() { return this._onfinish; }
-  set position(val) {
-    this._capture('position', val);
-    this._position = val;
-  }
-  get position() { return this._position; }
-}
+import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
 
 export function main() {
   function makePlayer(): {[key: string]: any} {