fix($animate): ensure addClass/removeClass animations do not snap during reflow

Closes #4892

1 files changed, 30 insertions, 0 deletions

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 48ea0041..b9b7f9ed 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -2515,6 +2515,36 @@ describe("ngAnimate", function() {
     expect(element.hasClass('yellow-add')).toBe(true);
   }));
 
+  it("should cancel and perform the dom operation only after the reflow has run",
+    inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {
+
+    if (!$sniffer.transitions) return;
+
+    ss.addRule('.green-add', '-webkit-transition:1s linear all;' +
+                                     'transition:1s linear all;');
+
+    ss.addRule('.red-add', '-webkit-transition:1s linear all;' +
+                                   'transition:1s linear all;');
+
+    var element = $compile('<div></div>')($rootScope);
+    $rootElement.append(element);
+    jqLite($document[0].body).append($rootElement);
+
+    $animate.addClass(element, 'green');
+    expect(element.hasClass('green-add')).toBe(true);
+
+    $animate.addClass(element, 'red');
+    expect(element.hasClass('red-add')).toBe(true);
+
+    expect(element.hasClass('green')).toBe(false);
+    expect(element.hasClass('red')).toBe(false);
+
+    $timeout.flush();
+
+    expect(element.hasClass('green')).toBe(true);
+    expect(element.hasClass('red')).toBe(true);
+  }));
+
   it('should enable and disable animations properly on the root element', function() {
     var count = 0;
     module(function($animateProvider) {