fix(ngAnimate) : make svg elements work with classNameFilter

sreeramu · Narretz · commit 81bf7ed73ee6 · 2016-05-06T07:07:01.000-07:00
(angular#14529) Closes angular#14508
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -892,7 +892,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
           $$jqLite.addClass(element, activeClasses);
 
           if (flags.recalculateTimingStyles) {
-            fullClassName = node.className + ' ' + preparationClasses;
+            fullClassName = node.getAttribute('class') + ' ' + preparationClasses;
             cacheKey = gcsHashFn(node, fullClassName);
 
             timings = computeTimings(node, fullClassName, cacheKey);
diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
@@ -361,7 +361,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
         return runner;
       }
 
-      var className = [node.className, options.addClass, options.removeClass].join(' ');
+      var className = [node.getAttribute('class'), options.addClass, options.removeClass].join(' ');
       if (!isAnimatableClassName(className)) {
         close();
         return runner;
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -179,7 +179,7 @@ describe("animations", function() {
       });
     });
 
-    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter', function() {
+    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter for div', function() {
       module(function($animateProvider) {
         $animateProvider.classNameFilter(/only-allow-this-animation/);
       });
@@ -198,6 +198,26 @@ describe("animations", function() {
       });
     });
 
+    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter for svg', function() {
+      module(function($animateProvider) {
+        $animateProvider.classNameFilter(/only-allow-this-animation-svg/);
+      });
+      inject(function($animate, $rootScope, $compile) {
+        var svgElement = $compile('<svg class="element"></svg>')($rootScope);
+        expect(svgElement).not.toHaveClass('only-allow-this-animation-svg');
+
+        $animate.enter(svgElement, parent);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
+
+        svgElement.attr('class', 'element only-allow-this-animation-svg');
+
+        $animate.leave(svgElement, parent);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeTruthy();
+      });
+    });
+
     they('should not apply the provided options.$prop value unless it\'s a string or string-based array', ['addClass', 'removeClass'], function(prop) {
       inject(function($animate, $rootScope) {
         var startingCssClasses = element.attr('class') || '';

Original file line number	Diff line number	Diff line change
`@@ -361,7 +361,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {`
`361`	`361`	`return runner;`
`362`	`362`	`}`
`363`	`363`
`364`		`- var className = [node.className, options.addClass, options.removeClass].join(' ');`
	`364`	`+ var className = [node.getAttribute('class'), options.addClass, options.removeClass].join(' ');`
`365`	`365`	`if (!isAnimatableClassName(className)) {`
`366`	`366`	`close();`
`367`	`367`	`return runner;`