From accdfd2e65f1cf687216d94497c89749fda02e07 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 26 Dec 2013 19:31:25 -0500
Subject: [PATCH] Allow props.style object to accept array as value

---
 src/dom/CSSPropertyOperations.js              | 17 +++++++---
 .../__tests__/CSSPropertyOperations-test.js   | 32 +++++++++++++++++++
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/dom/CSSPropertyOperations.js b/src/dom/CSSPropertyOperations.js
index e664ad432e2ff..27b313fba1baf 100644
--- a/src/dom/CSSPropertyOperations.js
+++ b/src/dom/CSSPropertyOperations.js
@@ -53,7 +53,12 @@ var CSSPropertyOperations = {
         continue;
       }
       var styleValue = styles[styleName];
-      if (styleValue != null) {
+      if (Array.isArray(styleValue)) {
+        styleValue.forEach(function(styleValue) {
+          serialized += processStyleName(styleName) + ':';
+          serialized += dangerousStyleValue(styleName, styleValue) + ';';
+        });
+      } else if (styleValue != null && styleValue.length !== 0) {
         serialized += processStyleName(styleName) + ':';
         serialized += dangerousStyleValue(styleName, styleValue) + ';';
       }
@@ -74,9 +79,13 @@ var CSSPropertyOperations = {
       if (!styles.hasOwnProperty(styleName)) {
         continue;
       }
-      var styleValue = dangerousStyleValue(styleName, styles[styleName]);
-      if (styleValue) {
-        style[styleName] = styleValue;
+      var styleValue = styles[styleName];
+      if (Array.isArray(styleValue) && styleValue.length) {
+        styleValue.forEach(function(styleValue) {
+          style[styleName] = dangerousStyleValue(styleName, styleValue);
+        });
+      } else if (styleValue != null && styleValue.length !== 0) {
+        style[styleName] = dangerousStyleValue(styleName, styleValue);
       } else {
         var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
         if (expansion) {
diff --git a/src/dom/__tests__/CSSPropertyOperations-test.js b/src/dom/__tests__/CSSPropertyOperations-test.js
index c0bb139e8fd5d..2599450c316fd 100644
--- a/src/dom/__tests__/CSSPropertyOperations-test.js
+++ b/src/dom/__tests__/CSSPropertyOperations-test.js
@@ -52,6 +52,19 @@ describe('CSSPropertyOperations', function() {
     })).toBe('display:none;');
   });
 
+  it('should ignore empty strings', function() {
+    expect(CSSPropertyOperations.createMarkupForStyles({
+      backgroundColor: '',
+      display: 'none'
+    })).toBe('display:none;');
+  });
+
+  it('should add multiple styles', function() {
+    expect(CSSPropertyOperations.createMarkupForStyles({
+      cursor: ['-webkit-grab', '-moz-grab', 'grab']
+    })).toBe('cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;');
+  });
+
   it('should return null for no styles', function() {
     expect(CSSPropertyOperations.createMarkupForStyles({
       backgroundColor: null,
@@ -105,4 +118,23 @@ describe('CSSPropertyOperations', function() {
     expect(/style=".*"/.test(root.innerHTML)).toBe(false);
   });
 
+  it('should set style for node', function() {
+    var div = document.createElement('div');
+    CSSPropertyOperations.setValueForStyles(div, {
+      backgroundColor: null,
+      display: 'none'
+    });
+    expect(div.style.getPropertyValue('background-color')).toBe(null);
+    expect(div.style.getPropertyValue('display')).toBe('none');
+  });
+
+  it('should set multiple style rules for node', function() {
+    var div = document.createElement('div');
+    // Last valid style wins
+    CSSPropertyOperations.setValueForStyles(div, {
+      cursor: ['crosshair', 'auto']
+    });
+    expect(div.style.getPropertyValue('cursor')).toBe('auto');
+  });
+
 });