diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index 3e0ac9cb462f2..426b38ddb0f82 100644 --- a/src/renderers/dom/shared/CSSPropertyOperations.js +++ b/src/renderers/dom/shared/CSSPropertyOperations.js @@ -50,6 +50,7 @@ if (__DEV__) { var warnedStyleNames = {}; var warnedStyleValues = {}; + var warnedForNaNValue = false; var warnHyphenatedStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { @@ -94,6 +95,19 @@ if (__DEV__) { ); }; + var warnStyleValueIsNaN = function(name, value) { + if (warnedForNaNValue) { + return; + } + + warnedForNaNValue = true; + warning( + false, + '`NaN` is an invalid value for the `%s` css style property', + name + ); + }; + /** * @param {string} name * @param {*} value @@ -106,6 +120,10 @@ if (__DEV__) { } else if (badStyleValueWithSemicolonPattern.test(value)) { warnStyleValueWithSemicolon(name, value); } + + if (typeof value === 'number' && isNaN(value)) { + warnStyleValueIsNaN(name, value); + } }; } diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js index dd20b9fe0ae6d..075c29cde8bb7 100644 --- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js +++ b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js @@ -166,4 +166,17 @@ describe('CSSPropertyOperations', function() { expect(console.error.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead'); expect(console.error.argsForCall[1][0]).toContain('Try "color: red" instead'); }); + + it('should warn about style containing a NaN value', function() { + spyOn(console, 'error'); + + CSSPropertyOperations.createMarkupForStyles({ + fontSize: NaN, + }); + + expect(console.error.calls.length).toBe(1); + expect(console.error.argsForCall[0][0]).toEqual( + 'Warning: `NaN` is an invalid value for the `fontSize` css style property' + ); + }); }); diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 66178eb2362aa..8f83a137ae02d 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -196,8 +196,11 @@ describe('ReactDOMComponent', function() { ReactDOM.render(, div); ReactDOM.render(, div); - expect(console.error.argsForCall.length).toBe(1); + expect(console.error.argsForCall.length).toBe(2); expect(console.error.argsForCall[0][0]).toEqual( + 'Warning: `NaN` is an invalid value for the `fontSize` css style property', + ); + expect(console.error.argsForCall[1][0]).toEqual( 'Warning: `span` was passed a style object that has previously been ' + 'mutated. Mutating `style` is deprecated. Consider cloning it ' + 'beforehand. Check the `render` using . Previous style: ' +