diff --git a/src/renderers/dom/shared/CSSProperty.js b/src/renderers/dom/shared/CSSProperty.js index 476117a0b4f3b..054b80120c403 100644 --- a/src/renderers/dom/shared/CSSProperty.js +++ b/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; diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index 740c2c91f7bed..790222f0f3e4a 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/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 { diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index b96f37149e7cb..f514c04547229 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/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(