diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index bc2fbc6563556..a4edb29f24261 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -539,6 +539,39 @@ describe('ReactDOMComponent', function() { expect(console.error.argsForCall[0][0]).toContain('clip-path'); }); + it('should only warn once about deprecated SVG attributes', function() { + spyOn(console, 'error'); + var container = document.createElement('div'); + ReactDOM.render( + + + + , + container + ); + expect(console.error.argsForCall.length).toBe(2); + expect(console.error.argsForCall[0][0]).toContain('clipPath'); + expect(console.error.argsForCall[0][0]).toContain('clip-path'); + expect(console.error.argsForCall[1][0]).toContain('strokeWidth'); + expect(console.error.argsForCall[1][0]).toContain('stroke-width'); + + ReactDOM.render( + + + + + , + container + ); + expect(console.error.argsForCall.length).toBe(3); + expect(console.error.argsForCall[0][0]).toContain('clipPath'); + expect(console.error.argsForCall[0][0]).toContain('clip-path'); + expect(console.error.argsForCall[1][0]).toContain('strokeWidth'); + expect(console.error.argsForCall[1][0]).toContain('stroke-width'); + expect(console.error.argsForCall[2][0]).toContain('strokeOpacity'); + expect(console.error.argsForCall[2][0]).toContain('stroke-opacity'); + }); + it('should update arbitrary hyphenated attributes for SVG tags', function() { var container = document.createElement('div'); diff --git a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js index 0bfd77f8fe717..164340c7a7022 100644 --- a/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js +++ b/src/renderers/dom/shared/devtools/ReactDOMSVGDeprecatedAttributeDevtool.js @@ -25,20 +25,23 @@ if (__DEV__) { var warnedSVGAttributes = {}; var warnDeprecatedSVGAttribute = function(name) { - if (!DOMProperty.properties.hasOwnProperty(name)) { + if (reactProps.hasOwnProperty(name) && reactProps[name]) { return; } - if (reactProps.hasOwnProperty(name) && reactProps[name] || - warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) { + if (!DOMProperty.properties.hasOwnProperty(name)) { return; } - var { attributeName, attributeNamespace } = DOMProperty.properties[name]; if (attributeNamespace || name === attributeName) { return; } + if (warnedSVGAttributes.hasOwnProperty(name) && warnedSVGAttributes[name]) { + return; + } + warnedSVGAttributes[name] = true; + warning( false, 'SVG property %s is deprecated. Use the original attribute name ' +