From b6f3bbc3b8cc97f57b2199f8650519d41650a3c1 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Tue, 22 Apr 2014 11:40:31 -0700 Subject: [PATCH] absolute child and parent border main axis. s/getPadding/getPaddingAndBorder/ --- src/Layout.js | 42 +++++++++++++++++++++--------------- src/__tests__/Layout-test.js | 11 ++++++++++ 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/Layout.js b/src/Layout.js index 43da6d13..0126b08b 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -55,16 +55,23 @@ var computeLayout = (function() { } function getPadding(node, location) { - return getSpacing(node, 'padding', '', location) + - getSpacing(node, 'border', 'Width', location); + return getSpacing(node, 'padding', '', location); + } + + function getBorder(node, location) { + return getSpacing(node, 'border', 'Width', location); + } + + function getPaddingAndBorder(node, location) { + return getPadding(node, location) + getBorder(node, location); } function getMarginAxis(node, axis) { return getMargin(node, leading[axis]) + getMargin(node, trailing[axis]); } - function getPaddingAxis(node, axis) { - return getPadding(node, leading[axis]) + getPadding(node, trailing[axis]); + function getPaddingAndBorderAxis(node, axis) { + return getPaddingAndBorder(node, leading[axis]) + getPaddingAndBorder(node, trailing[axis]); } function getJustifyContent(node) { @@ -172,7 +179,7 @@ var computeLayout = (function() { if (isUndefined(node.layout[dim[mainAxis]]) && mainDimInStyle) { node.layout[dim[mainAxis]] = Math.max( node.style[dim[mainAxis]], - getPaddingAxis(node, mainAxis) + getPaddingAndBorderAxis(node, mainAxis) ); } @@ -180,7 +187,7 @@ var computeLayout = (function() { if (isUndefined(node.layout[dim[crossAxis]]) && crossDimInStyle) { node.layout[dim[crossAxis]] = Math.max( node.style[dim[crossAxis]], - getPaddingAxis(node, crossAxis) + getPaddingAndBorderAxis(node, crossAxis) ); } @@ -200,7 +207,7 @@ var computeLayout = (function() { } } else { flexibleChildrenCount++; - mainContentDim += getPaddingAxis(child, mainAxis) + getMarginAxis(child, mainAxis); + mainContentDim += getPaddingAndBorderAxis(child, mainAxis) + getMarginAxis(child, mainAxis); } } @@ -208,7 +215,7 @@ var computeLayout = (function() { var/*float*/ betweenMainDim = 0; if (!isUndefined(node.layout[dim[mainAxis]])) { var/*float*/ remainingMainDim = node.layout[dim[mainAxis]] - - getPaddingAxis(node, mainAxis) - + getPaddingAndBorderAxis(node, mainAxis) - mainContentDim; if (flexibleChildrenCount) { @@ -219,7 +226,7 @@ var computeLayout = (function() { for (var/*int*/ i = 0; i < node.children.length; ++i) { var/*css_node_t**/ child = node.children[i]; if (getPositionType(child) === 'relative' && getFlex(child)) { - child.layout[dim[mainAxis]] = flexibleMainDim + getPaddingAxis(child, mainAxis); + child.layout[dim[mainAxis]] = flexibleMainDim + getPaddingAndBorderAxis(child, mainAxis); layoutNode(child); } } @@ -241,11 +248,12 @@ var computeLayout = (function() { } var/*float*/ crossDim = 0; - var/*float*/ mainPos = getPadding(node, leading[mainAxis]) + leadingMainDim; + var/*float*/ mainPos = getPaddingAndBorder(node, leading[mainAxis]) + leadingMainDim; for (var/*int*/ i = 0; i < node.children.length; ++i) { var/*css_node_t**/ child = node.children[i]; if (getPositionType(child) === 'absolute' && isPosDefined(child, leading[mainAxis])) { child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) + + getBorder(node, leading[mainAxis]) + getMargin(child, leading[mainAxis]); } else { child.layout[pos[mainAxis]] += mainPos; @@ -261,9 +269,9 @@ var computeLayout = (function() { } } } - mainPos += getPadding(node, trailing[mainAxis]); - crossDim += getPadding(node, leading[crossAxis]) + - getPadding(node, trailing[crossAxis]); + mainPos += getPaddingAndBorder(node, trailing[mainAxis]); + crossDim += getPaddingAndBorder(node, leading[crossAxis]) + + getPaddingAndBorder(node, trailing[crossAxis]); if (isUndefined(node.layout[dim[mainAxis]]) && !mainDimInStyle) { node.layout[dim[mainAxis]] = mainPos > 0 ? mainPos : 0; @@ -279,9 +287,9 @@ var computeLayout = (function() { var/*css_align_t*/ alignItem = getAlignItem(node, child); var/*float*/ remainingCrossDim = node.layout[dim[crossAxis]] - getDimWithMargin(child, crossAxis) - - getPaddingAxis(node, crossAxis); + getPaddingAndBorderAxis(node, crossAxis); - var/*float*/ leadingCrossDim = getPadding(node, leading[crossAxis]); + var/*float*/ leadingCrossDim = getPaddingAndBorder(node, leading[crossAxis]); if (alignItem == CSS_ALIGN_FLEX_START) { // Do nothing } else if (alignItem == CSS_ALIGN_CENTER) { @@ -291,7 +299,7 @@ var computeLayout = (function() { } else if (alignItem == CSS_ALIGN_STRETCH) { if (!isDimDefined(child, crossAxis)) { child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] - - getPaddingAxis(node, crossAxis) - + getPaddingAndBorderAxis(node, crossAxis) - getMarginAxis(child, crossAxis); } } @@ -301,7 +309,7 @@ var computeLayout = (function() { child.layout[pos[crossAxis]] = getPosition(child, leading[crossAxis]) + getMargin(child, leading[crossAxis]); } else { - child.layout[pos[crossAxis]] += getPadding(node, leading[crossAxis]); + child.layout[pos[crossAxis]] += getPaddingAndBorder(node, leading[crossAxis]); } } } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index c7a3e903..4e2755ce 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -689,6 +689,17 @@ describe('Layout', function() { ) }); + it('should layout node with borderWidth and position: absolute, top', function() { + testLayout( + {style: {borderTopWidth: 1}, children: [ + {style: {top: -1, position: 'absolute'}} + ]}, + {width: 0, height: 1, top: 0, left: 0, children: [ + {width: 0, height: 0, top: 0, left: 0} + ]} + ) + }); + it('should layout randomly', function() {