diff --git a/src/Layout.js b/src/Layout.js index bc58b0e9..e20b837f 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -81,6 +81,13 @@ var computeLayout = (function() { return 'column'; } + function getPositionType(node) { + if ('position' in node.style) { + return node.style.position; + } + return 'relative'; + } + function getFlex(node) { return node.style.flex == 1; } @@ -165,7 +172,9 @@ var computeLayout = (function() { var/*css_node_t**/ child = node.children[i]; if (isUndefined(node.layout[dim[mainAxis]]) || !getFlex(child)) { layoutNode(child); - mainContentDim += getDimWithMargin(child, mainAxis); + if (getPositionType(child) === 'relative') { + mainContentDim += getDimWithMargin(child, mainAxis); + } } else { flexibleChildrenCount++; } @@ -210,7 +219,9 @@ var computeLayout = (function() { for (var/*int*/ i = 0; i < node.children.length; ++i) { var/*css_node_t**/ child = node.children[i]; child.layout[pos[mainAxis]] += mainPos; - mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim; + if (getPositionType(child) === 'relative') { + mainPos += getDimWithMargin(child, mainAxis) + betweenMainDim; + } if (!isUndefined(child.layout[dim[crossAxis]])) { var/*float*/ childCrossDim = getDimWithMargin(child, crossAxis); diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 69164de3..d9ad949f 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -467,6 +467,21 @@ describe('Layout', function() { ); }); + it('should layout node with position: absolute', function() { + testLayout( + {style: {width: 500, flexDirection: 'row'}, children: [ + {style: {flex: 1}}, + {style: {position: 'absolute', width: 50}}, + {style: {flex: 1}}, + ]}, + {width: 500, height: 0, top: 0, left: 0, children: [ + {width: 250, height: 0, top: 0, left: 0}, + {width: 50, height: 0, top: 0, left: 250}, + {width: 250, height: 0, top: 0, left: 250} + ]} + ); + }); + it('should layout randomly', function() { function RNG(seed) { this.state = seed; @@ -518,7 +533,7 @@ describe('Layout', function() { randEnum(node, 0.1, 'alignItems', ['flex-start', 'center', 'flex-end', 'stretch']); randEnum(node, 0.1, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']); randEnum(node, 0.1, 'flex', ['none', 1]); -// randEnum(node, 0.1, 'position', ['relative', 'absolute']); + randEnum(node, 0.1, 'position', ['relative', 'absolute']); randChildren(node, 0.2); return node; }