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: ' +