test(ngAnimate): also provide W3C transition property to work on IE10

test/ng/animatorSpec.js

@@ -18,6 +18,7 @@ describe("$animator", function() {
 
   afterEach(function(){
     dealoc(body);
+
   });
 
   describe("enable / disable", function() {

test/ng/directive/ngIncludeSpec.js

@@ -291,6 +291,11 @@ describe('ngInclude ngAnimate', function() {
     return element;
   }
 
+  function applyCSS(element, cssProp, cssValue) {
+    element.css(cssProp, cssValue);    
+    element.css(vendorPrefix + cssProp, cssValue);
+  }
+
   beforeEach(function() {
     // we need to run animation on attached elements;
     body = jqLite(document.body);
@@ -328,9 +333,7 @@ describe('ngInclude ngAnimate', function() {
 
       //if we add the custom css stuff here then it will get picked up before the animation takes place
       var child = jqLite(element.children()[0]);
-      var cssProp = vendorPrefix + 'transition';
-      var cssValue = '1s linear all';
-      child.css(cssProp, cssValue);
+      applyCSS(child, 'transition', '1s linear all');
 
       if ($sniffer.supportsTransitions) {
         expect(child.attr('class')).toContain('custom-enter-setup');
@@ -360,9 +363,7 @@ describe('ngInclude ngAnimate', function() {
 
       //if we add the custom css stuff here then it will get picked up before the animation takes place
       var child = jqLite(element.children()[0]);
-      var cssProp = vendorPrefix + 'transition';
-      var cssValue = '1s linear all';
-      child.css(cssProp, cssValue);
+      applyCSS(child, 'transition', '1s linear all');
 
       $rootScope.tpl = '';
       $rootScope.$digest();
@@ -395,9 +396,7 @@ describe('ngInclude ngAnimate', function() {
 
       //if we add the custom css stuff here then it will get picked up before the animation takes place
       var child = jqLite(element.children()[0]);
-      var cssProp = vendorPrefix + 'transition';
-      var cssValue = '0.5s linear all';
-      child.css(cssProp, cssValue);
+      applyCSS(child, 'transition', '0.5s linear all');
 
       $rootScope.tpl = 'enter';
       $rootScope.$digest();

test/ng/directive/ngRepeatSpec.js

@@ -542,6 +542,11 @@ describe('ngRepeat ngAnimate', function() {
     return element;
   }
 
+  function applyCSS(element, cssProp, cssValue) {
+    element.css(cssProp, cssValue);    
+    element.css(vendorPrefix + cssProp, cssValue);
+  }
+
   beforeEach(function() {
     // we need to run animation on attached elements;
     body = jqLite(document.body);
@@ -577,12 +582,10 @@ describe('ngRepeat ngAnimate', function() {
     $rootScope.$digest();
 
     //if we add the custom css stuff here then it will get picked up before the animation takes place
-    var cssProp = vendorPrefix + 'transition';
-    var cssValue = '1s linear all';
     var kids = element.children();
     for(var i=0;i<kids.length;i++) {
       kids[i] = jqLite(kids[i]);
-      kids[i].css(cssProp, cssValue);
+      applyCSS(kids[i], 'transition', '1s linear all');
     }
 
     if ($sniffer.supportsTransitions) {
@@ -620,12 +623,10 @@ describe('ngRepeat ngAnimate', function() {
     $rootScope.$digest();
 
     //if we add the custom css stuff here then it will get picked up before the animation takes place
-    var cssProp = vendorPrefix + 'transition';
-    var cssValue = '1s linear all';
     var kids = element.children();
     for(var i=0;i<kids.length;i++) {
       kids[i] = jqLite(kids[i]);
-      kids[i].css(cssProp, cssValue);
+      applyCSS(kids[i], 'transition', '1s linear all');
     }
 
     $rootScope.items = ['1','3'];
@@ -660,12 +661,10 @@ describe('ngRepeat ngAnimate', function() {
       $rootScope.$digest();
 
       //if we add the custom css stuff here then it will get picked up before the animation takes place
-      var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
-      var cssValue = '1s linear all';
       var kids = element.children();
       for(var i=0;i<kids.length;i++) {
         kids[i] = jqLite(kids[i]);
-        kids[i].css(cssProp, cssValue);
+        applyCSS(kids[i], 'transition', '1s linear all');
       }
 
       $rootScope.items = ['2','3','1'];
@@ -719,10 +718,10 @@ describe('ngRepeat ngAnimate', function() {
       var kids = element.children();
       var first = jqLite(kids[0]);
       var second = jqLite(kids[1]);
-      var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
+      var cssProp = 'transition';
       var cssValue = '0.5s linear all';
-      first.css(cssProp, cssValue);
-      second.css(cssProp, cssValue);
+      applyCSS(first, cssProp, cssValue);
+      applyCSS(second, cssProp, cssValue);
 
       if ($sniffer.supportsTransitions) {
         window.setTimeout.expect(1).process();

test/ng/directive/ngViewSpec.js

@@ -484,122 +484,121 @@ describe('ngView', function() {
       });
     });
   });
-});
 
-describe('ngAnimate', function() {
-  var window;
-  var body, element;
+  describe('ngAnimate ', function() {
+    var window, vendorPrefix;
+    var body, element;
 
-  function html(html) {
-    body.html(html);
-    element = body.children().eq(0);
-    return element;
-  }
+    function html(html) {
+      body.html(html);
+      element = body.children().eq(0);
+      return element;
+    }
 
-  beforeEach(function() {
-    // we need to run animation on attached elements;
-    body = jqLite(document.body);
-  });
+    function applyCSS(element, cssProp, cssValue) {
+      element.css(cssProp, cssValue);    
+      element.css(vendorPrefix + cssProp, cssValue);
+    }
 
-  afterEach(function(){
-    dealoc(body);
-    dealoc(element);
-  });
+    beforeEach(function() {
+      // we need to run animation on attached elements;
+      body = jqLite(document.body);
+    });
 
+    afterEach(function(){
+      dealoc(body);
+      dealoc(element);
+    });
 
 
-  beforeEach(module(function($provide, $routeProvider) {
-    $provide.value('$window', window = angular.mock.createMockWindow());
-    $routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
-    return function($templateCache, $animator) {
-      $templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
-      $animator.enabled(true);
-    }
-  }));
+    beforeEach(module(function($provide, $routeProvider) {
+      $provide.value('$window', window = angular.mock.createMockWindow());
+      $routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
+      return function($sniffer, $templateCache, $animator) {
+        vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
+        $templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
+        $animator.enabled(true);
+      }
+    }));
 
-  it('should fire off the enter animation + add and remove the css classes',
-      inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
-        element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
+    it('should fire off the enter animation + add and remove the css classes',
+        inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
+          element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
 
-        $location.path('/foo');
-        $rootScope.$digest();
+          $location.path('/foo');
+          $rootScope.$digest();
 
-        //if we add the custom css stuff here then it will get picked up before the animation takes place
-        var child = jqLite(element.children()[0]);
-        var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
-        var cssValue = '1s linear all';
-        child.css(cssProp, cssValue);
+          //if we add the custom css stuff here then it will get picked up before the animation takes place
+          var child = jqLite(element.children()[0]);
+          applyCSS(child, 'transition', '1s linear all');
 
-        if ($sniffer.supportsTransitions) {
-          expect(child.attr('class')).toContain('custom-enter-setup');
-          window.setTimeout.expect(1).process();
+          if ($sniffer.supportsTransitions) {
+            expect(child.attr('class')).toContain('custom-enter-setup');
+            window.setTimeout.expect(1).process();
 
-          expect(child.attr('class')).toContain('custom-enter-start');
-          window.setTimeout.expect(1000).process();
-        } else {
-          expect(window.setTimeout.queue).toEqual([]);
-        }
+            expect(child.attr('class')).toContain('custom-enter-start');
+            window.setTimeout.expect(1000).process();
+          } else {
+            expect(window.setTimeout.queue).toEqual([]);
+          }
 
-        expect(child.attr('class')).not.toContain('custom-enter-setup');
-        expect(child.attr('class')).not.toContain('custom-enter-start');
-      }));
+          expect(child.attr('class')).not.toContain('custom-enter-setup');
+          expect(child.attr('class')).not.toContain('custom-enter-start');
+        }));
 
-  it('should fire off the leave animation + add and remove the css classes',
-      inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
-    $templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
-    element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($rootScope);
+    it('should fire off the leave animation + add and remove the css classes',
+        inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
+      $templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
+      element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($rootScope);
 
-    $location.path('/foo');
-    $rootScope.$digest();
-
-    //if we add the custom css stuff here then it will get picked up before the animation takes place
-    var child = jqLite(element.children()[0]);
-    var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
-    var cssValue = '1s linear all';
-    child.css(cssProp, cssValue);
+      $location.path('/foo');
+      $rootScope.$digest();
 
-    $location.path('/');
-    $rootScope.$digest();
+      //if we add the custom css stuff here then it will get picked up before the animation takes place
+      var child = jqLite(element.children()[0]);
+      applyCSS(child, 'transition', '1s linear all');
 
-    if ($sniffer.supportsTransitions) {
-      expect(child.attr('class')).toContain('custom-leave-setup');
-      window.setTimeout.expect(1).process();
+      $location.path('/');
+      $rootScope.$digest();
 
-      expect(child.attr('class')).toContain('custom-leave-start');
-      window.setTimeout.expect(1000).process();
-    } else {
-      expect(window.setTimeout.queue).toEqual([]);
-    }
+      if ($sniffer.supportsTransitions) {
+        expect(child.attr('class')).toContain('custom-leave-setup');
+        window.setTimeout.expect(1).process();
+
+        expect(child.attr('class')).toContain('custom-leave-start');
+        window.setTimeout.expect(1000).process();
+      } else {
+        expect(window.setTimeout.queue).toEqual([]);
+      }
+
+      expect(child.attr('class')).not.toContain('custom-leave-setup');
+      expect(child.attr('class')).not.toContain('custom-leave-start');
+    }));
+
+    it('should catch and use the correct duration for animations',
+        inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
+      $templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
+      element = $compile(html(
+          '<div ' +
+              'ng-view ' +
+              'ng-animate="{enter: \'customEnter\'}">' +
+            '</div>'
+      ))($rootScope);
 
-    expect(child.attr('class')).not.toContain('custom-leave-setup');
-    expect(child.attr('class')).not.toContain('custom-leave-start');
-  }));
+      $location.path('/foo');
+      $rootScope.$digest();
 
-  it('should catch and use the correct duration for animations',
-      inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
-    $templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
-    element = $compile(html(
-        '<div ' +
-            'ng-view ' +
-            'ng-animate="{enter: \'customEnter\'}">' +
-          '</div>'
-    ))($rootScope);
-
-    $location.path('/foo');
-    $rootScope.$digest();
+      //if we add the custom css stuff here then it will get picked up before the animation takes place
+      var child = jqLite(element.children()[0]);
+      applyCSS(child, 'transition', '0.5s linear all');
 
-    //if we add the custom css stuff here then it will get picked up before the animation takes place
-    var child = jqLite(element.children()[0]);
-    var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
-    var cssValue = '0.5s linear all';
-    child.css(cssProp, cssValue);
-
-    if($sniffer.supportsTransitions) {
-      window.setTimeout.expect(1).process();
-      window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process();
-    } else {
-      expect(window.setTimeout.queue).toEqual([]);
-    }
-  }));
+      if($sniffer.supportsTransitions) {
+        window.setTimeout.expect(1).process();
+        window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process();
+      } else {
+        expect(window.setTimeout.queue).toEqual([]);
+      }
+    }));
 
-});
+  });
+});