From 842d654b0f90e1420cc35ed9cc89663eb795b4b6 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Thu, 12 Jun 2014 11:27:49 -0700
Subject: [PATCH] overlapping left and right + workaround chrome bug

---
 src/Layout-test-utils.js     | 17 +++++++++++++----
 src/Layout.js                | 10 ++++++----
 src/__tests__/Layout-test.js | 15 +++++++++++++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js
index 6f665bfb..b7063b7c 100644
--- a/src/Layout-test-utils.js
+++ b/src/Layout-test-utils.js
@@ -114,13 +114,22 @@ var layoutTestUtils = (function() {
 
     var div = renderNode(body, node);
 
+    function isInt(n) {
+      return n === ~~n;
+    }
+
     function buildLayout(absoluteRect, div) {
       var rect = div.getBoundingClientRect();
+      // There's a bug with getBoundingClientRect() with position absolute
+      // and overlapping left and right.
+      // https://code.google.com/p/chromium/issues/detail?id=383936
+      // In order to workaround, we can check if offsetWidth is negative and
+      // return 0 in this case.
       var result = {
-        width: rect.width,
-        height: rect.height,
-        top: rect.top - absoluteRect.top,
-        left: rect.left - absoluteRect.left
+        width: div.offsetWidth < 0 ? 0 : rect.width,
+        height: div.offsetHeight < 0 ? 0 : rect.height,
+        top: div.offsetHeight < 0 ? div.offsetTop : rect.top - absoluteRect.top,
+        left: div.offsetWidth < 0 ? div.offsetLeft : rect.left - absoluteRect.left
       };
 
       var children = [];
diff --git a/src/Layout.js b/src/Layout.js
index 9f9e6acd..b0ad944c 100755
--- a/src/Layout.js
+++ b/src/Layout.js
@@ -484,11 +484,12 @@ var computeLayout = (function() {
             getPosition(child, trailing[mainAxis]);
         }
         if (leadingPos && trailingPos) {
-          child.layout[dim[mainAxis]] =
+          child.layout[dim[mainAxis]] = fmaxf(0,
             node.layout[dim[mainAxis]] -
             child.layout[pos[mainAxis]] -
             getMargin(child, trailing[mainAxis]) -
-            getPosition(child, trailing[mainAxis]);
+            getPosition(child, trailing[mainAxis])
+          );
         }
       }
     }
@@ -520,11 +521,12 @@ var computeLayout = (function() {
             getPosition(child, trailing[crossAxis]);
         }
         if (leadingPos && trailingPos) {
-          child.layout[dim[crossAxis]] =
+          child.layout[dim[crossAxis]] = fmaxf(0,
             node.layout[dim[crossAxis]] -
             child.layout[pos[crossAxis]] -
             getMargin(child, trailing[crossAxis]) -
-            getPosition(child, trailing[crossAxis]);
+            getPosition(child, trailing[crossAxis])
+          );
         }
       } else {
         var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]);
diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js
index b110b6e7..fc83760e 100755
--- a/src/__tests__/Layout-test.js
+++ b/src/__tests__/Layout-test.js
@@ -690,7 +690,7 @@ describe('Layout', function() {
     )
   });
 
-  it('should layout node with borderWidth and position: absolute, top', function() {
+  it('should layout node with borderWidth and position: absolute, top, main axis', function() {
     testLayout(
       {style: {borderTopWidth: 1}, children: [
         {style: {top: -1, position: 'absolute'}}
@@ -701,7 +701,7 @@ describe('Layout', function() {
     )
   });
 
-  it('should layout node with borderWidth and position: absolute, top. cross axis', function() {
+  it('should layout node with borderWidth and position: absolute, top, cross axis', function() {
     testLayout(
       {style: {borderWidth: 1}, children: [
         {style: {left: 5, position: 'absolute'}}
@@ -950,6 +950,17 @@ describe('Layout', function() {
     );
   });
 
+  it('should layout with position absolute left and negative right', function() {
+    testLayout(
+      {style: {}, children: [
+        {style: {left: 5, right: -1, position: 'absolute'}}
+      ]},
+      {width: 0, height: 0, top: 0, left: 0, children: [
+        {width: 0, height: 0, top: 0, left: 5}
+      ]}
+    );
+  });
+
   xit('should layout text with alignItems: stretch', function() {
     testLayout(
       {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text('loooooooooong with space')}},