Skip to content

Commit 37f61c4

Browse files
committed
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.
1 parent e60a893 commit 37f61c4

File tree

1 file changed

+21
-1
lines changed

1 file changed

+21
-1
lines changed

src/browser/ui/dom/HTMLDOMPropertyConfig.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"use strict";
2222

2323
var DOMProperty = require('DOMProperty');
24+
var ExecutionEnvironment = require('ExecutionEnvironment');
2425

2526
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
2627
var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
@@ -32,6 +33,20 @@ var HAS_POSITIVE_NUMERIC_VALUE =
3233
var HAS_OVERLOADED_BOOLEAN_VALUE =
3334
DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
3435

36+
var hasSVG;
37+
if (ExecutionEnvironment.canUseDOM) {
38+
var implementation = document.implementation;
39+
hasSVG = (
40+
implementation &&
41+
implementation.hasFeature &&
42+
implementation.hasFeature(
43+
'http://www.w3.org/TR/SVG11/feature#BasicStructure',
44+
'1.1'
45+
)
46+
);
47+
}
48+
49+
3550
var HTMLDOMPropertyConfig = {
3651
isCustomAttribute: RegExp.prototype.test.bind(
3752
/^(data|aria)-[a-z_][a-z\d_.\-]*$/
@@ -55,7 +70,12 @@ var HTMLDOMPropertyConfig = {
5570
cellSpacing: null,
5671
charSet: MUST_USE_ATTRIBUTE,
5772
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
58-
className: MUST_USE_PROPERTY,
73+
// To set className on SVG elements, it's necessary to use .setAttribute;
74+
// this works on HTML elements too in all browsers except IE8. Conveniently,
75+
// IE8 doesn't support SVG and so we can simply use the attribute in
76+
// browsers that support SVG and the property in browsers that don't,
77+
// regardless of whether the element is HTML or SVG.
78+
className: hasSVG ? MUST_USE_ATTRIBUTE : MUST_USE_PROPERTY,
5979
cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
6080
colSpan: null,
6181
content: null,

0 commit comments

Comments
 (0)