Skip to content

Commit

Permalink
Handle className properly on SVG nodes
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
sophiebits committed May 23, 2014
1 parent e60a893 commit 37f61c4
Showing 1 changed file with 21 additions and 1 deletion.
22 changes: 21 additions & 1 deletion src/browser/ui/dom/HTMLDOMPropertyConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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_.\-]*$/
Expand All @@ -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,
Expand Down

0 comments on commit 37f61c4

Please sign in to comment.