diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 3861c149..96df2fcf 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -240,23 +240,23 @@ var layoutTestUtils = (function() { return layout; } - function inplaceRoundNumbersInObject(aObj) { - if (!testMeasurePrecision) // undefined/0, disables rounding + function inplaceRoundNumbersInObject(obj) { + if (!testMeasurePrecision) { + // undefined/0, disables rounding return; + } - for (var key in aObj) { - if (!aObj.hasOwnProperty(key)) + for (var key in obj) { + if (!obj.hasOwnProperty(key)) { continue; - var val = aObj[key]; - switch (typeof(val)) { - case 'number': { - aObj[key] = Math.floor((val*testMeasurePrecision)+0.5)/testMeasurePrecision; - break; } - case 'object': { + + var val = obj[key]; + if (typeof val === 'number') { + obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) /testMeasurePrecision; + } + else if (typeof val === 'object') { inplaceRoundNumbersInObject(val); - break; - } } } } diff --git a/src/Layout.c b/src/Layout.c index 72b89936..de0788f9 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -781,10 +781,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { startLine = endLine; } - // + // // - // PIERRE: More than one line, we need to layout the crossAxis according to - // alignContent. + // Note(prenaux): More than one line, we need to layout the crossAxis + // according to alignContent. // // Note that we could probably remove and handle the one line case // here too, but for the moment this is safer since it won't interfere with @@ -795,25 +795,22 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { // section 9.4 // if (linesCount > 1 && - (!isUndefined(node->layout.dimensions[dim[crossAxis]]))) - { + !isUndefined(node->layout.dimensions[dim[crossAxis]])) { float nodeCrossAxisInnerSize = node->layout.dimensions[dim[crossAxis]] - getPaddingAndBorderAxis(node, crossAxis); float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim; - float crossDimAdd = 0; + float crossDimLead = 0; float currentLead = getPaddingAndBorder(node, leading[crossAxis]); css_align_t alignContent = getAlignContent(node); if (alignContent == CSS_ALIGN_FLEX_END) { currentLead += remainingCrossDim; - } - else if (alignContent == CSS_ALIGN_CENTER) { + } else if (alignContent == CSS_ALIGN_CENTER) { currentLead += remainingCrossDim / 2; - } - else if (alignContent == CSS_ALIGN_STRETCH) { + } else if (alignContent == CSS_ALIGN_STRETCH) { if (nodeCrossAxisInnerSize > linesCrossDim) { - crossDimAdd = (remainingCrossDim / linesCount); + crossDimLead = (remainingCrossDim / linesCount); } } @@ -823,14 +820,12 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { int lineIndex = -1; // get the first child on the current line - { - child = node->get_child(node->context, i); - if (getPositionType(child) != CSS_POSITION_RELATIVE) { - ++i; - continue; - } - lineIndex = child->line_index; + child = node->get_child(node->context, i); + if (getPositionType(child) != CSS_POSITION_RELATIVE) { + ++i; + continue; } + lineIndex = child->line_index; // compute the line's height and find the endIndex float lineHeight = 0; @@ -843,12 +838,14 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { break; } if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) { - lineHeight = fmaxf(lineHeight,child->layout.dimensions[dim[crossAxis]] + - getMarginAxis(child,crossAxis)); + lineHeight = fmaxf( + lineHeight, + child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis) + ); } } int endIndex = ii; - lineHeight += crossDimAdd; + lineHeight += crossDimLead; for (ii = startIndex; ii < endIndex; ++ii) { child = node->get_child(node->context, ii); @@ -857,25 +854,18 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { } css_align_t alignItem = getAlignItem(node, child); - float crossPosition = child->layout.position[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem? if (alignItem == CSS_ALIGN_FLEX_START) { - crossPosition = currentLead + getMargin(child,leading[crossAxis]); - } - else if (alignItem == CSS_ALIGN_FLEX_END) { - crossPosition = currentLead + lineHeight - - getMargin(child,trailing[crossAxis]) - - child->layout.dimensions[dim[crossAxis]]; - } - else if (alignItem == CSS_ALIGN_CENTER) { + child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]); + } else if (alignItem == CSS_ALIGN_FLEX_END) { + child->layout.position[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child->layout.dimensions[dim[crossAxis]]; + } else if (alignItem == CSS_ALIGN_CENTER) { float childHeight = child->layout.dimensions[dim[crossAxis]]; - crossPosition = currentLead + ((lineHeight - childHeight)/2); + child->layout.position[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2; + } else if (alignItem == CSS_ALIGN_STRETCH) { + child->layout.position[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]); + // TODO(prenaux): Correctly set the height of items with undefined + // (auto) crossAxis dimension. } - else if (alignItem == CSS_ALIGN_STRETCH) { - crossPosition = currentLead + getMargin(child,leading[crossAxis]); - // TODO: Correctly set the height of items with undefined (auto) - // crossAxis dimension. - } - child->layout.position[pos[crossAxis]] = crossPosition; } currentLead += lineHeight; @@ -905,8 +895,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { ); } - // Calculate dimensions for absolutely positioned elements - + // Calculate dimensions for absolutely positioned elements for (i = 0; i < node->children_count; ++i) { child = node->get_child(node->context, i); if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { diff --git a/src/Layout.js b/src/Layout.js index 8172ffe2..42c3657d 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -667,10 +667,10 @@ var computeLayout = (function() { startLine = endLine; } - // + // // - // PIERRE: More than one line, we need to layout the crossAxis according to - // alignContent. + // Note(prenaux): More than one line, we need to layout the crossAxis + // according to alignContent. // // Note that we could probably remove and handle the one line case // here too, but for the moment this is safer since it won't interfere with @@ -681,25 +681,22 @@ var computeLayout = (function() { // section 9.4 // if (linesCount > 1 && - (!isUndefined(node.layout[dim[crossAxis]]))) - { + !isUndefined(node.layout[dim[crossAxis]])) { var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] - getPaddingAndBorderAxis(node, crossAxis); var/*float*/ remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim; - var/*float*/ crossDimAdd = 0; + var/*float*/ crossDimLead = 0; var/*float*/ currentLead = getPaddingAndBorder(node, leading[crossAxis]); var/*css_align_t*/ alignContent = getAlignContent(node); - if (alignContent == CSS_ALIGN_FLEX_END) { + if (alignContent === CSS_ALIGN_FLEX_END) { currentLead += remainingCrossDim; - } - else if (alignContent == CSS_ALIGN_CENTER) { + } else if (alignContent === CSS_ALIGN_CENTER) { currentLead += remainingCrossDim / 2; - } - else if (alignContent == CSS_ALIGN_STRETCH) { + } else if (alignContent === CSS_ALIGN_STRETCH) { if (nodeCrossAxisInnerSize > linesCrossDim) { - crossDimAdd = (remainingCrossDim / linesCount); + crossDimLead = (remainingCrossDim / linesCount); } } @@ -709,59 +706,52 @@ var computeLayout = (function() { var/*int*/ lineIndex = -1; // get the first child on the current line - { - child = node.children[i]; - if (getPositionType(child) != CSS_POSITION_RELATIVE) { - ++i; - continue; - } - lineIndex = child.lineIndex; + child = node.children[i]; + if (getPositionType(child) !== CSS_POSITION_RELATIVE) { + ++i; + continue; } + lineIndex = child.lineIndex; // compute the line's height and find the endIndex var/*float*/ lineHeight = 0; for (ii = startIndex; ii < node.children.length; ++ii) { child = node.children[ii]; - if (getPositionType(child) != CSS_POSITION_RELATIVE) { + if (getPositionType(child) !== CSS_POSITION_RELATIVE) { continue; } - if (child.lineIndex != lineIndex) { + if (child.lineIndex !== lineIndex) { break; } if (!isUndefined(child.layout[dim[crossAxis]])) { - lineHeight = fmaxf(lineHeight,child.layout[dim[crossAxis]] + - getMarginAxis(child,crossAxis)); + lineHeight = fmaxf( + lineHeight, + child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis) + ); } } var/*int*/ endIndex = ii; - lineHeight += crossDimAdd; + lineHeight += crossDimLead; for (ii = startIndex; ii < endIndex; ++ii) { child = node.children[ii]; - if (getPositionType(child) != CSS_POSITION_RELATIVE) { + if (getPositionType(child) !== CSS_POSITION_RELATIVE) { continue; } var/*css_align_t*/ alignItem = getAlignItem(node, child); - var/*float*/ crossPosition = child.layout[pos[crossAxis]]; // preserve current position if someting goes wrong with alignItem? - if (alignItem == CSS_ALIGN_FLEX_START) { - crossPosition = currentLead + getMargin(child,leading[crossAxis]); - } - else if (alignItem == CSS_ALIGN_FLEX_END) { - crossPosition = currentLead + lineHeight - - getMargin(child,trailing[crossAxis]) - - child.layout[dim[crossAxis]]; - } - else if (alignItem == CSS_ALIGN_CENTER) { + if (alignItem === CSS_ALIGN_FLEX_START) { + child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]); + } else if (alignItem === CSS_ALIGN_FLEX_END) { + child.layout[pos[crossAxis]] = currentLead + lineHeight - getMargin(child,trailing[crossAxis]) - child.layout[dim[crossAxis]]; + } else if (alignItem === CSS_ALIGN_CENTER) { var/*float*/ childHeight = child.layout[dim[crossAxis]]; - crossPosition = currentLead + ((lineHeight - childHeight)/2); + child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2; + } else if (alignItem === CSS_ALIGN_STRETCH) { + child.layout[pos[crossAxis]] = currentLead + getMargin(child, leading[crossAxis]); + // TODO(prenaux): Correctly set the height of items with undefined + // (auto) crossAxis dimension. } - else if (alignItem == CSS_ALIGN_STRETCH) { - crossPosition = currentLead + getMargin(child,leading[crossAxis]); - // TODO: Correctly set the height of items with undefined (auto) - // crossAxis dimension. - } - child.layout[pos[crossAxis]] = crossPosition; } currentLead += lineHeight; @@ -791,8 +781,7 @@ var computeLayout = (function() { ); } - // Calculate dimensions for absolutely positioned elements - + // Calculate dimensions for absolutely positioned elements for (i = 0; i < node.children.length; ++i) { child = node.children[i]; if (getPositionType(child) === CSS_POSITION_ABSOLUTE) { diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 6ba84cdb..b084b434 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -1594,49 +1594,49 @@ describe('Layout alignContent', function() { var alignContentData = { style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'}, children: [ - /* 0 */ { style: {width: 50, height: 50, margin: 10} }, - /* 1 */ { style: {width: 50, height: 50, margin: 10} }, - /* 2 */ { style: {width: 50, height: 50, margin: 10} }, - /* 3 */ { style: {width: 50, height: 50, margin: 10} }, - /* 4 */ { style: {width: 50, height: 100, margin: 10} }, - /* 5 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} }, - /* 6 */ { style: {width: 50, height: 50, margin: 10} }, - /* 7 */ { style: {width: 50, height: 100, margin: 10} }, - /* 8 */ { style: {width: 50, height: 50, margin: 10} }, - /* 9 */ { style: {width: 50, height: 50, margin: 10} }, - /* 10 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' } }, - /* 11 */ { style: {width: 50, height: 50, margin: 10} }, - /* 12 */ { style: {width: 50, height: 50, margin: 10} }, - /* 13 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} }, - /* 14 */ { style: {width: 50, height: 50, margin: 10} }, + /* 0 */ {style: {width: 50, height: 50, margin: 10}}, + /* 1 */ {style: {width: 50, height: 50, margin: 10}}, + /* 2 */ {style: {width: 50, height: 50, margin: 10}}, + /* 3 */ {style: {width: 50, height: 50, margin: 10}}, + /* 4 */ {style: {width: 50, height: 100, margin: 10}}, + /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 6 */ {style: {width: 50, height: 50, margin: 10}}, + /* 7 */ {style: {width: 50, height: 100, margin: 10}}, + /* 8 */ {style: {width: 50, height: 50, margin: 10}}, + /* 9 */ {style: {width: 50, height: 50, margin: 10}}, + /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }}, + /* 11 */ {style: {width: 50, height: 50, margin: 10}}, + /* 12 */ {style: {width: 50, height: 50, margin: 10}}, + /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 14 */ {style: {width: 50, height: 50, margin: 10}}, ], }; it('should layout with alignContent: stretch, and alignItems: flex-start', function() { testLayout( alignContentData, - { width:300,height:380,top:0,left:0, children:[ - {width:50,height:50,top:10,left:10}, - {width:50,height:50,top:10,left:80}, - {width:50,height:50,top:10,left:150}, - {width:50,height:50,top:10,left:220}, - {width:50,height:100,top:92.5,left:10}, - {width:50,height:50,top:92.5,left:80}, - {width:50,height:50,top:92.5,left:150}, - {width:50,height:100,top:92.5,left:220}, - {width:50,height:50,top:225,left:10}, - {width:50,height:50,top:225,left:80}, - {width:50,height:50,top:225,left:150}, - {width:50,height:50,top:225,left:220}, - {width:50,height:50,top:307.5,left:10}, - {width:50,height:50,top:307.5,left:80}, - {width:50,height:50,top:307.5,left:150} + {width: 300, height: 380, top: 0, left: 0, children: [ + {width: 50, height: 50, top: 10, left: 10}, + {width: 50, height: 50, top: 10, left: 80}, + {width: 50, height: 50, top: 10, left: 150}, + {width: 50, height: 50, top: 10, left: 220}, + {width: 50, height: 100, top: 92.5, left: 10}, + {width: 50, height: 50, top: 92.5, left: 80}, + {width: 50, height: 50, top: 92.5, left: 150}, + {width: 50, height: 100, top: 92.5, left: 220}, + {width: 50, height: 50, top: 225, left: 10}, + {width: 50, height: 50, top: 225, left: 80}, + {width: 50, height: 50, top: 225, left: 150}, + {width: 50, height: 50, top: 225, left: 220}, + {width: 50, height: 50, top: 307.5, left: 10}, + {width: 50, height: 50, top: 307.5, left: 80}, + {width: 50, height: 50, top: 307.5, left: 150} ]} ); }); - function testAlignContent(aAlignContent, aAlignItems) { - it('should layout with alignContent: '+aAlignContent+', and alignItems: '+aAlignItems, function() { + function testAlignContent(alignContent, alignItems) { + it('should layout with alignContent: ' + alignContent + ', and alignItems: ' + alignItems, function() { testLayoutAgainstDomOnly(alignContentData); }); } diff --git a/src/java/src/com/facebook/csslayout/LayoutEngine.java b/src/java/src/com/facebook/csslayout/LayoutEngine.java index 28d32c02..197d353e 100644 --- a/src/java/src/com/facebook/csslayout/LayoutEngine.java +++ b/src/java/src/com/facebook/csslayout/LayoutEngine.java @@ -718,10 +718,10 @@ public class LayoutEngine { startLine = endLine; } - // + // // - // PIERRE: More than one line, we need to layout the crossAxis according to - // alignContent. + // Note(prenaux): More than one line, we need to layout the crossAxis + // according to alignContent. // // Note that we could probably remove and handle the one line case // here too, but for the moment this is safer since it won't interfere with @@ -732,25 +732,22 @@ public class LayoutEngine { // section 9.4 // if (linesCount > 1 && - (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis))))) - { + !CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) { float nodeCrossAxisInnerSize = getLayoutDimension(node, getDim(crossAxis)) - getPaddingAndBorderAxis(node, crossAxis); float remainingCrossDim = nodeCrossAxisInnerSize - linesCrossDim; - float crossDimAdd = 0; + float crossDimLead = 0; float currentLead = getPaddingAndBorder(node, getLeading(crossAxis)); CSSAlign alignContent = getAlignContent(node); if (alignContent == CSSAlign.FLEX_END) { currentLead = currentLead + remainingCrossDim; - } - else if (alignContent == CSSAlign.CENTER) { + } else if (alignContent == CSSAlign.CENTER) { currentLead = currentLead + remainingCrossDim / 2; - } - else if (alignContent == CSSAlign.STRETCH) { + } else if (alignContent == CSSAlign.STRETCH) { if (nodeCrossAxisInnerSize > linesCrossDim) { - crossDimAdd = (remainingCrossDim / linesCount); + crossDimLead = (remainingCrossDim / linesCount); } } @@ -760,14 +757,12 @@ public class LayoutEngine { int lineIndex = -1; // get the first child on the current line - { - child = node.getChildAt(i); - if (getPositionType(child) != CSSPositionType.RELATIVE) { - ++i; - continue; - } - lineIndex = child.lineIndex; + child = node.getChildAt(i); + if (getPositionType(child) != CSSPositionType.RELATIVE) { + ++i; + continue; } + lineIndex = child.lineIndex; // compute the line's height and find the endIndex float lineHeight = 0; @@ -780,12 +775,14 @@ public class LayoutEngine { break; } if (!CSSConstants.isUndefined(getLayoutDimension(child, getDim(crossAxis)))) { - lineHeight = Math.max(lineHeight,getLayoutDimension(child, getDim(crossAxis)) + - getMarginAxis(child,crossAxis)); + lineHeight = Math.max( + lineHeight, + getLayoutDimension(child, getDim(crossAxis)) + getMarginAxis(child, crossAxis) + ); } } int endIndex = ii; - lineHeight = lineHeight + crossDimAdd; + lineHeight = lineHeight + crossDimLead; for (ii = startIndex; ii < endIndex; ++ii) { child = node.getChildAt(ii); @@ -794,25 +791,18 @@ public class LayoutEngine { } CSSAlign alignItem = getAlignItem(node, child); - float crossPosition = getLayoutPosition(child, getPos(crossAxis)); // preserve current position if someting goes wrong with alignItem? if (alignItem == CSSAlign.FLEX_START) { - crossPosition = currentLead + getMargin(child,getLeading(crossAxis)); - } - else if (alignItem == CSSAlign.FLEX_END) { - crossPosition = currentLead + lineHeight - - getMargin(child,getTrailing(crossAxis)) - - getLayoutDimension(child, getDim(crossAxis)); - } - else if (alignItem == CSSAlign.CENTER) { + setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis))); + } else if (alignItem == CSSAlign.FLEX_END) { + setLayoutPosition(child, getPos(crossAxis), currentLead + lineHeight - getMargin(child,getTrailing(crossAxis)) - getLayoutDimension(child, getDim(crossAxis))); + } else if (alignItem == CSSAlign.CENTER) { float childHeight = getLayoutDimension(child, getDim(crossAxis)); - crossPosition = currentLead + ((lineHeight - childHeight)/2); + setLayoutPosition(child, getPos(crossAxis), currentLead + (lineHeight - childHeight) / 2); + } else if (alignItem == CSSAlign.STRETCH) { + setLayoutPosition(child, getPos(crossAxis), currentLead + getMargin(child, getLeading(crossAxis))); + // TODO(prenaux): Correctly set the height of items with undefined + // (auto) crossAxis dimension. } - else if (alignItem == CSSAlign.STRETCH) { - crossPosition = currentLead + getMargin(child,getLeading(crossAxis)); - // TODO: Correctly set the height of items with undefined (auto) - // crossAxis dimension. - } - setLayoutPosition(child, getPos(crossAxis), crossPosition); } currentLead = currentLead + lineHeight; @@ -842,8 +832,7 @@ public class LayoutEngine { )); } - // Calculate dimensions for absolutely positioned elements - + // Calculate dimensions for absolutely positioned elements for (i = 0; i < node.getChildCount(); ++i) { child = node.getChildAt(i); if (getPositionType(child) == CSSPositionType.ABSOLUTE) {