Handle className properly on SVG nodes

This strategy avoids a runtime check for every set (as opposed to using a mutation method). Test Plan: Verify that changing className works on a div and a rect in latest Chrome, latest Firefox, IE9. Verify that the div works in IE8.

Author: sophiebits

src/browser/ui/dom/HTMLDOMPropertyConfig.js

@@ -21,6 +21,7 @@
 "use strict";
 
 var DOMProperty = require('DOMProperty');
+var ExecutionEnvironment = require('ExecutionEnvironment');
 
 var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
 var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
@@ -32,6 +33,20 @@ var HAS_POSITIVE_NUMERIC_VALUE =
 var HAS_OVERLOADED_BOOLEAN_VALUE =
  DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
 
+var hasSVG;
+if (ExecutionEnvironment.canUseDOM) {
+ var implementation = document.implementation;
+ hasSVG = (
+ implementation &&
+ implementation.hasFeature &&
+ implementation.hasFeature(
+ 'http://www.w3.org/TR/SVG11/feature#BasicStructure',
+ '1.1'
+ )
+ );
+}
+
+
 var HTMLDOMPropertyConfig = {
  isCustomAttribute: RegExp.prototype.test.bind(
  /^(data|aria)-[a-z_][a-z\d_.\-]*$/
@@ -55,7 +70,12 @@ var HTMLDOMPropertyConfig = {
  cellSpacing: null,
  charSet: MUST_USE_ATTRIBUTE,
  checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
- className: MUST_USE_PROPERTY,
+ // To set className on SVG elements, it's necessary to use .setAttribute;
+ // this works on HTML elements too in all browsers except IE8. Conveniently,
+ // IE8 doesn't support SVG and so we can simply use the attribute in
+ // browsers that support SVG and the property in browsers that don't,
+ // regardless of whether the element is HTML or SVG.
+ className: hasSVG ? MUST_USE_ATTRIBUTE : MUST_USE_PROPERTY,
  cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
  colSpan: null,
  content: null,