From 7a6000c093106d5cce02c5a5ea1b512092111d20 Mon Sep 17 00:00:00 2001
From: Jon Tewksbury <jontewks@gmail.com>
Date: Sat, 16 Jan 2016 11:10:50 -0800
Subject: [PATCH] Add warning for NaN in style object

---
 .../dom/shared/CSSPropertyOperations.js        | 18 ++++++++++++++++++
 .../__tests__/CSSPropertyOperations-test.js    | 13 +++++++++++++
 .../shared/__tests__/ReactDOMComponent-test.js |  5 ++++-
 3 files changed, 35 insertions(+), 1 deletion(-)

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(<span style={style}></span>, div);
       ReactDOM.render(<span style={style}></span>, 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 <span>. Previous style: ' +