fix(progress-circular): use a non-flushable requestAnimationFrame

Reverts to using the plain `requestAnimationFrame`, instead of `$$rAF`, in order to avoid infinite loops when calling `$animate.flush`.

Closes #7936

Author: crisbeto

src/components/progressCircular/js/progressCircularDirective.js

@@ -48,9 +48,13 @@ angular
   .directive('mdProgressCircular', MdProgressCircularDirective);
 
 /* @ngInject */
-function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdTheming,
+function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
                                      $mdUtil, $interval, $log) {
 
+  // Note that this shouldn't use use $$rAF, because it can cause an infinite loop
+  // in any tests that call $animate.flush.
+  var rAF = $window.requestAnimationFrame || angular.noop;
+  var cAF = $window.cancelAnimationFrame || angular.noop;
   var DEGREE_IN_RADIANS = $window.Math.PI / 180;
   var MODE_DETERMINATE = 'determinate';
   var MODE_INDETERMINATE = 'indeterminate';
@@ -110,8 +114,12 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdThe
       startIndeterminateAnimation();
     }
 
-    scope.$on('$destroy', function() {
-      cleanupIndeterminateAnimation(true);
+    scope.$on('$destroy', function(){
+      cleanupIndeterminateAnimation();
+
+      if (lastDrawFrame) {
+        cAF(lastDrawFrame);
+      }
     });
 
     scope.$watchGroup(['value', 'mdMode', function() {
@@ -147,7 +155,7 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdThe
         } else {
           var newValue = clamp(newValues[0]);
 
-          cleanupIndeterminateAnimation( true );
+          cleanupIndeterminateAnimation();
 
           element.attr('aria-valuenow', newValue);
           renderCircle(clamp(oldValues[0]), newValue);
@@ -200,7 +208,7 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdThe
       if (animateTo === animateFrom) {
         path.attr('d', getSvgArc(animateTo, diameter, pathDiameter, rotation));
       } else {
-        lastDrawFrame = $$rAF(function animation(now) {
+        lastDrawFrame = rAF(function animation(now) {
           var currentTime = $window.Math.max(0, $window.Math.min((now || $mdUtil.now()) - startTime, animationDuration));
 
           path.attr('d', getSvgArc(
@@ -210,11 +218,9 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdThe
             rotation
           ));
 
-          lastDrawFrame && lastDrawFrame();
-
           // Do not allow overlapping animations
           if (id === lastAnimationId && currentTime < animationDuration) {
-            lastDrawFrame = $$rAF(animation);
+            lastDrawFrame = rAF(animation);
           }
         });
       }
@@ -256,17 +262,12 @@ function MdProgressCircularDirective($$rAF, $window, $mdProgressCircular, $mdThe
       }
     }
 
-    function cleanupIndeterminateAnimation( clearLastFrames ) {
+    function cleanupIndeterminateAnimation() {
       if (interval) {
         $interval.cancel(interval);
         interval = null;
         element.removeClass(INDETERMINATE_CLASS);
       }
-
-      if ( clearLastFrames === true ){
-        lastDrawFrame && lastDrawFrame();
-        lastDrawFrame = undefined;
-      }
     }
   }
 

src/components/progressCircular/progress-circular.spec.js

@@ -106,11 +106,6 @@ describe('mdProgressCircular', function() {
     expect(element.hasClass('_md-progress-circular-disabled')).toBe(true);
   });
 
-  it('should not throw the browser in an infinite loop when flushing the animations', inject(function($animate) {
-    var progress = buildIndicator('<md-progress-circular md-mode="indeterminate"></md-progress-circular>');
-    $animate.flush();
-  }));
-
   it('should set the transform origin in all dimensions', function() {
     var svg = buildIndicator('<md-progress-circular md-diameter="42px"></md-progress-circular>').find('svg').eq(0);
     expect(svg.css('transform-origin')).toBe('21px 21px 21px');