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.
Ben Alpert committed
May 22, 2014 at 20:29 UTC
37f61c479e3d79eebff6049b0e980ff6d82b4ec2
1 file changed
+21
-1
src/browser/ui/dom/HTMLDOMPropertyConfig.js
+21
-1
@@ -21,6 +21,7 @@
21
"use strict";
22
23
var DOMProperty = require('DOMProperty');
24
+var ExecutionEnvironment = require('ExecutionEnvironment');
25
26
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
27
var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
@@ -32,6 +33,20 @@ var HAS_POSITIVE_NUMERIC_VALUE =
33
var HAS_OVERLOADED_BOOLEAN_VALUE =
34
DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
35
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
+
50
var HTMLDOMPropertyConfig = {
51
isCustomAttribute: RegExp.prototype.test.bind(
52
/^(data|aria)-[a-z_][a-z\d_.\-]*$/
@@ -55,7 +70,12 @@ var HTMLDOMPropertyConfig = {
70
cellSpacing: null,
71
charSet: MUST_USE_ATTRIBUTE,
72
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,
79
cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
80
colSpan: null,
81
content: null,