fix:(animator): Correctly handle multiple durations

In case multiple durations are specified like so:

 transition-duration: 0.5s, 3000ms;
 transition-property: left, height;

The animator will pick the longest duration.

Fixes angular#2373

Author: cburgdorf

src/ng/animator.js

@@ -261,6 +261,17 @@ var $AnimatorProvider = function() {
               // $window.setTimeout(beginAnimation, 0); this was causing the element not to animate
               // keep at 1 for animation dom rerender
               $window.setTimeout(beginAnimation, 1);
+
+              function getMaxDuration(durationString){
+                if (isUndefined(durationString)){
+                  return 0;
+                }
+
+                var normalizedValues = map(durationString.split(','), function(val){
+                  return parseFloat(val);
+                });
+                return Math.max.apply(null, normalizedValues);
+              }
 
               function beginAnimation() {
                 element.addClass(startClass);
@@ -276,8 +287,8 @@ var $AnimatorProvider = function() {
                   forEach(element, function(element) {
                     var globalStyles = $window.getComputedStyle(element) || {};
                     duration = Math.max(
-                        parseFloat(globalStyles[w3cTransitionProp    + durationKey]) ||
-                        parseFloat(globalStyles[vendorTransitionProp + durationKey]) ||
+                        getMaxDuration(globalStyles[w3cTransitionProp    + durationKey]) ||
+                        getMaxDuration(globalStyles[vendorTransitionProp + durationKey]) ||
                         0,
                         duration);
                   });

test/ng/animatorSpec.js

@@ -309,10 +309,10 @@ describe("$animator", function() {
       })
     });
 
-    it("should skip animations if disabled and run when enabled",
-        inject(function($animator, $rootScope, $compile, $sniffer) {
+  it("should skip animations if disabled and run when enabled picking the longest specified duration",
+    inject(function($animator, $rootScope, $compile, $sniffer) {
       $animator.enabled(false);
-      element = $compile(html('<div style="' + vendorPrefix + 'transition: 1s linear all">1</div>'))($rootScope);
+      element = $compile(html('<div style="' + vendorPrefix + 'transition-duration: 1s, 2000ms, 1s; ' + vendorPrefix + 'transition-property: height, left, opacity">foo</div>'))($rootScope);
       var animator = $animator($rootScope, {
         ngAnimate : '{show: \'inline-show\'}'
       });
@@ -330,10 +330,11 @@ describe("$animator", function() {
       animator.show(element);
       if ($sniffer.supportsTransitions) {
         window.setTimeout.expect(1).process();
-        window.setTimeout.expect(1000).process();
+        window.setTimeout.expect(2000).process();
       }
       expect(element[0].style.display).toBe('');
     }));
+
   });
 
   it("should throw an error when an invalid ng-animate syntax is provided", inject(function($compile, $rootScope) {