angular.js/test/ngAnimate/animateSpec.js

'use strict';

describe("ngAnimate", function() {

  beforeEach(module('ngAnimate'));


  it("should disable animations on bootstrap for structural animations even after the first digest has passed", function() {
    var hasBeenAnimated = false;
    module(function($animateProvider) {
      $animateProvider.register('.my-structrual-animation', function() {
        return {
          enter : function(element, done) {
            hasBeenAnimated = true;
            done();
          },
          leave : function(element, done) {
            hasBeenAnimated = true;
            done();
          }
        }
      });
    });
    inject(function($rootScope, $compile, $animate, $rootElement, $document) {
      var element = $compile('<div class="my-structrual-animation">...</div>')($rootScope);
      $rootElement.append(element);
      jqLite($document[0].body).append($rootElement);

      $animate.enter(element, $rootElement);
      $rootScope.$digest();

      expect(hasBeenAnimated).toBe(false);

      $animate.leave(element);
      $rootScope.$digest();

      expect(hasBeenAnimated).toBe(true);
    });
  });


  //we use another describe block because the before/after operations below
  //are used across all animations tests and we don't want that same behavior
  //to be used on the root describe block at the start of the animateSpec.js file
  describe('', function() {

    var ss, body;
    beforeEach(module(function() {
      body = jqLite(document.body);
      return function($window, $document, $animate, $timeout, $rootScope) {
        ss = createMockStyleSheet($document, $window);
        try {
          $timeout.flush();
        } catch(e) {}
        $animate.enabled(true);
        $rootScope.$digest();
      };
    }));

    afterEach(function(){
      if(ss) {
        ss.destroy();
      }
      dealoc(body);
    });


    describe("$animate", function() {

      var element, $rootElement;

      function html(html) {
        body.append($rootElement);
        $rootElement.html(html);
        element = $rootElement.children().eq(0);
        return element;
      }

      describe("enable / disable", function() {

        it("should work for all animations", inject(function($animate) {

          expect($animate.enabled()).toBe(true);

          expect($animate.enabled(0)).toBe(false);
          expect($animate.enabled()).toBe(false);

          expect($animate.enabled(1)).toBe(true);
          expect($animate.enabled()).toBe(true);
        }));


        it('should place a hard disable on all child animations', function() {
          var count = 0;
          module(function($animateProvider) {
            $animateProvider.register('.animated', function() {
              return {
                addClass : function(element, className, done) {
                  count++;
                  done();
                }
              }
            });
          });
          inject(function($compile, $rootScope, $animate, $sniffer, $rootElement, $timeout) {
            $animate.enabled(true);

            var elm1 = $compile('<div class="animated"></div>')($rootScope);
            var elm2 = $compile('<div class="animated"></div>')($rootScope);
            $rootElement.append(elm1);
            angular.element(document.body).append($rootElement);

            $animate.addClass(elm1, 'klass');
            expect(count).toBe(1);

            $animate.enabled(false);

            $animate.addClass(elm1, 'klass2');
            expect(count).toBe(1);

            $animate.enabled(true);

            elm1.append(elm2);

            $animate.addClass(elm2, 'klass');
            expect(count).toBe(2);

            $animate.enabled(false, elm1);

            $animate.addClass(elm2, 'klass2');
            expect(count).toBe(2);

            var root = angular.element($rootElement[0]);
            $rootElement.addClass('animated');
            $animate.addClass(root, 'klass2');
            expect(count).toBe(3);
          });
        });


        it('should skip animations if the element is attached to the $rootElement', function() {
          var count = 0;
          module(function($animateProvider) {
            $animateProvider.register('.animated', function() {
              return {
                addClass : function(element, className, done) {
                  count++;
                  done();
                }
              }
            });
          });
          inject(function($compile, $rootScope, $animate, $sniffer, $rootElement, $timeout) {
            $animate.enabled(true);

            var elm1 = $compile('<div class="animated"></div>')($rootScope);

            $animate.addClass(elm1, 'klass2');
            expect(count).toBe(0);
          });
        });


        it('should check enable/disable animations up until the $rootElement element', function() {
          var rootElm = jqLite('<div></div>');

          var captured = false;
          module(function($provide, $animateProvider) {
            $provide.value('$rootElement', rootElm);
            $animateProvider.register('.capture-animation', function() {
              return {
                addClass : function(element, className, done) {
                  captured = true;
                  done();
                }
              }
            });
          });
          inject(function($animate, $rootElement, $rootScope, $compile, $timeout) {
            var initialState;
            angular.bootstrap(rootElm, ['ngAnimate']);

            $animate.enabled(true);

            var element = $compile('<div class="capture-animation"></div>')($rootScope);
            rootElm.append(element);

            expect(captured).toBe(false);
            $animate.addClass(element, 'red');
            expect(captured).toBe(true);

            captured = false;
            $animate.enabled(false);

            $animate.addClass(element, 'blue');
            expect(captured).toBe(false);

            //clean up the mess
            $animate.enabled(false, rootElm);
            dealoc(rootElm);
          });
        });
      });


      describe("with polyfill", function() {

        var child, after;

        beforeEach(function() {
          module(function($animateProvider) {
            $animateProvider.register('.custom', function() {
              return {
                start: function(element, done) {
                  done();
                }
              }
            });
           $animateProvider.register('.custom-delay', function($timeout) {
              function animate(element, done) {
                done = arguments.length == 3 ? arguments[2] : done;
                $timeout(done, 2000, false);
                return function() {
                  element.addClass('animation-cancelled');
                }
              }
              return {
                leave : animate,
                addClass : animate,
                removeClass : animate
              }
            });
           $animateProvider.register('.custom-long-delay', function($timeout) {
              function animate(element, done) {
                done = arguments.length == 3 ? arguments[2] : done;
                $timeout(done, 20000, false);
                return function(cancelled) {
                  element.addClass(cancelled ? 'animation-cancelled' : 'animation-ended');
                }
              }
              return {
                leave : animate,
                addClass : animate,
                removeClass : animate
              }
            });
           $animateProvider.register('.setup-memo', function() {
              return {
                removeClass: function(element, className, done) {
                  element.text('memento');
                  done();
                }
              }
            });
            return function($animate, $compile, $rootScope, $rootElement) {
              element = $compile('<div></div>')($rootScope);

              forEach(['.ng-hide-add', '.ng-hide-remove', '.ng-enter', '.ng-leave', '.ng-move'], function(selector) {
                ss.addRule(selector, '-webkit-transition:1s linear all;' +
                                             'transition:1s linear all;');
              });

              child = $compile('<div>...</div>')($rootScope);
              jqLite($document[0].body).append($rootElement);
              element.append(child);

              after   = $compile('<div></div>')($rootScope);
              $rootElement.append(element);
            };
          });
        })


        it("should animate the enter animation event",
          inject(function($animate, $rootScope, $sniffer, $timeout) {
          element[0].removeChild(child[0]);

          expect(element.contents().length).toBe(0);
          $animate.enter(child, element);
          $rootScope.$digest();

          if($sniffer.transitions) {
            $timeout.flush();
            expect(child.hasClass('ng-enter')).toBe(true);
            expect(child.hasClass('ng-enter-active')).toBe(true);
            browserTrigger(element, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }

          expect(element.contents().length).toBe(1);
        }));


        it("should animate the leave animation event",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          expect(element.contents().length).toBe(1);
          $animate.leave(child);
          $rootScope.$digest();

          if($sniffer.transitions) {
            $timeout.flush();
            expect(child.hasClass('ng-leave')).toBe(true);
            expect(child.hasClass('ng-leave-active')).toBe(true);
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }

          expect(element.contents().length).toBe(0);
        }));


        it("should animate the move animation event",
          inject(function($animate, $compile, $rootScope, $timeout, $sniffer) {

          $rootScope.$digest();
          element.empty();

          var child1 = $compile('<div>1</div>')($rootScope);
          var child2 = $compile('<div>2</div>')($rootScope);
          element.append(child1);
          element.append(child2);
          expect(element.text()).toBe('12');
          $animate.move(child1, element, child2);
          $rootScope.$digest();
          if($sniffer.transitions) {
            $timeout.flush();
          }
          expect(element.text()).toBe('21');
        }));


        it("should animate the show animation event",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          $rootScope.$digest();
          child.addClass('ng-hide');
          expect(child).toBeHidden();
          $animate.removeClass(child, 'ng-hide');
          if($sniffer.transitions) {
            $timeout.flush();
            expect(child.hasClass('ng-hide-remove')).toBe(true);
            expect(child.hasClass('ng-hide-remove-active')).toBe(true);
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          expect(child.hasClass('ng-hide-remove')).toBe(false);
          expect(child.hasClass('ng-hide-remove-active')).toBe(false);
          expect(child).toBeShown();
        }));


        it("should animate the hide animation event",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          $rootScope.$digest();
          expect(child).toBeShown();
          $animate.addClass(child, 'ng-hide');
          if($sniffer.transitions) {
            $timeout.flush();
            expect(child.hasClass('ng-hide-add')).toBe(true);
            expect(child.hasClass('ng-hide-add-active')).toBe(true);
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          expect(child).toBeHidden();
        }));


        it("should assign the ng-event className to all animation events when transitions/keyframes are used",
          inject(function($animate, $sniffer, $rootScope, $timeout) {

          if (!$sniffer.transitions) return;

          $rootScope.$digest();
          element[0].removeChild(child[0]);

          //enter
          $animate.enter(child, element);
          $rootScope.$digest();
          $timeout.flush();

          expect(child.attr('class')).toContain('ng-enter');
          expect(child.attr('class')).toContain('ng-enter-active');
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          $timeout.flush();

          //move
          element.append(after);
          $animate.move(child, element, after);
          $rootScope.$digest();
          $timeout.flush();

          expect(child.attr('class')).toContain('ng-move');
          expect(child.attr('class')).toContain('ng-move-active');
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          $timeout.flush();

          //hide
          $animate.addClass(child, 'ng-hide');
          $timeout.flush();
          expect(child.attr('class')).toContain('ng-hide-add');
          expect(child.attr('class')).toContain('ng-hide-add-active');
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });

          //show
          $animate.removeClass(child, 'ng-hide');
          $timeout.flush();
          expect(child.attr('class')).toContain('ng-hide-remove');
          expect(child.attr('class')).toContain('ng-hide-remove-active');
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });

          //leave
          $animate.leave(child);
          $rootScope.$digest();
          $timeout.flush();
          expect(child.attr('class')).toContain('ng-leave');
          expect(child.attr('class')).toContain('ng-leave-active');
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
        }));


        it("should not run if animations are disabled",
          inject(function($animate, $rootScope, $timeout, $sniffer) {

          $animate.enabled(false);

          $rootScope.$digest();

          element.addClass('setup-memo');

          element.text('123');
          expect(element.text()).toBe('123');
          $animate.removeClass(element, 'ng-hide');
          expect(element.text()).toBe('123');

          $animate.enabled(true);

          element.addClass('ng-hide');
          $animate.removeClass(element, 'ng-hide');
          if($sniffer.transitions) {
            $timeout.flush();
          }
          expect(element.text()).toBe('memento');
        }));


        it("should only call done() once and right away if another animation takes place in between",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          element.append(child);
          child.addClass('custom-delay');

          expect(element).toBeShown();
          $animate.addClass(child, 'ng-hide');
          if($sniffer.transitions) {
            expect(child).toBeShown();
          }

          $animate.leave(child);
          $rootScope.$digest();
          $timeout.flush();
          expect(child).toBeHidden(); //hides instantly

          //lets change this to prove that done doesn't fire anymore for the previous hide() operation
          child.css('display','block');
          child.removeClass('ng-hide');

          if($sniffer.transitions) {
            expect(element.children().length).toBe(1); //still animating
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          $timeout.flush(2000);
          $timeout.flush(2000);
          expect(child).toBeShown();

          expect(element.children().length).toBe(0);
        }));


        it("should retain existing styles of the animated element",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          element.append(child);
          child.attr('style', 'width: 20px');
          
          $animate.addClass(child, 'ng-hide');
          $animate.leave(child);
          $rootScope.$digest();

          if($sniffer.transitions) {
            $timeout.flush();

            //this is to verify that the existing style is appended with a semicolon automatically 
            expect(child.attr('style')).toMatch(/width: 20px;.+?/i);
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          
          expect(child.attr('style')).toMatch(/width: 20px/i);
        }));


        it("should call the cancel callback when another animation is called on the same element",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          element.append(child);

          child.addClass('custom-delay ng-hide');
          $animate.removeClass(child, 'ng-hide');
          if($sniffer.transitions) {
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          $timeout.flush(2000);

          $animate.addClass(child, 'ng-hide');

          expect(child.hasClass('animation-cancelled')).toBe(true);
        }));


        it("should skip a class-based animation if the same element already has an ongoing structural animation",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          var completed = false;
          $animate.enter(child, element, null, function() {
            completed = true; 
          });
          $rootScope.$digest();

          expect(completed).toBe(false);

          $animate.addClass(child, 'green');
          expect(element.hasClass('green'));

          expect(completed).toBe(false);
          if($sniffer.transitions) {
            $timeout.flush();
            browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          $timeout.flush();

          expect(completed).toBe(true);
        }));


        it("should fire the cancel/end function with the correct flag in the parameters",
          inject(function($animate, $rootScope, $sniffer, $timeout) {

          element.append(child);

          $animate.addClass(child, 'custom-delay');
          $animate.addClass(child, 'custom-long-delay');

          expect(child.hasClass('animation-cancelled')).toBe(true);
          expect(child.hasClass('animation-ended')).toBe(false);

          $timeout.flush();
          expect(child.hasClass('animation-ended')).toBe(true);
        }));


        it("should NOT clobber all data on an element when animation is finished",
          inject(function($animate) {

          child.css('display','none');
          element.data('foo', 'bar');

          $animate.removeClass(element, 'ng-hide');
          $animate.addClass(element, 'ng-hide');
          expect(element.data('foo')).toEqual('bar');
        }));


        it("should allow multiple JS animations which run in parallel",
          inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            $animate.addClass(element, 'custom-delay custom-long-delay');
            $timeout.flush(2000);
            $timeout.flush(20000);
            expect(element.hasClass('custom-delay')).toBe(true);
            expect(element.hasClass('custom-long-delay')).toBe(true);
        }));


        it("should allow both multiple JS and CSS animations which run in parallel",
          inject(function($animate, $rootScope, $compile, $sniffer, $timeout, _$rootElement_) {
          $rootElement = _$rootElement_;

          ss.addRule('.ng-hide-add', '-webkit-transition:1s linear all;' +
                                             'transition:1s linear all;');
          ss.addRule('.ng-hide-remove', '-webkit-transition:1s linear all;' +
                                                'transition:1s linear all;');

          element = $compile(html('<div>1</div>'))($rootScope);
          element.addClass('custom-delay custom-long-delay');
          $rootScope.$digest();

          $animate.removeClass(element, 'ng-hide');

          if($sniffer.transitions) {
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          $timeout.flush(2000);
          $timeout.flush(20000);

          expect(element.hasClass('custom-delay')).toBe(true);
          expect(element.hasClass('custom-delay-add')).toBe(false);
          expect(element.hasClass('custom-delay-add-active')).toBe(false);

          expect(element.hasClass('custom-long-delay')).toBe(true);
          expect(element.hasClass('custom-long-delay-add')).toBe(false);
          expect(element.hasClass('custom-long-delay-add-active')).toBe(false);
        }));
      });


      describe("with CSS3", function() {

        beforeEach(function() {
          module(function() {
            return function(_$rootElement_) {
              $rootElement = _$rootElement_;
            };
          })
        });


        describe("Animations", function() {

          it("should properly detect and make use of CSS Animations",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            ss.addRule('.ng-hide-add',
                           '-webkit-animation: some_animation 4s linear 0s 1 alternate;' +
                                   'animation: some_animation 4s linear 0s 1 alternate;');
            ss.addRule('.ng-hide-remove',
                           '-webkit-animation: some_animation 4s linear 0s 1 alternate;' +
                                   'animation: some_animation 4s linear 0s 1 alternate;');

            element = $compile(html('<div>1</div>'))($rootScope);

            element.addClass('ng-hide');
            expect(element).toBeHidden();

            $animate.removeClass(element, 'ng-hide');
            if ($sniffer.animations) {
              $timeout.flush();
              browserTrigger(element,'animationend', { timeStamp: Date.now() + 4000, elapsedTime: 4 });
            }
            expect(element).toBeShown();
          }));


          it("should properly detect and make use of CSS Animations with multiple iterations",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            var style = '-webkit-animation-duration: 2s;' +
                        '-webkit-animation-iteration-count: 3;' +
                                'animation-duration: 2s;' +
                                'animation-iteration-count: 3;';

            ss.addRule('.ng-hide-add', style);
            ss.addRule('.ng-hide-remove', style);

            element = $compile(html('<div>1</div>'))($rootScope);

            element.addClass('ng-hide');
            expect(element).toBeHidden();

            $animate.removeClass(element, 'ng-hide');
            if ($sniffer.animations) {
              $timeout.flush();
              browserTrigger(element,'animationend', { timeStamp: Date.now() + 6000, elapsedTime: 6 });
            }
            expect(element).toBeShown();
          }));


          it("should not consider the animation delay is provided",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            var style = '-webkit-animation-duration: 2s;' +
                        '-webkit-animation-delay: 10s;' +
                        '-webkit-animation-iteration-count: 5;' +
                                'animation-duration: 2s;' +
                                'animation-delay: 10s;' +
                                'animation-iteration-count: 5;';

            ss.addRule('.ng-hide-add', style);
            ss.addRule('.ng-hide-remove', style);

            element = $compile(html('<div>1</div>'))($rootScope);

            element.addClass('ng-hide');
            expect(element).toBeHidden();

            $animate.removeClass(element, 'ng-hide');
            if ($sniffer.transitions) {
              $timeout.flush();
              browserTrigger(element,'animationend', { timeStamp : Date.now() + 20000, elapsedTime: 10 });
            }
            expect(element).toBeShown();
          }));


          it("should skip animations if disabled and run when enabled",
              inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
            $animate.enabled(false);
            var style = '-webkit-animation: some_animation 2s linear 0s 1 alternate;' +
                                'animation: some_animation 2s linear 0s 1 alternate;';

            ss.addRule('.ng-hide-add', style);
            ss.addRule('.ng-hide-remove', style);

            element = $compile(html('<div>1</div>'))($rootScope);
            element.addClass('ng-hide');
            expect(element).toBeHidden();
            $animate.removeClass(element, 'ng-hide');
            expect(element).toBeShown();
          }));


          it("should finish the previous animation when a new animation is started",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
              var style = '-webkit-animation: some_animation 2s linear 0s 1 alternate;' +
                                  'animation: some_animation 2s linear 0s 1 alternate;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div class="ng-hide">1</div>'))($rootScope);
              element.addClass('custom');

              $animate.removeClass(element, 'ng-hide');

              if($sniffer.animations) {
                $timeout.flush();
                expect(element.hasClass('ng-hide-remove')).toBe(true);
                expect(element.hasClass('ng-hide-remove-active')).toBe(true);
              }

              element.removeClass('ng-hide');
              $animate.addClass(element, 'ng-hide');
              expect(element.hasClass('ng-hide-remove')).toBe(false); //added right away


              if($sniffer.animations) { //cleanup some pending animations
                $timeout.flush();
                expect(element.hasClass('ng-hide-add')).toBe(true);
                expect(element.hasClass('ng-hide-add-active')).toBe(true);
                browserTrigger(element,'animationend', { timeStamp: Date.now() + 2000, elapsedTime: 2 });
              }

              expect(element.hasClass('ng-hide-remove-active')).toBe(false);
          }));


          it("should stagger the items when the correct CSS class is provided",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {

            if(!$sniffer.animations) return;

            $animate.enabled(true);

            ss.addRule('.real-animation.ng-enter, .real-animation.ng-leave, .real-animation-fake.ng-enter, .real-animation-fake.ng-leave',
              '-webkit-animation:1s my_animation;' + 
              'animation:1s my_animation;');

            ss.addRule('.real-animation.ng-enter-stagger, .real-animation.ng-leave-stagger',
              '-webkit-animation-delay:0.1s;' +
              '-webkit-animation-duration:0s;' +
              'animation-delay:0.1s;' + 
              'animation-duration:0s;');

            ss.addRule('.fake-animation.ng-enter-stagger, .fake-animation.ng-leave-stagger',
              '-webkit-animation-delay:0.1s;' +
              '-webkit-animation-duration:1s;' +
              'animation-delay:0.1s;' + 
              'animation-duration:1s;');

            var container = $compile(html('<div></div>'))($rootScope);

            var elements = [];
            for(var i = 0; i < 5; i++) {
              var newScope = $rootScope.$new();
              var element = $compile('<div class="real-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements.push(element);
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).toBeFalsy();
            expect(elements[1].attr('style')).toMatch(/animation-delay: 0\.1\d*s/);
            expect(elements[2].attr('style')).toMatch(/animation-delay: 0\.2\d*s/);
            expect(elements[3].attr('style')).toMatch(/animation-delay: 0\.3\d*s/);
            expect(elements[4].attr('style')).toMatch(/animation-delay: 0\.4\d*s/);

            for(var i = 0; i < 5; i++) {
              dealoc(elements[i]);
              var newScope = $rootScope.$new();
              var element = $compile('<div class="fake-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements[i] = element;
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).toBeFalsy();
            expect(elements[1].attr('style')).not.toMatch(/animation-delay: 0\.1\d*s/);
            expect(elements[2].attr('style')).not.toMatch(/animation-delay: 0\.2\d*s/);
            expect(elements[3].attr('style')).not.toMatch(/animation-delay: 0\.3\d*s/);
            expect(elements[4].attr('style')).not.toMatch(/animation-delay: 0\.4\d*s/);
          }));


          it("should stagger items when multiple animation durations/delays are defined",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {

            if(!$sniffer.transitions) return;

            $animate.enabled(true);

            ss.addRule('.stagger-animation.ng-enter, .stagger-animation.ng-leave',
              '-webkit-animation:my_animation 1s 1s, your_animation 1s 2s;' + 
              'animation:my_animation 1s 1s, your_animation 1s 2s;');

            ss.addRule('.stagger-animation.ng-enter-stagger, .stagger-animation.ng-leave-stagger',
              '-webkit-animation-delay:0.1s;' +
              'animation-delay:0.1s;');

            var container = $compile(html('<div></div>'))($rootScope);

            var elements = [];
            for(var i = 0; i < 4; i++) {
              var newScope = $rootScope.$new();
              var element = $compile('<div class="stagger-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements.push(element);
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).toBeFalsy();
            expect(elements[1].attr('style')).toMatch(/animation-delay: 1\.1\d*s,\s*2\.1\d*s/);
            expect(elements[2].attr('style')).toMatch(/animation-delay: 1\.2\d*s,\s*2\.2\d*s/);
            expect(elements[3].attr('style')).toMatch(/animation-delay: 1\.3\d*s,\s*2\.3\d*s/);
          }));

        });


        describe("Transitions", function() {

          it("should skip transitions if disabled and run when enabled",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            var style = '-webkit-transition: 1s linear all;' +
                                'transition: 1s linear all;';

            ss.addRule('.ng-hide-add', style);
            ss.addRule('.ng-hide-remove', style);

            $animate.enabled(false);
            element = $compile(html('<div>1</div>'))($rootScope);

            element.addClass('ng-hide');
            expect(element).toBeHidden();
            $animate.removeClass(element, 'ng-hide');
            expect(element).toBeShown();

            $animate.enabled(true);

            element.addClass('ng-hide');
            expect(element).toBeHidden();

            $animate.removeClass(element, 'ng-hide');
            if ($sniffer.transitions) {
              $timeout.flush();
              browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
            }
            expect(element).toBeShown();
          }));


          it("should skip animations if disabled and run when enabled picking the longest specified duration",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

              var style = '-webkit-transition-duration: 1s, 2000ms, 1s;' +
                          '-webkit-transition-property: height, left, opacity;' +
                                  'transition-duration: 1s, 2000ms, 1s;' +
                                   'transition-property: height, left, opacity;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div>foo</div>'))($rootScope);
              element.addClass('ng-hide');

              $animate.removeClass(element, 'ng-hide');

              if ($sniffer.transitions) {
                $timeout.flush();
                var now = Date.now();
                browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 });
                browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 });
                browserTrigger(element,'transitionend', { timeStamp: now + 2000, elapsedTime: 2 });
                expect(element.hasClass('ng-animate')).toBe(false);
              }
              expect(element).toBeShown();
            }));


          it("should skip animations if disabled and run when enabled picking the longest specified duration/delay combination",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
              $animate.enabled(false);
              var style = '-webkit-transition-duration: 1s, 0s, 1s; ' +
                          '-webkit-transition-delay: 2s, 1000ms, 2s; ' +
                          '-webkit-transition-property: height, left, opacity;' +
                                  'transition-duration: 1s, 0s, 1s; ' +
                                  'transition-delay: 2s, 1000ms, 2s; ' +
                                  'transition-property: height, left, opacity;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div>foo</div>'))($rootScope);

              element.addClass('ng-hide');
              $animate.removeClass(element, 'ng-hide');
              $timeout.flush(0);
              expect(element).toBeShown();
              $animate.enabled(true);

              element.addClass('ng-hide');
              expect(element).toBeHidden();

              $animate.removeClass(element, 'ng-hide');
              if ($sniffer.transitions) {
                $timeout.flush();
                var now = Date.now();
                browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 });
                browserTrigger(element,'transitionend', { timeStamp: now + 3000, elapsedTime: 3 });
                browserTrigger(element,'transitionend', { timeStamp: now + 3000, elapsedTime: 3 });
              }
              expect(element).toBeShown();
          }));


          it("should NOT overwrite styles with outdated values when animation completes",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

              if(!$sniffer.transitions) return;

              var style = '-webkit-transition-duration: 1s, 2000ms, 1s;' +
                          '-webkit-transition-property: height, left, opacity;' +
                                  'transition-duration: 1s, 2000ms, 1s;' +
                                   'transition-property: height, left, opacity;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div style="width: 100px">foo</div>'))($rootScope);
              element.addClass('ng-hide');

              $animate.removeClass(element, 'ng-hide');

              $timeout.flush();

              var now = Date.now();
              browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 });
              browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 });

              element.css('width', '200px');
              browserTrigger(element,'transitionend', { timeStamp: now + 2000, elapsedTime: 2 });
              expect(element.css('width')).toBe("200px");
            }));


          it("should animate for the highest duration",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
              var style = '-webkit-transition:1s linear all 2s;' +
                                  'transition:1s linear all 2s;' +
                          '-webkit-animation:my_ani 10s 1s;' +
                                  'animation:my_ani 10s 1s;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div>foo</div>'))($rootScope);

              element.addClass('ng-hide');
              expect(element).toBeHidden();

              $animate.removeClass(element, 'ng-hide');
              if ($sniffer.transitions) {
                $timeout.flush();
              }
              expect(element).toBeShown();
              if ($sniffer.transitions) {
                expect(element.hasClass('ng-hide-remove-active')).toBe(true);
                browserTrigger(element,'animationend', { timeStamp: Date.now() + 11000, elapsedTime: 11 });
                expect(element.hasClass('ng-hide-remove-active')).toBe(false);
              }
          }));


          it("should finish the previous transition when a new animation is started",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
              var style = '-webkit-transition: 1s linear all;' +
                                  'transition: 1s linear all;';

              ss.addRule('.ng-hide-add', style);
              ss.addRule('.ng-hide-remove', style);

              element = $compile(html('<div>1</div>'))($rootScope);

              element.addClass('ng-hide');
              $animate.removeClass(element, 'ng-hide');

              if($sniffer.transitions) {
                $timeout.flush();
                expect(element.hasClass('ng-hide-remove')).toBe(true);
                expect(element.hasClass('ng-hide-remove-active')).toBe(true);
                browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
              }
              expect(element.hasClass('ng-hide-remove')).toBe(false);
              expect(element.hasClass('ng-hide-remove-active')).toBe(false);
              expect(element).toBeShown();

              $animate.addClass(element, 'ng-hide');

              if($sniffer.transitions) {
                $timeout.flush();
                expect(element.hasClass('ng-hide-add')).toBe(true);
                expect(element.hasClass('ng-hide-add-active')).toBe(true);
              }
          }));


          it("should stagger the items when the correct CSS class is provided",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {

            if(!$sniffer.transitions) return;

            $animate.enabled(true);

            ss.addRule('.real-animation.ng-enter, .real-animation.ng-leave, .real-animation-fake.ng-enter, .real-animation-fake.ng-leave',
              '-webkit-transition:1s linear all;' + 
              'transition:1s linear all;');

            ss.addRule('.real-animation.ng-enter-stagger, .real-animation.ng-leave-stagger',
              '-webkit-transition-delay:0.1s;' +
              '-webkit-transition-duration:0s;' +
              'transition-delay:0.1s;' + 
              'transition-duration:0s;');

            ss.addRule('.fake-animation.ng-enter-stagger, .fake-animation.ng-leave-stagger',
              '-webkit-transition-delay:0.1s;' +
              '-webkit-transition-duration:1s;' +
              'transition-delay:0.1s;' + 
              'transition-duration:1s;');

            var container = $compile(html('<div></div>'))($rootScope);

            var elements = [];
            for(var i = 0; i < 5; i++) {
              var newScope = $rootScope.$new();
              var element = $compile('<div class="real-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements.push(element);
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).toBeFalsy();
            expect(elements[1].attr('style')).toMatch(/transition-delay: 0\.1\d*s/);
            expect(elements[2].attr('style')).toMatch(/transition-delay: 0\.2\d*s/);
            expect(elements[3].attr('style')).toMatch(/transition-delay: 0\.3\d*s/);
            expect(elements[4].attr('style')).toMatch(/transition-delay: 0\.4\d*s/);

            for(var i = 0; i < 5; i++) {
              dealoc(elements[i]);
              var newScope = $rootScope.$new();
              var element = $compile('<div class="fake-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements[i] = element;
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).toBeFalsy();
            expect(elements[1].attr('style')).not.toMatch(/transition-delay: 0\.1\d*s/);
            expect(elements[2].attr('style')).not.toMatch(/transition-delay: 0\.2\d*s/);
            expect(elements[3].attr('style')).not.toMatch(/transition-delay: 0\.3\d*s/);
            expect(elements[4].attr('style')).not.toMatch(/transition-delay: 0\.4\d*s/);
          }));


          it("should stagger items when multiple transition durations/delays are defined",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {

            if(!$sniffer.transitions) return;

            $animate.enabled(true);

            ss.addRule('.stagger-animation.ng-enter, .ani.ng-leave',
              '-webkit-transition:1s linear color 2s, 3s linear font-size 4s;' + 
              'transition:1s linear color 2s, 3s linear font-size 4s;');

            ss.addRule('.stagger-animation.ng-enter-stagger, .ani.ng-leave-stagger',
              '-webkit-transition-delay:0.1s;' +
              'transition-delay:0.1s;');

            var container = $compile(html('<div></div>'))($rootScope);

            var elements = [];
            for(var i = 0; i < 4; i++) {
              var newScope = $rootScope.$new();
              var element = $compile('<div class="stagger-animation"></div>')(newScope);
              $animate.enter(element, container);
              elements.push(element);
            };

            $rootScope.$digest();
            $timeout.flush();

            expect(elements[0].attr('style')).not.toContain('transition-delay');
            expect(elements[1].attr('style')).toMatch(/transition-delay: 2\.1\d*s,\s*4\.1\d*s/);
            expect(elements[2].attr('style')).toMatch(/transition-delay: 2\.2\d*s,\s*4\.2\d*s/);
            expect(elements[3].attr('style')).toMatch(/transition-delay: 2\.3\d*s,\s*4\.3\d*s/);
          }));


          it("apply a closing timeout to close all pending transitions",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {

            if (!$sniffer.transitions) return;

            ss.addRule('.animated-element', '-webkit-transition:5s linear all;' +
                                                    'transition:5s linear all;');

            element = $compile(html('<div class="animated-element">foo</div>'))($rootScope);

            $animate.addClass(element, 'some-class');

            $timeout.flush(10); //reflow
            expect(element.hasClass('some-class-add-active')).toBe(true);

            $timeout.flush(7500); //closing timeout
            expect(element.hasClass('some-class-add-active')).toBe(false);
          }));


          it("should not allow the closing animation to close off a successive animation midway",
            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
          
            if (!$sniffer.transitions) return;

            ss.addRule('.some-class-add', '-webkit-transition:5s linear all;' +
                                                  'transition:5s linear all;');
            ss.addRule('.some-class-remove', '-webkit-transition:10s linear all;' +
                                                     'transition:10s linear all;');

            element = $compile(html('<div>foo</div>'))($rootScope);

            $animate.addClass(element, 'some-class');

            $timeout.flush(10); //reflow
            expect(element.hasClass('some-class-add-active')).toBe(true);

            $animate.removeClass(element, 'some-class');

            $timeout.flush(10); //second reflow

            $timeout.flush(7500); //closing timeout for the first animation
            expect(element.hasClass('some-class-remove-active')).toBe(true);

            $timeout.flush(15000); //closing timeout for the second animation
            expect(element.hasClass('some-class-remove-active')).toBe(false);

            $timeout.verifyNoPendingTasks();
          }));
        });


        it("should apply staggering to both transitions and keyframe animations when used within the same animation",
          inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {

          if(!$sniffer.transitions) return;

          $animate.enabled(true);

          ss.addRule('.stagger-animation.ng-enter, .stagger-animation.ng-leave',
            '-webkit-animation:my_animation 1s 1s, your_animation 1s 2s;' + 
            'animation:my_animation 1s 1s, your_animation 1s 2s;' +
            '-webkit-transition:1s linear all 1s;' + 
            'transition:1s linear all 1s;');

          ss.addRule('.stagger-animation.ng-enter-stagger, .stagger-animation.ng-leave-stagger',
            '-webkit-transition-delay:0.1s;' +
            'transition-delay:0.1s;' +
            '-webkit-animation-delay:0.2s;' +
            'animation-delay:0.2s;');

          var container = $compile(html('<div></div>'))($rootScope);

          var elements = [];
          for(var i = 0; i < 3; i++) {
            var newScope = $rootScope.$new();
            var element = $compile('<div class="stagger-animation"></div>')(newScope);
            $animate.enter(element, container);
            elements.push(element);
          };

          $rootScope.$digest();
          $timeout.flush();

          expect(elements[0].attr('style')).toBeFalsy();

          expect(elements[1].attr('style')).toMatch(/transition-delay:\s+1.1\d*/);
          expect(elements[1].attr('style')).toMatch(/animation-delay: 1\.2\d*s,\s*2\.2\d*s/);

          expect(elements[2].attr('style')).toMatch(/transition-delay:\s+1.2\d*/);
          expect(elements[2].attr('style')).toMatch(/animation-delay: 1\.4\d*s,\s*2\.4\d*s/);

          for(var i = 0; i < 3; i++) {
            browserTrigger(elements[i],'transitionend', { timeStamp: Date.now() + 22000, elapsedTime: 22000 });
            expect(elements[i].attr('style')).toBeFalsy();
          }
        }));
      });


      describe('animation evaluation', function () {

        it('should re-evaluate the CSS classes for an animation each time',
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout, $compile) {

          ss.addRule('.abc.ng-enter', '-webkit-transition:22s linear all;' +
                                      'transition:22s linear all;');
          ss.addRule('.xyz.ng-enter', '-webkit-transition:11s linear all;' +
                                      'transition:11s linear all;');

          var parent = $compile('<div><span ng-class="klass"></span></div>')($rootScope);
          var element = parent.find('span');
          $rootElement.append(parent);
          angular.element(document.body).append($rootElement);

          $rootScope.klass = 'abc';
          $animate.enter(element, parent);
          $rootScope.$digest();

          if ($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('abc')).toBe(true);
            expect(element.hasClass('ng-enter')).toBe(true);
            expect(element.hasClass('ng-enter-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 22000, elapsedTime: 22 });
            $timeout.flush();
          }
          expect(element.hasClass('abc')).toBe(true);

          $rootScope.klass = 'xyz';
          $animate.enter(element, parent);
          $rootScope.$digest();

          if ($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('xyz')).toBe(true);
            expect(element.hasClass('ng-enter')).toBe(true);
            expect(element.hasClass('ng-enter-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11 });
            $timeout.flush();
          }
          expect(element.hasClass('xyz')).toBe(true);
        }));


        it('should only append active to the newly append CSS className values',
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          ss.addRule('.ng-enter', '-webkit-transition:9s linear all;' +
                                          'transition:9s linear all;');
          ss.addRule('.ng-enter', '-webkit-transition:9s linear all;' +
                                          'transition:9s linear all;');

          var parent = jqLite('<div><span></span></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          angular.element(document.body).append($rootElement);

          element.attr('class','one two');

          $animate.enter(element, parent);
          $rootScope.$digest();

          if($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('one')).toBe(true);
            expect(element.hasClass('two')).toBe(true);
            expect(element.hasClass('ng-enter')).toBe(true);
            expect(element.hasClass('ng-enter-active')).toBe(true);
            expect(element.hasClass('one-active')).toBe(false);
            expect(element.hasClass('two-active')).toBe(false);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 });
          }

          expect(element.hasClass('one')).toBe(true);
          expect(element.hasClass('two')).toBe(true);
        }));
      });


      describe("Callbacks", function() {

        beforeEach(function() {
          module(function($animateProvider) {
            $animateProvider.register('.custom', function($timeout) {
              return {
                removeClass : function(element, className, done) {
                  $timeout(done, 2000);
                }
              }
            });
            $animateProvider.register('.other', function() {
              return {
                enter : function(element, done) {
                  $timeout(done, 10000);
                }
              }
            });
          })
        });


        it("should fire the enter callback",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          body.append($rootElement);

          var flag = false;
          $animate.enter(element, parent, null, function() {
            flag = true;
          });
          $rootScope.$digest();

          $timeout.flush();

          expect(flag).toBe(true);
        }));


        it("should fire the leave callback",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          body.append($rootElement);

          var flag = false;
          $animate.leave(element, function() {
            flag = true;
          });
          $rootScope.$digest();

          $timeout.flush();

          expect(flag).toBe(true);
        }));


        it("should fire the move callback",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          var parent2 = jqLite('<div id="nice"></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          body.append($rootElement);

          var flag = false;
          $animate.move(element, parent, parent2, function() {
            flag = true;
          });
          $rootScope.$digest();

          $timeout.flush();

          expect(flag).toBe(true);
          expect(element.parent().id).toBe(parent2.id);
        }));


        it("should fire the addClass/removeClass callbacks",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          body.append($rootElement);

          var signature = '';
          $animate.addClass(element, 'on', function() {
            signature += 'A';
          });

          $animate.removeClass(element, 'on', function() {
            signature += 'B';
          });

          $timeout.flush();

          expect(signature).toBe('AB');
        }));


        it("should fire a done callback when provided with no animation",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          var element = parent.find('span');
          $rootElement.append(parent);
          body.append($rootElement);

          var flag = false;
          $animate.removeClass(element, 'ng-hide', function() {
            flag = true;
          });

          $timeout.flush();
          expect(flag).toBe(true);
        }));


        it("should fire a done callback when provided with a css animation/transition",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          ss.addRule('.ng-hide-add', '-webkit-transition:1s linear all;' +
                                             'transition:1s linear all;');
          ss.addRule('.ng-hide-remove', '-webkit-transition:1s linear all;' +
                                                'transition:1s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = parent.find('span');

          var flag = false;
          $animate.removeClass(element, 'ng-hide', function() {
            flag = true;
          });

          if($sniffer.transitions) {
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
          }
          $timeout.flush();
          expect(flag).toBe(true);
        }));


        it("should fire a done callback when provided with a JS animation",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = parent.find('span');
          element.addClass('custom');

          var flag = false;
          $animate.removeClass(element, 'ng-hide', function() {
            flag = true;
          });

          $timeout.flush();
          expect(flag).toBe(true);
        }));


        it("should fire the callback right away if another animation is called right after",
          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {

          ss.addRule('.ng-hide-add', '-webkit-transition:9s linear all;' +
                                             'transition:9s linear all;');
          ss.addRule('.ng-hide-remove', '-webkit-transition:9s linear all;' +
                                                'transition:9s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = parent.find('span');

          var signature = '';
          $animate.removeClass(element, 'ng-hide', function() {
            signature += 'A';
          });
          $animate.addClass(element, 'ng-hide', function() {
            signature += 'B';
          });

          $animate.addClass(element, 'ng-hide'); //earlier animation cancelled
          $timeout.flush();
          expect(signature).toBe('AB');
        }));
      });


      describe("addClass / removeClass", function() {

        var captured;
        beforeEach(function() {
          module(function($animateProvider, $provide) {
            $animateProvider.register('.klassy', function($timeout) {
              return {
                addClass : function(element, className, done) {
                  captured = 'addClass-' + className;
                  $timeout(done, 500, false);
                },
                removeClass : function(element, className, done) {
                  captured = 'removeClass-' + className;
                  $timeout(done, 3000, false);
                }
              }
            });
          });
        });


        it("should not perform an animation, and the followup DOM operation, if the class is " +
           "already present during addClass or not present during removeClass on the element",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          var element = jqLite('<div class="klassy"></div>');
          $rootElement.append(element);
          body.append($rootElement);

          //skipped animations
          captured = 'none';
          $animate.removeClass(element, 'some-class');
          expect(element.hasClass('some-class')).toBe(false);
          expect(captured).toBe('none');

          element.addClass('some-class');

          captured = 'nothing';
          $animate.addClass(element, 'some-class');
          expect(captured).toBe('nothing');
          expect(element.hasClass('some-class')).toBe(true);

          //actual animations
          captured = 'none';
          $animate.removeClass(element, 'some-class');
          $timeout.flush();
          expect(element.hasClass('some-class')).toBe(false);
          expect(captured).toBe('removeClass-some-class');

          captured = 'nothing';
          $animate.addClass(element, 'some-class');
          $timeout.flush();
          expect(element.hasClass('some-class')).toBe(true);
          expect(captured).toBe('addClass-some-class');
        }));


        it("should add and remove CSS classes after an animation even if no animation is present",
          inject(function($animate, $rootScope, $sniffer, $rootElement) {

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          $animate.addClass(element,'klass');

          expect(element.hasClass('klass')).toBe(true);

          $animate.removeClass(element,'klass');

          expect(element.hasClass('klass')).toBe(false);
          expect(element.hasClass('klass-remove')).toBe(false);
          expect(element.hasClass('klass-remove-active')).toBe(false);
        }));


        it("should add and remove CSS classes with a callback",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          var signature = '';

          $animate.addClass(element,'klass', function() {
            signature += 'A';
          });

          expect(element.hasClass('klass')).toBe(true);

          $animate.removeClass(element,'klass', function() {
            signature += 'B';
          });

          $timeout.flush();
          expect(element.hasClass('klass')).toBe(false);
          expect(signature).toBe('AB');
        }));


        it("should end the current addClass animation, add the CSS class and then run the removeClass animation",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          ss.addRule('.klass-add', '-webkit-transition:3s linear all;' +
                                           'transition:3s linear all;');
          ss.addRule('.klass-remove', '-webkit-transition:3s linear all;' +
                                              'transition:3s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          var signature = '';

          $animate.addClass(element,'klass', function() {
            signature += '1';
          });

          if($sniffer.transitions) {
            expect(element.hasClass('klass-add')).toBe(true);
            $timeout.flush();
            expect(element.hasClass('klass')).toBe(true);
            expect(element.hasClass('klass-add-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 });
          }
          $timeout.flush();

          //this cancels out the older animation
          $animate.removeClass(element,'klass', function() {
            signature += '2';
          });

          if($sniffer.transitions) {
            expect(element.hasClass('klass-remove')).toBe(true);

            $timeout.flush();
            expect(element.hasClass('klass')).toBe(false);
            expect(element.hasClass('klass-add')).toBe(false);
            expect(element.hasClass('klass-add-active')).toBe(false);

            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 });
          }
          $timeout.flush();

          expect(element.hasClass('klass')).toBe(false);
          expect(signature).toBe('12');
        }));


        it("should properly execute JS animations and use callbacks when using addClass / removeClass",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          var signature = '';

          $animate.addClass(element,'klassy', function() {
            signature += 'X';
          });

          $timeout.flush(500);

          expect(element.hasClass('klassy')).toBe(true);

          $animate.removeClass(element,'klassy', function() {
            signature += 'Y';
          });

          $timeout.flush(3000);

          expect(element.hasClass('klassy')).toBe(false);

          expect(signature).toBe('XY');
        }));


        it("should properly execute CSS animations/transitions and use callbacks when using addClass / removeClass",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          ss.addRule('.klass-add', '-webkit-transition:11s linear all;' +
                                           'transition:11s linear all;');
          ss.addRule('.klass-remove', '-webkit-transition:11s linear all;' +
                                              'transition:11s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          var signature = '';

          $animate.addClass(element,'klass', function() {
            signature += 'd';
          });

          if($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('klass-add')).toBe(true);
            expect(element.hasClass('klass-add-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11 });
            expect(element.hasClass('klass-add')).toBe(false);
            expect(element.hasClass('klass-add-active')).toBe(false);
          }

          $timeout.flush();
          expect(element.hasClass('klass')).toBe(true);

          $animate.removeClass(element,'klass', function() {
            signature += 'b';
          });

          if($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('klass-remove')).toBe(true);
            expect(element.hasClass('klass-remove-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11 });
            expect(element.hasClass('klass-remove')).toBe(false);
            expect(element.hasClass('klass-remove-active')).toBe(false);
          }

          $timeout.flush();
          expect(element.hasClass('klass')).toBe(false);

          expect(signature).toBe('db');
        }));


        it("should allow for multiple css classes to be animated plus a callback when added",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          ss.addRule('.one-add', '-webkit-transition:7s linear all;' +
                                         'transition:7s linear all;');
          ss.addRule('.two-add', '-webkit-transition:7s linear all;' +
                                         'transition:7s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          var flag = false;
          $animate.addClass(element,'one two', function() {
            flag = true;
          });

          if($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('one-add')).toBe(true);
            expect(element.hasClass('two-add')).toBe(true);

            expect(element.hasClass('one-add-active')).toBe(true);
            expect(element.hasClass('two-add-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 7000, elapsedTime: 7 });

            expect(element.hasClass('one-add')).toBe(false);
            expect(element.hasClass('one-add-active')).toBe(false);
            expect(element.hasClass('two-add')).toBe(false);
            expect(element.hasClass('two-add-active')).toBe(false);
          }

          $timeout.flush();

          expect(element.hasClass('one')).toBe(true);
          expect(element.hasClass('two')).toBe(true);

          expect(flag).toBe(true);
        }));


        it("should allow for multiple css classes to be animated plus a callback when removed",
          inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {

          ss.addRule('.one-remove', '-webkit-transition:9s linear all;' +
                                            'transition:9s linear all;');
          ss.addRule('.two-remove', '-webkit-transition:9s linear all;' +
                                            'transition:9s linear all;');

          var parent = jqLite('<div><span></span></div>');
          $rootElement.append(parent);
          body.append($rootElement);
          var element = jqLite(parent.find('span'));

          element.addClass('one two');
          expect(element.hasClass('one')).toBe(true);
          expect(element.hasClass('two')).toBe(true);

          var flag = false;
          $animate.removeClass(element,'one two', function() {
            flag = true;
          });

          if($sniffer.transitions) {
            $timeout.flush();
            expect(element.hasClass('one-remove')).toBe(true);
            expect(element.hasClass('two-remove')).toBe(true);

            expect(element.hasClass('one-remove-active')).toBe(true);
            expect(element.hasClass('two-remove-active')).toBe(true);
            browserTrigger(element,'transitionend', { timeStamp: Date.now() + 9000, elapsedTime: 9 });

            expect(element.hasClass('one-remove')).toBe(false);
            expect(element.hasClass('one-remove-active')).toBe(false);
            expect(element.hasClass('two-remove')).toBe(false);
            expect(element.hasClass('two-remove-active')).toBe(false);
          }

          $timeout.flush();

          expect(element.hasClass('one')).toBe(false);
          expect(element.hasClass('two')).toBe(false);

          expect(flag).toBe(true);
        }));
      });
    });

    var $rootElement, $document;
    beforeEach(module(function() {
      return function(_$rootElement_, _$document_, $animate) {
        $rootElement = _$rootElement_;
        $document = _$document_;
        $animate.enabled(true);
      }
    }));

    function html(element) {
      var body = jqLite($document[0].body);
      $rootElement.append(element);
      body.append($rootElement);
      return element;
    }


    it("should properly animate and parse CSS3 transitions",
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {

      ss.addRule('.ng-enter', '-webkit-transition:1s linear all;' +
                                      'transition:1s linear all;');

      var element = html($compile('<div>...</div>')($rootScope));
      var child = $compile('<div>...</div>')($rootScope);

      $animate.enter(child, element);
      $rootScope.$digest();

      if($sniffer.transitions) {
        $timeout.flush();
        expect(child.hasClass('ng-enter')).toBe(true);
        expect(child.hasClass('ng-enter-active')).toBe(true);
        browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
      }

      expect(child.hasClass('ng-enter')).toBe(false);
      expect(child.hasClass('ng-enter-active')).toBe(false);
    }));


    it("should properly animate and parse CSS3 animations",
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {

      ss.addRule('.ng-enter', '-webkit-animation: some_animation 4s linear 1s 2 alternate;' +
                                      'animation: some_animation 4s linear 1s 2 alternate;');

      var element = html($compile('<div>...</div>')($rootScope));
      var child = $compile('<div>...</div>')($rootScope);

      $animate.enter(child, element);
      $rootScope.$digest();

      if($sniffer.transitions) {
        $timeout.flush();
        expect(child.hasClass('ng-enter')).toBe(true);
        expect(child.hasClass('ng-enter-active')).toBe(true);
        browserTrigger(child,'transitionend', { timeStamp: Date.now() + 9000, elapsedTime: 9 });
      }
      expect(child.hasClass('ng-enter')).toBe(false);
      expect(child.hasClass('ng-enter-active')).toBe(false);
    }));


    it("should not set the transition property flag if only CSS animations are used",
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {

      if (!$sniffer.animations) return;

      ss.addRule('.sleek-animation.ng-enter', '-webkit-animation: my_animation 2s linear;' +
                                              'animation: my_animation 2s linear');

      ss.addRule('.trans.ng-enter',  '-webkit-transition:1s linear all;' +
                                             'transition:1s linear all');

      var propertyKey = ($sniffer.vendorPrefix == 'Webkit' ? '-webkit-' : '') + 'transition-property';

      var element = html($compile('<div>...</div>')($rootScope));
      var child = $compile('<div class="skeep-animation">...</div>')($rootScope);
      child.css(propertyKey,'background-color');

      $animate.enter(child, element);
      $rootScope.$digest();
      $timeout.flush();

      browserTrigger(child,'transitionend', { timeStamp: Date.now() + 2000, elapsedTime: 2 });

      expect(child.css(propertyKey)).toBe('background-color');
      child.remove();

      child = $compile('<div class="sleek-animation">...</div>')($rootScope);
      child.attr('class','trans');
      $animate.enter(child, element);
      $rootScope.$digest();

      expect(child.css(propertyKey)).not.toBe('background-color');
    }));


    it("should skip animations if the browser does not support CSS3 transitions and CSS3 animations",
      inject(function($compile, $rootScope, $animate, $sniffer) {

      $sniffer.animations = false;
      $sniffer.transitions = false;

      ss.addRule('.ng-enter', '-webkit-animation: some_animation 4s linear 1s 2 alternate;' +
                                      'animation: some_animation 4s linear 1s 2 alternate;');

      var element = html($compile('<div>...</div>')($rootScope));
      var child = $compile('<div>...</div>')($rootScope);

      expect(child.hasClass('ng-enter')).toBe(false);
      $animate.enter(child, element);
      $rootScope.$digest();
      expect(child.hasClass('ng-enter')).toBe(false);
    }));


    it("should run other defined animations inline with CSS3 animations", function() {
      module(function($animateProvider) {
        $animateProvider.register('.custom', function($timeout) {
          return {
            enter : function(element, done) {
              element.addClass('i-was-animated');
              $timeout(done, 10, false);
            }
          }
        });
      })
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {

        ss.addRule('.ng-enter', '-webkit-transition: 1s linear all;' +
                                        'transition: 1s linear all;');

        var element = html($compile('<div>...</div>')($rootScope));
        var child = $compile('<div>...</div>')($rootScope);

        expect(child.hasClass('i-was-animated')).toBe(false);

        child.addClass('custom');
        $animate.enter(child, element);
        $rootScope.$digest();

        $timeout.flush(10);

        if($sniffer.transitions) {
          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
        }

        expect(child.hasClass('i-was-animated')).toBe(true);
      });
    });


    it("should properly cancel CSS transitions or animations if another animation is fired", function() {
      module(function($animateProvider) {
        $animateProvider.register('.usurper', function($timeout) {
          return {
            leave : function(element, done) {
              element.addClass('this-is-mine-now');
              $timeout(done, 55, false);
            }
          }
        });
      });
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {
        ss.addRule('.ng-enter', '-webkit-transition: 2s linear all;' +
                                        'transition: 2s linear all;');
        ss.addRule('.ng-leave', '-webkit-transition: 2s linear all;' +
                                        'transition: 2s linear all;');

        var element = html($compile('<div>...</div>')($rootScope));
        var child = $compile('<div>...</div>')($rootScope);

        $animate.enter(child, element);
        $rootScope.$digest();

        //this is added/removed right away otherwise
        if($sniffer.transitions) {
          $timeout.flush();
          expect(child.hasClass('ng-enter')).toBe(true);
          expect(child.hasClass('ng-enter-active')).toBe(true);
        }

        expect(child.hasClass('this-is-mine-now')).toBe(false);
        child.addClass('usurper');
        $animate.leave(child);
        $rootScope.$digest();
        $timeout.flush();

        expect(child.hasClass('ng-enter')).toBe(false);
        expect(child.hasClass('ng-enter-active')).toBe(false);

        expect(child.hasClass('usurper')).toBe(true);
        expect(child.hasClass('this-is-mine-now')).toBe(true);

        $timeout.flush(55);
      });
    });


    it("should not perform the active class animation if the animation has been cancelled before the reflow occurs", function() {
      inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {
        if(!$sniffer.transitions) return;

        ss.addRule('.animated.ng-enter', '-webkit-transition: 2s linear all;' +
                                                 'transition: 2s linear all;');

        var element = html($compile('<div>...</div>')($rootScope));
        var child = $compile('<div class="animated">...</div>')($rootScope);

        $animate.enter(child, element);
        $rootScope.$digest();

        expect(child.hasClass('ng-enter')).toBe(true);

        $animate.leave(child);
        $rootScope.$digest();

        $timeout.flush();
        expect(child.hasClass('ng-enter-active')).toBe(false);
      });
    });

    //
  //  it("should add and remove CSS classes and perform CSS animations during the process",
  //    inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {
  //
  //    ss.addRule('.on-add', '-webkit-transition: 10s linear all; ' +
  //                                  'transition: 10s linear all;');
  //    ss.addRule('.on-remove', '-webkit-transition: 10s linear all; ' +
  //                                     'transition: 10s linear all;');
  //
  //    var element = html($compile('<div></div>')($rootScope));
  //
  //    expect(element.hasClass('on')).toBe(false);
  //
  //    $animate.addClass(element, 'on');
  //
  //    if($sniffer.transitions) {
  //      expect(element.hasClass('on')).toBe(false);
  //      expect(element.hasClass('on-add')).toBe(true);
  //      $timeout.flush();
  //    }
  //
  //    $timeout.flush();
  //
  //    expect(element.hasClass('on')).toBe(true);
  //    expect(element.hasClass('on-add')).toBe(false);
  //    expect(element.hasClass('on-add-active')).toBe(false);
  //
  //    $animate.removeClass(element, 'on');
  //    if($sniffer.transitions) {
  //      expect(element.hasClass('on')).toBe(true);
  //      expect(element.hasClass('on-remove')).toBe(true);
  //      $timeout.flush(10000);
  //    }
  //
  //    $timeout.flush();
  //    expect(element.hasClass('on')).toBe(false);
  //    expect(element.hasClass('on-remove')).toBe(false);
  //    expect(element.hasClass('on-remove-active')).toBe(false);
  //  }));
  //
  //
  //  it("should show and hide elements with CSS & JS animations being performed in the process", function() {
  //    module(function($animateProvider) {
  //      $animateProvider.register('.displayer', function($timeout) {
  //        return {
  //          removeClass : function(element, className, done) {
  //            element.removeClass('hiding');
  //            element.addClass('showing');
  //            $timeout(done, 25, false);
  //          },
  //          addClass : function(element, className, done) {
  //            element.removeClass('showing');
  //            element.addClass('hiding');
  //            $timeout(done, 555, false);
  //          }
  //        }
  //      });
  //    })
  //    inject(function($compile, $rootScope, $animate, $sniffer, $timeout) {
  //
  //      ss.addRule('.ng-hide-add', '-webkit-transition: 5s linear all;' +
  //                                         'transition: 5s linear all;');
  //      ss.addRule('.ng-hide-remove', '-webkit-transition: 5s linear all;' +
  //                                            'transition: 5s linear all;');
  //
  //      var element = html($compile('<div></div>')($rootScope));
  //
  //      element.addClass('displayer');
  //
  //      expect(element).toBeShown();
  //      expect(element.hasClass('showing')).toBe(false);
  //      expect(element.hasClass('hiding')).toBe(false);
  //
  //      $animate.addClass(element, 'ng-hide');
  //
  //      if($sniffer.transitions) {
  //        expect(element).toBeShown(); //still showing
  //        $timeout.flush();
  //        expect(element).toBeShown();
  //        $timeout.flush(5555);
  //      }
  //      $timeout.flush();
  //      expect(element).toBeHidden();
  //
  //      expect(element.hasClass('showing')).toBe(false);
  //      expect(element.hasClass('hiding')).toBe(true);
  //      $animate.removeClass(element, 'ng-hide');
  //
  //      if($sniffer.transitions) {
  //        expect(element).toBeHidden();
  //        $timeout.flush();
  //        expect(element).toBeHidden();
  //        $timeout.flush(5580);
  //      }
  //      $timeout.flush();
  //      expect(element).toBeShown();
  //
  //      expect(element.hasClass('showing')).toBe(true);
  //      expect(element.hasClass('hiding')).toBe(false);
  //    });
  //  });


    it("should remove all the previous classes when the next animation is applied before a reflow", function() {
      var fn, interceptedClass;
      module(function($animateProvider) {
        $animateProvider.register('.three', function() {
          return {
            move : function(element, done) {
              fn = function() {
                done();
              }
              return function() {
                interceptedClass = element.attr('class');
              }
            }
          }
        });
      });
      inject(function($compile, $rootScope, $animate, $timeout) {
        var parent = html($compile('<div class="parent"></div>')($rootScope));
        var one = $compile('<div class="one"></div>')($rootScope);
        var two = $compile('<div class="two"></div>')($rootScope);
        var three = $compile('<div class="three klass"></div>')($rootScope);

        parent.append(one);
        parent.append(two);
        parent.append(three);

        $animate.move(three, null, two);
        $rootScope.$digest();

        $animate.move(three, null, one);
        $rootScope.$digest();

        //this means that the former animation was cleaned up before the new one starts
        expect(interceptedClass.indexOf('ng-animate') >= 0).toBe(false);
      });
    });


    it("should provide the correct CSS class to the addClass and removeClass callbacks within a JS animation", function() {
      module(function($animateProvider) {
        $animateProvider.register('.classify', function() {
          return {
            removeClass : function(element, className, done) {
              element.data('classify','remove-' + className);
              done();
            },
            addClass : function(element, className, done) {
              element.data('classify','add-' + className);
              done();
            }
          }
        });
      })
      inject(function($compile, $rootScope, $animate) {
        var element = html($compile('<div class="classify"></div>')($rootScope));

        $animate.addClass(element, 'super');
        expect(element.data('classify')).toBe('add-super');

        $animate.removeClass(element, 'super');
        expect(element.data('classify')).toBe('remove-super');

        $animate.addClass(element, 'superguy');
        expect(element.data('classify')).toBe('add-superguy');
      });
    });


    it("should not skip ngAnimate animations when any pre-existing CSS transitions are present on the element", function() {
      inject(function($compile, $rootScope, $animate, $timeout, $sniffer) {
        if(!$sniffer.transitions) return;

        var element = html($compile('<div class="animated parent"></div>')($rootScope));
        var child   = html($compile('<div class="animated child"></div>')($rootScope));

        ss.addRule('.animated',  '-webkit-transition:1s linear all;' +
                                         'transition:1s linear all;');
        ss.addRule('.super-add', '-webkit-transition:2s linear all;' +
                                         'transition:2s linear all;');

        $rootElement.append(element);
        jqLite(document.body).append($rootElement);

        $animate.addClass(element, 'super');

        var empty = true;
        try {
          $timeout.flush();
          empty = false;
        }
        catch(e) {}

        expect(empty).toBe(false);
      });
    });


    it("should wait until both the duration and delay are complete to close off the animation",
      inject(function($compile, $rootScope, $animate, $timeout, $sniffer) {

      if(!$sniffer.transitions) return;

      var element = html($compile('<div class="animated parent"></div>')($rootScope));
      var child   = html($compile('<div class="animated child"></div>')($rootScope));

      ss.addRule('.animated.ng-enter',  '-webkit-transition: width 1s, background 1s 1s;' +
                                                'transition: width 1s, background 1s 1s;');

      $rootElement.append(element);
      jqLite(document.body).append($rootElement);

      $animate.enter(child, element);
      $rootScope.$digest();
      $timeout.flush();

      expect(child.hasClass('ng-enter')).toBe(true);
      expect(child.hasClass('ng-enter-active')).toBe(true);

      browserTrigger(child, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 0 });

      expect(child.hasClass('ng-enter')).toBe(true);
      expect(child.hasClass('ng-enter-active')).toBe(true);

      browserTrigger(child, 'transitionend', { timeStamp: Date.now() + 2000, elapsedTime: 2 });

      expect(child.hasClass('ng-enter')).toBe(false);
      expect(child.hasClass('ng-enter-active')).toBe(false);

      expect(element.contents().length).toBe(1);
    }));


    it("should cancel all child animations when a leave or move animation is triggered on a parent element", function() {

      var step, animationState;
      module(function($animateProvider) {
        $animateProvider.register('.animan', function($timeout) {
          return {
            enter : function(element, done) {
              animationState = 'enter';
              step = done;
              return function(cancelled) {
                animationState = cancelled ? 'enter-cancel' : animationState;
              }
            },
            addClass : function(element, className, done) {
              animationState = 'addClass';
              step = done;
              return function(cancelled) {
                animationState = cancelled ? 'addClass-cancel' : animationState;
              }
            }
          };
        });
      });

      inject(function($animate, $compile, $rootScope, $timeout, $sniffer) {
        var element = html($compile('<div class="parent"></div>')($rootScope));
        var container = html($compile('<div class="container"></div>')($rootScope));
        var child   = html($compile('<div class="animan child"></div>')($rootScope));

        ss.addRule('.animan.ng-enter, .animan.something-add',  '-webkit-transition: width 1s, background 1s 1s;' +
                                                               'transition: width 1s, background 1s 1s;');

        $rootElement.append(element);
        jqLite(document.body).append($rootElement);

        $animate.enter(child, element);
        $rootScope.$digest();

        expect(animationState).toBe('enter');
        if($sniffer.transitions) {
          expect(child.hasClass('ng-enter')).toBe(true);
          $timeout.flush();
          expect(child.hasClass('ng-enter-active')).toBe(true);
        }

        $animate.move(element, container);
        if($sniffer.transitions) {
          expect(child.hasClass('ng-enter')).toBe(false);
          expect(child.hasClass('ng-enter-active')).toBe(false);
        }

        expect(animationState).toBe('enter-cancel');

        $rootScope.$digest();
        $timeout.flush();

        $animate.addClass(child, 'something');
        if($sniffer.transitions) {
          $timeout.flush();
        }
        expect(animationState).toBe('addClass');
        if($sniffer.transitions) {
          expect(child.hasClass('something-add')).toBe(true);
          expect(child.hasClass('something-add-active')).toBe(true);
        }

        $animate.leave(container);
        expect(animationState).toBe('addClass-cancel');
        if($sniffer.transitions) {
          expect(child.hasClass('something-add')).toBe(false);
          expect(child.hasClass('something-add-active')).toBe(false);
        }
      });
    });


    it("should wait until a queue of animations are complete before performing a reflow",
      inject(function($rootScope, $compile, $timeout,$sniffer) {

      if(!$sniffer.transitions) return;

      $rootScope.items = [1,2,3,4,5];
      var element = html($compile('<div><div class="animated" ng-repeat="item in items"></div></div>')($rootScope));

      ss.addRule('.animated.ng-enter',  '-webkit-transition: width 1s, background 1s 1s;' +
                                                'transition: width 1s, background 1s 1s;');

      $rootScope.$digest();
      expect(element[0].querySelectorAll('.ng-enter-active').length).toBe(0);
      $timeout.flush();
      expect(element[0].querySelectorAll('.ng-enter-active').length).toBe(5);

      forEach(element.children(), function(kid) {
        browserTrigger(kid, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
      });

      expect(element[0].querySelectorAll('.ng-enter-active').length).toBe(0);
    }));


    it("should work to disable all child animations for an element", function() {
      var childAnimated = false,
          containerAnimated = false;
      module(function($animateProvider) {
        $animateProvider.register('.child', function() {
          return {
            addClass : function(element, className, done) {
              childAnimated = true;
              done();
            }
          }
        });
        $animateProvider.register('.container', function() {
          return {
            leave : function(element, done) {
              containerAnimated = true;
              done();
            }
          }
        });
      });
        
      inject(function($compile, $rootScope, $animate, $timeout, $rootElement) {
        $animate.enabled(true);

        var element = $compile('<div class="container"></div>')($rootScope);
        jqLite($document[0].body).append($rootElement);
        $rootElement.append(element);

        var child = $compile('<div class="child"></div>')($rootScope);
        element.append(child);

        $animate.enabled(true, element);

        $animate.addClass(child, 'awesome');
        expect(childAnimated).toBe(true);

        childAnimated = false;
        $animate.enabled(false, element);

        $animate.addClass(child, 'super');
        expect(childAnimated).toBe(false);

        $animate.leave(element);
        $rootScope.$digest();
        expect(containerAnimated).toBe(true);
      });
    });


    it("should disable all child animations on structural animations until the first reflow has passed", function() {
      var intercepted;
      module(function($animateProvider) {
        $animateProvider.register('.animated', function() {
          return {
            enter : ani('enter'),
            leave : ani('leave'),
            move : ani('move'),
            addClass : ani('addClass'),
            removeClass : ani('removeClass')
          };

          function ani(type) {
            return function(element, className, done) {
              intercepted = type;
              (done || className)();
            }
          }
        });
      });

      inject(function($animate, $rootScope, $sniffer, $timeout, $compile, _$rootElement_) {
        $rootElement = _$rootElement_;

        $animate.enabled(true);
        $rootScope.$digest();

        var element = $compile('<div class="element animated">...</div>')($rootScope);
        var child1 = $compile('<div class="child1 animated">...</div>')($rootScope);
        var child2 = $compile('<div class="child2 animated">...</div>')($rootScope);
        var container = $compile('<div class="container">...</div>')($rootScope);

        jqLite($document[0].body).append($rootElement);
        $rootElement.append(container);
        element.append(child1);
        element.append(child2);

        $animate.move(element, null, container);
        $rootScope.$digest();

        expect(intercepted).toBe('move');

        $animate.addClass(child1, 'test');
        expect(child1.hasClass('test')).toBe(true);

        expect(intercepted).toBe('move');
        $animate.leave(child1);
        $rootScope.$digest();

        expect(intercepted).toBe('move');

        //reflow has passed
        $timeout.flush();

        $animate.leave(child2);
        $rootScope.$digest();
        expect(intercepted).toBe('leave');
      });
    });


    it("should not disable any child animations when any parent class-based animations are run", function() {
      var intercepted;
      module(function($animateProvider) {
        $animateProvider.register('.animated', function() {
          return {
            enter : function(element, done) {
              intercepted = true;
              done();
            }
          }
        });
      });

      inject(function($animate, $rootScope, $sniffer, $timeout, $compile, $document, $rootElement) {
        $animate.enabled(true);

        var element = $compile('<div ng-class="{klass:bool}"> <div ng-if="bool" class="animated">value</div></div>')($rootScope);
        $rootElement.append(element);
        jqLite($document[0].body).append($rootElement);

        $rootScope.bool = true;
        $rootScope.$digest();
        expect(intercepted).toBe(true);
      });
    });


    it("should cache the response from getComputedStyle if each successive element has the same className value and parent until the first reflow hits", function() {
      var count = 0;
      module(function($provide) {
        $provide.value('$window', {
          document : jqLite(window.document),
          getComputedStyle: function(element) {
            count++;
            return window.getComputedStyle(element);
          }
        });
      });

      inject(function($animate, $rootScope, $compile, $rootElement, $timeout, $document, $sniffer) {
      if(!$sniffer.transitions) return;

        $animate.enabled(true);

        var element = $compile('<div></div>')($rootScope);
        $rootElement.append(element);
        jqLite($document[0].body).append($rootElement);

        for(var i=0;i<20;i++) {
          var kid = $compile('<div class="kid"></div>')($rootScope);
          $animate.enter(kid, element);
        }
        $rootScope.$digest();
        $timeout.flush();

        //called three times since the classname is the same
        expect(count).toBe(2);

        dealoc(element);
        count = 0;

        for(var i=0;i<20;i++) {
          var kid = $compile('<div class="kid c-'+i+'"></div>')($rootScope);
          $animate.enter(kid, element);
        }

        $rootScope.$digest();
        $timeout.flush();

        expect(count).toBe(20);
      });
    });


    it("should cancel an ongoing class-based animation only if the new class contains transition/animation CSS code",
      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('.blue-add', 'background:blue;');

      ss.addRule('.red-add', '-webkit-transition:1s linear all;' +
                                     'transition:1s linear all;');

      ss.addRule('.yellow-add', '-webkit-animation: some_animation 4s linear 1s 2 alternate;' +
                                        'animation: some_animation 4s linear 1s 2 alternate;');

      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, 'blue');
      expect(element.hasClass('blue')).toBe(true); 
      expect(element.hasClass('green-add')).toBe(true); //not cancelled

      $animate.addClass(element, 'red');
      expect(element.hasClass('green-add')).toBe(false);
      expect(element.hasClass('red-add')).toBe(true);

      $animate.addClass(element, 'yellow');
      expect(element.hasClass('red-add')).toBe(false); 
      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) {
        $animateProvider.register('.animated', function() {
          return {
            addClass : function(element, className, done) {
              count++;
              done();
            }
          }
        });
      });
      inject(function($compile, $rootScope, $animate, $sniffer, $rootElement, $timeout) {

        $rootElement.addClass('animated');
        $animate.addClass($rootElement, 'green');
        expect(count).toBe(1);

        $animate.addClass($rootElement, 'red');
        expect(count).toBe(2);
      });
    });


    it('should perform pre and post animations', function() {
      var steps = []; 
      module(function($animateProvider) {
        $animateProvider.register('.class-animate', function() {
          return {
            beforeAddClass : function(element, className, done) {
              steps.push('before');
              done();
            },
            addClass : function(element, className, done) {
              steps.push('after');
              done();
            }
          };
        });
      });
      inject(function($animate, $rootScope, $compile, $rootElement, $timeout) {
        $animate.enabled(true);

        var element = $compile('<div class="class-animate"></div>')($rootScope);
        $rootElement.append(element);

        $animate.addClass(element, 'red');

        expect(steps).toEqual(['before','after']);
      });
    });


    it('should treat the leave event always as a before event and discard the beforeLeave function', function() {
      var parentID, steps = []; 
      module(function($animateProvider) {
        $animateProvider.register('.animate', function() {
          return {
            beforeLeave : function(element, done) {
              steps.push('before');
              done();
            },
            leave : function(element, done) {
              parentID = element.parent().attr('id');
              steps.push('after');
              done();
            }
          };
        });
      });
      inject(function($animate, $rootScope, $compile, $rootElement) {
        $animate.enabled(true);

        var element = $compile('<div id="parentGuy"></div>')($rootScope);
        var child = $compile('<div class="animate"></div>')($rootScope);
        $rootElement.append(element);
        element.append(child);

        $animate.leave(child);
        $rootScope.$digest();

        expect(steps).toEqual(['after']);
        expect(parentID).toEqual('parentGuy');
      });
    });


    it('should only perform the DOM operation once',
      inject(function($sniffer, $compile, $rootScope, $rootElement, $animate, $timeout) {

      if (!$sniffer.transitions) return;

      ss.addRule('.base-class', '-webkit-transition:1s linear all;' +
                                        'transition:1s linear all;');

      $animate.enabled(true);

      var element = $compile('<div class="base-class one two"></div>')($rootScope);
      $rootElement.append(element);
      jqLite($document[0].body).append($rootElement);

      $animate.removeClass(element, 'base-class one two');

      //still true since we're before the reflow
      expect(element.hasClass('base-class')).toBe(true);

      //this will cancel the remove animation
      $animate.addClass(element, 'base-class one two');

      //the cancellation was a success and the class was added right away
      //since there was no successive animation for the after animation
      expect(element.hasClass('base-class')).toBe(true);

      //the reflow...
      $timeout.flush();

      //the reflow DOM operation was commenced but it ran before so it
      //shouldn't run agaun
      expect(element.hasClass('base-class')).toBe(true);
    }));


    it('should block and unblock transitions before the dom operation occurs',
      inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout) {

      if (!$sniffer.transitions) return;

      $animate.enabled(true);

      ss.addRule('.cross-animation', '-webkit-transition:1s linear all;' +
                                             'transition:1s linear all;');

      var capturedProperty = 'none';

      var element = $compile('<div class="cross-animation"></div>')($rootScope);
      $rootElement.append(element);
      jqLite($document[0].body).append($rootElement);

      var node = element[0];
      node._setAttribute = node.setAttribute;
      node.setAttribute = function(prop, val) {
        if(prop == 'class' && val.indexOf('trigger-class') >= 0) {
          var propertyKey = ($sniffer.vendorPrefix == 'Webkit' ? '-webkit-' : '') + 'transition-property';
          capturedProperty = element.css(propertyKey);
        }
        node._setAttribute(prop, val);
      };

      $animate.addClass(element, 'trigger-class');

      $timeout.flush();

      expect(capturedProperty).not.toBe('none');
    }));


    it('should block and unblock keyframe animations around the reflow operation',
      inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout) {

      if (!$sniffer.animations) return;

      $animate.enabled(true);

      ss.addRule('.cross-animation', '-webkit-animation:1s my_animation;' +
                                             'animation:1s my_animation;');

      var element = $compile('<div class="cross-animation"></div>')($rootScope);
      $rootElement.append(element);
      jqLite($document[0].body).append($rootElement);

      var node = element[0];
      var animationKey = $sniffer.vendorPrefix == 'Webkit' ? 'WebkitAnimation' : 'animation';

      $animate.addClass(element, 'trigger-class');

      expect(node.style[animationKey]).toContain('none');

      $timeout.flush();

      expect(node.style[animationKey]).not.toContain('none');
    }));


    it('should block and unblock keyframe animations before the followup JS animation occurs', function() {
      module(function($animateProvider) {
        $animateProvider.register('.special', function($sniffer, $window) {
          var prop = $sniffer.vendorPrefix == 'Webkit' ? 'WebkitAnimation' : 'animation';
          return {
            beforeAddClass : function(element, className, done) {
              expect(element[0].style[prop]).not.toContain('none');
              expect($window.getComputedStyle(element[0])[prop + 'Duration']).toBe('1s');
              done();
            },
            addClass : function(element, className, done) {
              expect(element[0].style[prop]).not.toContain('none');
              expect($window.getComputedStyle(element[0])[prop + 'Duration']).toBe('1s');
              done();
            }
          }
        });
      });
      inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout, $window) {
        if (!$sniffer.animations) return;

        $animate.enabled(true);

        ss.addRule('.special', '-webkit-animation:1s special_animation;' +
                                       'animation:1s special_animation;');

        var capturedProperty = 'none';

        var element = $compile('<div class="special"></div>')($rootScope);
        $rootElement.append(element);
        jqLite($document[0].body).append($rootElement);

        $animate.addClass(element, 'some-klass');

        var prop = $sniffer.vendorPrefix == 'Webkit' ? 'WebkitAnimation' : 'animation';

        expect(element[0].style[prop]).toContain('none');
        expect($window.getComputedStyle(element[0])[prop + 'Duration']).toBe('0s');

        $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);
    }));


    it('should properly animate elements with compound directives', function() {
      var capturedAnimation;
      module(function($animateProvider) {
        $animateProvider.register('.special', function() {
          return {
            enter : function(element, done) {
              capturedAnimation = 'enter';
              done();
            },
            leave : function(element, done) {
              capturedAnimation = 'leave';
              done();
            }
          }
        });
      });
      inject(function($rootScope, $compile, $rootElement, $document, $timeout, $templateCache, $sniffer) {
        if(!$sniffer.transitions) return;

        $templateCache.put('item-template', 'item: #{{ item }} ');
        var element = $compile('<div>' +
                               ' <div ng-repeat="item in items"' +
                               '      ng-include="tpl"' +
                               '      class="special"></div>' + 
                               '</div>')($rootScope);

        ss.addRule('.special', '-webkit-transition:1s linear all;' +
                                       'transition:1s linear all;');

        $rootElement.append(element);
        jqLite($document[0].body).append($rootElement);

        $rootScope.tpl = 'item-template';
        $rootScope.items = [1,2,3];
        $rootScope.$digest();
        $timeout.flush();

        expect(capturedAnimation).toBe('enter');
        expect(element.text()).toContain('item: #1');

        forEach(element.children(), function(kid) {
          browserTrigger(kid, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
        });
        $timeout.flush();

        $rootScope.items = [];
        $rootScope.$digest();
        $timeout.flush();

        expect(capturedAnimation).toBe('leave');
      });
    });

    it('should animate only the specified CSS className', function() {
      var captures = {};
      module(function($animateProvider) {
        $animateProvider.classNameFilter(/prefixed-animation/);
        $animateProvider.register('.capture', function() {
          return {
            enter : buildFn('enter'),
            leave : buildFn('leave')
          };

          function buildFn(key) {
            return function(element, className, done) {
              captures[key] = true;
              (done || className)();
            }
          }
        });
      });
      inject(function($rootScope, $compile, $rootElement, $document, $timeout, $templateCache, $sniffer, $animate) {
        if(!$sniffer.transitions) return;

        var element = $compile('<div class="capture"></div>')($rootScope);
        $rootElement.append(element);
        jqLite($document[0].body).append($rootElement);

        var enterDone = false;
        $animate.enter(element, $rootElement, null, function() {
          enterDone = true;
        });

        $rootScope.$digest();
        $timeout.flush();

        expect(captures['enter']).toBeUndefined();
        expect(enterDone).toBe(true);

        element.addClass('prefixed-animation');

        var leaveDone = false;
        $animate.leave(element, function() {
          leaveDone = true;
        });
        $rootScope.$digest();
        $timeout.flush();

        expect(captures['leave']).toBe(true);
        expect(leaveDone).toBe(true);
      });
    });
  });
});