Merge pull request #6243 from zpao/fuck-svg-2

Revert SVG passthrough and expand whitelist
facebook · Mar 11, 2016 · ec25297 · ec25297
2 parents 5a17a1e + a0a7200
commit ec25297
Show file tree

Hide file tree

Showing 9 changed files with 399 additions and 644 deletions.
diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md
@@ -86,6 +86,13 @@ There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here
 
 ### SVG Attributes
 
-Any attributes passed to SVG tags are passed through without changes.
-
-React used to support special camelCase aliases for certain SVG attributes, such as `clipPath`. If you use them now you'll see a deprecation warning. These aliases will be removed in the next version in favor of their real names from the SVG specification, such as `clip-path`. Attributes that have a camelCase name in the spec, such as `gradientTransform`, will keep their names.
+```
+clipPath cx cy d dx dy fill fillOpacity fontFamily
+fontSize fx fy gradientTransform gradientUnits markerEnd
+markerMid markerStart offset opacity patternContentUnits
+patternUnits points preserveAspectRatio r rx ry spreadMethod
+stopColor stopOpacity stroke  strokeDasharray strokeLinecap
+strokeOpacity strokeWidth textAnchor transform version
+viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole
+xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y
+```
diff --git a/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js b/src/renderers/dom/client/__tests__/ReactDOMSVG-test.js
@@ -21,45 +21,6 @@ describe('ReactDOMSVG', function() {
     ReactDOMServer = require('ReactDOMServer');
   });
 
-  it('creates initial markup for known hyphenated attributes', function() {
-    var markup = ReactDOMServer.renderToString(
-      <svg clip-path="url(#starlet)" />
-    );
-    expect(markup).toContain('clip-path="url(#starlet)"');
-  });
-
-  it('creates initial markup for camel case attributes', function() {
-    var markup = ReactDOMServer.renderToString(
-      <svg viewBox="0 0 100 100" />
-    );
-    expect(markup).toContain('viewBox="0 0 100 100"');
-  });
-
-  it('deprecates camel casing of hyphenated attributes', function() {
-    spyOn(console, 'error');
-    var markup = ReactDOMServer.renderToString(
-      <svg clipPath="url(#starlet)" />
-    );
-    expect(markup).toContain('clip-path="url(#starlet)"');
-    expect(console.error.argsForCall.length).toBe(1);
-    expect(console.error.argsForCall[0][0]).toContain('clipPath');
-    expect(console.error.argsForCall[0][0]).toContain('clip-path');
-  });
-
-  it('creates initial markup for unknown hyphenated attributes', function() {
-    var markup = ReactDOMServer.renderToString(
-      <svg the-word="the-bird" />
-    );
-    expect(markup).toContain('the-word="the-bird"');
-  });
-
-  it('creates initial markup for unknown camel case attributes', function() {
-    var markup = ReactDOMServer.renderToString(
-      <svg theWord="theBird" />
-    );
-    expect(markup).toContain('theWord="theBird"');
-  });
-
   it('creates initial namespaced markup', function() {
     var markup = ReactDOMServer.renderToString(
       <svg>

diff --git a/src/renderers/dom/shared/DOMPropertyOperations.js b/src/renderers/dom/shared/DOMPropertyOperations.js
@@ -126,31 +126,6 @@ var DOMPropertyOperations = {
     return name + '=' + quoteAttributeValueForBrowser(value);
   },
 
-  /**
-   * Creates markup for an SVG property.
-   *
-   * @param {string} name
-   * @param {*} value
-   * @return {string} Markup string, or empty string if the property was invalid.
-   */
-  createMarkupForSVGAttribute: function(name, value) {
-    if (__DEV__) {
-      ReactDOMInstrumentation.debugTool.onCreateMarkupForSVGAttribute(name, value);
-    }
-    if (!isAttributeNameSafe(name) || value == null) {
-      return '';
-    }
-    var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
-        DOMProperty.properties[name] : null;
-    if (propertyInfo) {
-      // Migration path for deprecated camelCase aliases for SVG attributes
-      var { attributeName } = propertyInfo;
-      return attributeName + '=' + quoteAttributeValueForBrowser(value);
-    } else {
-      return name + '=' + quoteAttributeValueForBrowser(value);
-    }
-  },
-
   /**
    * Sets the value for a property on a node.
    *
@@ -210,18 +185,6 @@ var DOMPropertyOperations = {
     }
   },
 
-  setValueForSVGAttribute: function(node, name, value) {
-    if (__DEV__) {
-      ReactDOMInstrumentation.debugTool.onSetValueForSVGAttribute(node, name, value);
-    }
-    if (DOMProperty.properties.hasOwnProperty(name)) {
-      // Migration path for deprecated camelCase aliases for SVG attributes
-      DOMPropertyOperations.setValueForProperty(node, name, value);
-    } else {
-      DOMPropertyOperations.setValueForAttribute(node, name, value);
-    }
-  },
-
   /**
    * Deletes the value for a property on a node.
    *
@@ -257,16 +220,6 @@ var DOMPropertyOperations = {
     }
   },
 
-  deleteValueForSVGAttribute: function(node, name) {
-    var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ?
-        DOMProperty.properties[name] : null;
-    if (propertyInfo) {
-      DOMPropertyOperations.deleteValueForProperty(node, name);
-    } else {
-      node.removeAttribute(name);
-    }
-  },
-
 };
 
 ReactPerf.measureMethods(DOMPropertyOperations, 'DOMPropertyOperations', {