fixed the issue that inline-styles updating could lose style properties

src/renderers/dom/shared/CSSProperty.js

@@ -133,9 +133,51 @@ var shorthandPropertyExpansions = {
   },
 };
 
+var shorthandProperties = [
+  'background',
+  'font',
+  'margin',
+  'border',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderWidth',
+  'borderColor',
+  'borderStyle',
+  'transition',
+  'WebkitTransition',
+  'MozTransition',
+  'OTransition',
+  'msTransition',
+  'transition',
+  'WebkitTransform',
+  'MozTransform',
+  'OTransform',
+  'msTransform',
+  'transform',
+  'padding',
+  'listStyle',
+  'borderRadius',
+];
+
+/**
+ * @param {object} style object to be examined if it contains shorthand property
+ */
+function hasShorthandProperty(styles) {
+  for (var styleName in styles) {
+    if (shorthandProperties.indexOf(styleName) > -1) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 var CSSProperty = {
   isUnitlessNumber: isUnitlessNumber,
   shorthandPropertyExpansions: shorthandPropertyExpansions,
+  hasShorthandProperty: hasShorthandProperty,
 };
 
 module.exports = CSSProperty;

src/renderers/dom/shared/ReactDOMComponent.js

@@ -15,6 +15,7 @@
 'use strict';
 
 var AutoFocusUtils = require('AutoFocusUtils');
+var CSSProperty = require('CSSProperty');
 var CSSPropertyOperations = require('CSSPropertyOperations');
 var DOMLazyTree = require('DOMLazyTree');
 var DOMNamespaces = require('DOMNamespaces');
@@ -1000,12 +1001,23 @@ ReactDOMComponent.Mixin = {
               styleUpdates[styleName] = '';
             }
           }
-          // Update styles that changed since `lastProp`.
-          for (styleName in nextProp) {
-            if (nextProp.hasOwnProperty(styleName) &&
-                lastProp[styleName] !== nextProp[styleName]) {
-              styleUpdates = styleUpdates || {};
-              styleUpdates[styleName] = nextProp[styleName];
+          // Update only styles that changed since `lastProp`
+          // Unless either `nextProp` or `lastProp` has shorthand properties
+          if (!CSSProperty.hasShorthandProperty(lastProp) &&
+              !CSSProperty.hasShorthandProperty(nextProp)) {
+            for (styleName in nextProp) {
+              if (nextProp.hasOwnProperty(styleName) &&
+                  lastProp[styleName] !== nextProp[styleName]) {
+                styleUpdates = styleUpdates || {};
+                styleUpdates[styleName] = nextProp[styleName];
+              }
+            }
+          } else {
+            for (styleName in nextProp) {
+              if (nextProp.hasOwnProperty(styleName)) {
+                styleUpdates = styleUpdates || {};
+                styleUpdates[styleName] = nextProp[styleName];
+              }
             }
           }
         } else {

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -99,6 +99,32 @@ describe('ReactDOMComponent', function() {
       expect(stubStyle.display).toEqual('block');
       expect(stubStyle.fontFamily).toEqual('Helvetica');
       expect(stubStyle.lineHeight).toEqual('0.5');
+
+      var node = ReactTestUtils.renderIntoDocument(<div>rhinoceros</div>);
+
+      var oldStyle = {
+        'background': 'url(http://abc.com/a.jpg) no-repeat center',
+        'backgroundSize': 'cover',
+        'backgroundColor': 'red',
+      };
+
+      node.setProps({ style: oldStyle });
+
+      expect(node.getDOMNode().style.background).toBe(oldStyle.background);
+      expect(node.getDOMNode().style.backgroundSize).toBe('cover');
+      expect(node.getDOMNode().style.backgroundColor).toBe('red');
+
+      var newStyle = {
+        'background': 'url(http://abc.com/b.jpg) no-repeat center',
+        'backgroundSize': 'cover',
+        'backgroundColor': 'red',
+      };
+
+      node.setProps({ style: newStyle });
+
+      expect(node.getDOMNode().style.background).toBe(newStyle.background);
+      expect(node.getDOMNode().style.backgroundSize).toBe('cover');
+      expect(node.getDOMNode().style.backgroundColor).toBe('red');
 
       ReactDOM.render(<div style={undefined} />, container);
       expect(stubStyle.display).toBe('');