From fd0750a9d9323e3f1000b8c5b5658998fa4d52f6 Mon Sep 17 00:00:00 2001
From: IgorKlopov <igor@klopov.com>
Date: Sat, 9 Aug 2014 14:02:52 +0400
Subject: [PATCH 1/2] Restores 'border' when 'borderColor' is removed

---
 src/browser/ui/ReactDOMComponent.js | 128 ++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)

diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js
index 70c0ceb9e0a8a..ab7cc91b5f8eb 100644
--- a/src/browser/ui/ReactDOMComponent.js
+++ b/src/browser/ui/ReactDOMComponent.js
@@ -46,6 +46,121 @@ var STYLE = keyOf({style: null});
 
 var ELEMENT_NODE_TYPE = 1;
 
+var shorthandPropertyRelations = {
+  backgroundImage: {
+    background: true
+  },
+  backgroundPosition: {
+    background: true
+  },
+  backgroundRepeat: {
+    background: true
+  },
+  backgroundColor: {
+    background: true
+  },
+  borderWidth: {
+    border: true
+  },
+  borderStyle: {
+    border: true
+  },
+  borderColor: {
+    border: true
+  },
+  borderBottom: {
+    border: true
+  },
+  borderLeft: {
+    border: true
+  },
+  borderRight: {
+    border: true
+  },
+  borderTop: {
+    border: true
+  },
+  borderBottomWidth: {
+    borderWidth: true,
+    borderBottom: true,
+    border: true
+  },
+  borderBottomStyle: {
+    borderStyle: true,
+    borderBottom: true,
+    border: true
+  },
+  borderBottomColor: {
+    borderColor: true,
+    borderBottom: true,
+    border: true
+  },
+  borderLeftWidth: {
+    borderWidth: true,
+    borderLeft: true,
+    border: true
+  },
+  borderLeftStyle: {
+    borderStyle: true,
+    borderLeft: true,
+    border: true
+  },
+  borderLeftColor: {
+    borderColor: true,
+    borderLeft: true,
+    border: true
+  },
+  borderRightWidth: {
+    borderWidth: true,
+    borderRight: true,
+    border: true
+  },
+  borderRightStyle: {
+    borderStyle: true,
+    borderRight: true,
+    border: true
+  },
+  borderRightColor: {
+    borderColor: true,
+    borderRight: true,
+    border: true
+  },
+  borderTopWidth: {
+    borderWidth: true,
+    borderTop: true,
+    border: true
+  },
+  borderTopStyle: {
+    borderStyle: true,
+    borderTop: true,
+    border: true
+  },
+  borderTopColor: {
+    borderColor: true,
+    borderTop: true,
+    border: true
+  },
+  fontStyle: {
+    font: true
+  },
+  fontVariant: {
+    font: true
+  },
+  fontWeight: {
+    font: true
+  },
+  fontSize: {
+    font: true
+  },
+  lineHeight: {
+    font: true
+  },
+  fontFamily: {
+    font: true
+  }
+
+};
+
 /**
  * @param {?object} props
  */
@@ -310,6 +425,19 @@ ReactDOMComponent.Mixin = {
                 (!nextProp || !nextProp.hasOwnProperty(styleName))) {
               styleUpdates = styleUpdates || {};
               styleUpdates[styleName] = '';
+              // styleName (`borderColor`) removal should lead
+              // to relatedStyleName (`border`) restore.
+              if (nextProp) {
+                var related = shorthandPropertyRelations[styleName];
+                if (related) {
+                  for (var relatedStyleName in related) {
+                    if (nextProp.hasOwnProperty(relatedStyleName)) {
+                      styleUpdates[relatedStyleName] = nextProp[relatedStyleName];
+                      delete styleUpdates[styleName]; // no need to empty `borderColor`.
+                    }
+                  }
+                }
+              }
             }
           }
           // Update styles that changed since `lastProp`.

From 7241ac214cae58da0546b5221dcc2ee4e59a588c Mon Sep 17 00:00:00 2001
From: IgorKlopov <igor@klopov.com>
Date: Sat, 9 Aug 2014 14:03:47 +0400
Subject: [PATCH 2/2] Test 'border' restore on 'borderColor' removal

---
 .../ui/__tests__/ReactDOMComponent-test.js    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js
index b283a004e9a7d..e264cd2e74e25 100644
--- a/src/browser/ui/__tests__/ReactDOMComponent-test.js
+++ b/src/browser/ui/__tests__/ReactDOMComponent-test.js
@@ -144,6 +144,25 @@ describe('ReactDOMComponent', function() {
       expect(stubStyle.color).toEqual('green');
     });
 
+    it("should restore style of 'border' after 'borderColor' removal", function() {
+      var styles = { border: '4px solid red', borderColor: 'yellow' };
+      var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);
+
+      var stubStyle = stub.getDOMNode().style;
+
+      stub.receiveComponent({props: { style: styles }}, transaction);
+      expect(stubStyle.borderWidth).toEqual('4px');
+      expect(stubStyle.borderStyle).toEqual('solid');
+      expect(stubStyle.borderColor).toEqual('yellow');
+
+      delete styles.borderColor;
+
+      stub.receiveComponent({props: { style: styles }}, transaction);
+      expect(stubStyle.borderWidth).toEqual('4px');
+      expect(stubStyle.borderStyle).toEqual('solid');
+      expect(stubStyle.borderColor).toEqual('red');
+    });
+
     it("should clear all the styles when removing 'style'", function() {
       var styles = {display: 'none', color: 'red'};
       var stub = ReactTestUtils.renderIntoDocument(<div style={styles} />);