fix($animate): ensure ms durations are properly rounded

Closes #5113
Closes #5162

2 files changed, 28 insertions, 1 deletions

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index bbe056ed..18796ba9 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -865,6 +865,7 @@ angular.module('ngAnimate', ['ng'])
       var NG_ANIMATE_CSS_DATA_KEY = '$$ngAnimateCSS3Data';
       var NG_ANIMATE_FALLBACK_CLASS_NAME = 'ng-animate-start';
       var NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME = 'ng-animate-active';
+      var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
 
       var lookupCache = {};
       var parentCounter = 0;
@@ -1118,6 +1119,11 @@ angular.module('ngAnimate', ['ng'])
           event.stopPropagation();
           var ev = event.originalEvent || event;
           var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now();
+          
+          /* Firefox (or possibly just Gecko) likes to not round values up
+           * when a ms measurement is used for the animation */
+          var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
+
           /* $manualTimeStamp is a mocked timeStamp value which is set
            * within browserTrigger(). This is only here so that tests can
            * mock animations properly. Real events fallback to event.timeStamp,
@@ -1125,7 +1131,7 @@ angular.module('ngAnimate', ['ng'])
            * We're checking to see if the timeStamp surpasses the expected delay,
            * but we're using elapsedTime instead of the timeStamp on the 2nd
            * pre-condition since animations sometimes close off early */
-          if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && ev.elapsedTime >= maxDuration) {
+          if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
             activeAnimationComplete();
           }
         }
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index b4635bd0..b3068470 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -2852,5 +2852,26 @@ describe("ngAnimate", function() {
         $timeout.flush();
       });
     });
+
+    it('should round up long elapsedTime values to close off a CSS3 animation',
+      inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout, $window) {
+        if (!$sniffer.animations) return;
+
+        ss.addRule('.millisecond-transition.ng-leave', '-webkit-transition:510ms linear all;' +
+                                                       'transition:510ms linear all;');
+
+        var element = $compile('<div class="millisecond-transition"></div>')($rootScope);
+        $rootElement.append(element);
+        jqLite($document[0].body).append($rootElement);
+
+        $animate.leave(element);
+        $rootScope.$digest();
+
+        $timeout.flush();
+
+        browserTrigger(element, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 0.50999999991 });
+
+        expect($rootElement.children().length).toBe(0);
+    }));
   });
 });