fix(jqLite): make class API work consistently for IE9

IE9 has issues with setAttribute() and getAttribute() when an element uses XML namespaces.

This should make the behaviour on IE9 consistent with a minimal perf hit, and make it easy
to remove support when IE9 is no longer supported.

Fixes angular#5001

Author: caitp

src/jqLite.js

@@ -3,6 +3,8 @@
 /* global JQLitePrototype: true,
   addEventListenerFn: true,
   removeEventListenerFn: true,
+  jqLiteAddClass: true,
+  jqLiteRemoveClass: true,
   BOOLEAN_ATTR: true,
   ALIASED_ATTR: true,
 */
@@ -357,7 +359,10 @@ function jqLiteHasClass(element, selector) {
       indexOf( " " + selector + " " ) > -1);
 }
 
-function jqLiteRemoveClass(element, cssClasses) {
+var jqLiteAddClass = msie === 9 ? jqLiteAddClassIE9 : jqLiteAddClassCommon;
+var jqLiteRemoveClass = msie === 9 ? jqLiteRemoveClassIE9 : jqLiteRemoveClassCommon;
+
+function jqLiteRemoveClassCommon(element, cssClasses) {
   if (cssClasses && element.setAttribute) {
     forEach(cssClasses.split(' '), function(cssClass) {
       element.setAttribute('class', trim(
@@ -369,7 +374,29 @@ function jqLiteRemoveClass(element, cssClasses) {
   }
 }
 
-function jqLiteAddClass(element, cssClasses) {
+function jqLiteRemoveClassIE9(element, cssClasses) {
+  if (cssClasses && (element.className || element.className === '')) {
+    var existingClasses = (' ' + (element.className.baseVal || element.className || '') + ' ')
+                            .replace(/[\r\n\s]+/g, ' ');
+
+    forEach(cssClasses.split(' '), function(cssClass) {
+      cssClass = trim(cssClass);
+      existingClasses = existingClasses.replace(' ' + cssClass + ' ', ' ');
+    });
+
+    existingClasses = trim(existingClasses);
+
+    if (typeof element.className === 'string') {
+      /* assuming regular node */
+      element.className = existingClasses;
+    } else {
+      /* assuming SVG */
+      element.className.baseVal = existingClasses;
+    }
+  }
+}
+
+function jqLiteAddClassCommon(element, cssClasses) {
   if (cssClasses && element.setAttribute) {
     var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ')
                             .replace(/[\n\t]/g, " ");
@@ -385,6 +412,31 @@ function jqLiteAddClass(element, cssClasses) {
   }
 }
 
+function jqLiteAddClassIE9(element, cssClasses) {
+  // MSIE9 cannot reliably use setAttribute() when XML namespaces are used anywhere
+  // on the element. Because of this, we work with className directly.
+  if (cssClasses && (element.className || element.className === '')) {
+    var existingClasses = (' ' + (element.className.baseVal || element.className || '') + ' ')
+                            .replace(/[\r\n\s]+/g, ' ');
+
+    forEach(cssClasses.split(' '), function(cssClass) {
+      cssClass = trim(cssClass);
+      if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) {
+        existingClasses += cssClass + ' ';
+      }
+    });
+    existingClasses = trim(existingClasses);
+
+    if (typeof element.className === 'string') {
+      /* assuming regular node */
+      element.className = existingClasses;
+    } else {
+      /* assuming SVG */
+      element.className.baseVal = existingClasses;
+    }
+  }
+}
+
 
 function jqLiteAddNodes(root, elements) {
   // THIS CODE IS VERY HOT. Don't make changes without benchmarking.

test/jqLiteSpec.js

@@ -663,6 +663,37 @@ describe('jqLite', function() {
     });
 
 
+    it('should properly work with elements with XML namespaced attributes', function() {
+      var element = jqLite('<div ng:class="foo bar baz"></div>');
+
+      element.addClass('foo');
+      element.addClass('bar');
+      expect(element.hasClass('foo')).toBe(true);
+      expect(element.hasClass('bar')).toBe(true);
+
+      element.removeClass('foo');
+      expect(element.hasClass('foo')).toBe(false);
+      expect(elemnet.hasClass('bar')).toBe(true);
+    });
+
+
+    it('should properly work with elements with XML namespaced attributes for SVG', function() {
+      // this is a jqLite & SVG only test (jquery doesn't behave this way right now, which is a bug)
+      if (!window.SVGElement || !_jqLiteMode) return;
+      var svg = jqLite('<svg><rect ng:class="foo bar baz"></rect></svg>');
+      var element = svg.children();
+
+      element.addClass('foo');
+      element.addClass('bar');
+      expect(element.hasClass('foo')).toBe(true);
+      expect(element.hasClass('bar')).toBe(true);
+
+      element.removeClass('foo');
+      expect(element.hasClass('foo')).toBe(false);
+      expect(elemnet.hasClass('bar')).toBe(true);
+    });
+
+
     it('should ignore comment elements', function() {
       var comment = jqLite(document.createComment('something'));