diff --git a/src/browser/ui/dom/HTMLDOMPropertyConfig.js b/src/browser/ui/dom/HTMLDOMPropertyConfig.js index 2309cf078386..268c963646d9 100644 --- a/src/browser/ui/dom/HTMLDOMPropertyConfig.js +++ b/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,