diff --git a/src/Layout.c b/src/Layout.c index 023db820..116e4ae3 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -624,6 +624,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction // If there's only one element, then it's bigger than the content // and needs its own line i != startLine) { + nonFlexibleChildrenCount --; alreadyComputedNextLayout = 1; break; } diff --git a/src/Layout.js b/src/Layout.js index 0880c7be..b263f66b 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -520,6 +520,7 @@ var computeLayout = (function() { // If there's only one element, then it's bigger than the content // and needs its own line i !== startLine) { + nonFlexibleChildrenCount --; alreadyComputedNextLayout = 1; break; } diff --git a/src/__tests__/Layout-test.c b/src/__tests__/Layout-test.c index 6560e7d5..6a67bb4c 100644 --- a/src/__tests__/Layout-test.c +++ b/src/__tests__/Layout-test.c @@ -6985,6 +6985,85 @@ int main() test("should layout nested nodes with mixed directions", root_node, root_layout); } + + { + css_node_t *root_node = new_test_css_node(); + { + css_node_t *node_0 = root_node; + node_0->style.flex_direction = CSS_FLEX_DIRECTION_ROW; + node_0->style.justify_content = CSS_JUSTIFY_SPACE_BETWEEN; + node_0->style.flex_wrap = CSS_WRAP; + node_0->style.dimensions[CSS_WIDTH] = 320; + node_0->style.dimensions[CSS_HEIGHT] = 200; + init_css_node_children(node_0, 6); + { + css_node_t *node_1; + node_1 = node_0->get_child(node_0->context, 0); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 1); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 2); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 3); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 4); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 5); + node_1->style.dimensions[CSS_WIDTH] = 100; + node_1->style.dimensions[CSS_HEIGHT] = 100; + } + } + + css_node_t *root_layout = new_test_css_node(); + { + css_node_t *node_0 = root_layout; + node_0->layout.position[CSS_TOP] = 0; + node_0->layout.position[CSS_LEFT] = 0; + node_0->layout.dimensions[CSS_WIDTH] = 320; + node_0->layout.dimensions[CSS_HEIGHT] = 200; + init_css_node_children(node_0, 6); + { + css_node_t *node_1; + node_1 = node_0->get_child(node_0->context, 0); + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 0; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 1); + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 110; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 2); + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 220; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 3); + node_1->layout.position[CSS_TOP] = 100; + node_1->layout.position[CSS_LEFT] = 0; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 4); + node_1->layout.position[CSS_TOP] = 100; + node_1->layout.position[CSS_LEFT] = 110; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 5); + node_1->layout.position[CSS_TOP] = 100; + node_1->layout.position[CSS_LEFT] = 220; + node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + } + } + + test("should correctly space wrapped nodes", root_node, root_layout); + } /** END_GENERATED **/ return tests_finished(); } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index b23f52fb..399e6a6c 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -2185,4 +2185,25 @@ describe('Layout', function() { ]} ); }); + + it('should correctly space wrapped nodes', function() { + testLayout( + {style: {width: 320, height: 200, flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap'}, children: [ + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}}, + {style: {width: 100, height: 100}}, + ]}, + {width: 320, height: 200, top: 0, left: 0, children: [ + {width: 100, height: 100, top: 0, left: 0}, + {width: 100, height: 100, top: 0, left: 110}, + {width: 100, height: 100, top: 0, left: 220}, + {width: 100, height: 100, top: 100, left: 0}, + {width: 100, height: 100, top: 100, left: 110}, + {width: 100, height: 100, top: 100, left: 220}, + ]} + ); + }); }); diff --git a/src/java/src/com/facebook/csslayout/LayoutEngine.java b/src/java/src/com/facebook/csslayout/LayoutEngine.java index de8f15cc..39d9b8be 100644 --- a/src/java/src/com/facebook/csslayout/LayoutEngine.java +++ b/src/java/src/com/facebook/csslayout/LayoutEngine.java @@ -609,6 +609,7 @@ public class LayoutEngine { // If there's only one element, then it's bigger than the content // and needs its own line i != startLine) { + nonFlexibleChildrenCount --; alreadyComputedNextLayout = 1; break; } diff --git a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java index 6efbef3a..e47c7989 100644 --- a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java +++ b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java @@ -7394,5 +7394,86 @@ public class LayoutEngineTest { test("should layout nested nodes with mixed directions", root_node, root_layout); } + + @Test + public void testCase167() + { + TestCSSNode root_node = new TestCSSNode(); + { + TestCSSNode node_0 = root_node; + node_0.style.flexDirection = CSSFlexDirection.ROW; + node_0.style.justifyContent = CSSJustify.SPACE_BETWEEN; + node_0.style.flexWrap = CSSWrap.WRAP; + node_0.style.width = 320; + node_0.style.height = 200; + addChildren(node_0, 6); + { + TestCSSNode node_1; + node_1 = node_0.getChildAt(0); + node_1.style.width = 100; + node_1.style.height = 100; + node_1 = node_0.getChildAt(1); + node_1.style.width = 100; + node_1.style.height = 100; + node_1 = node_0.getChildAt(2); + node_1.style.width = 100; + node_1.style.height = 100; + node_1 = node_0.getChildAt(3); + node_1.style.width = 100; + node_1.style.height = 100; + node_1 = node_0.getChildAt(4); + node_1.style.width = 100; + node_1.style.height = 100; + node_1 = node_0.getChildAt(5); + node_1.style.width = 100; + node_1.style.height = 100; + } + } + + TestCSSNode root_layout = new TestCSSNode(); + { + TestCSSNode node_0 = root_layout; + node_0.layout.top = 0; + node_0.layout.left = 0; + node_0.layout.width = 320; + node_0.layout.height = 200; + addChildren(node_0, 6); + { + TestCSSNode node_1; + node_1 = node_0.getChildAt(0); + node_1.layout.top = 0; + node_1.layout.left = 0; + node_1.layout.width = 100; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(1); + node_1.layout.top = 0; + node_1.layout.left = 110; + node_1.layout.width = 100; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(2); + node_1.layout.top = 0; + node_1.layout.left = 220; + node_1.layout.width = 100; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(3); + node_1.layout.top = 100; + node_1.layout.left = 0; + node_1.layout.width = 100; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(4); + node_1.layout.top = 100; + node_1.layout.left = 110; + node_1.layout.width = 100; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(5); + node_1.layout.top = 100; + node_1.layout.left = 220; + node_1.layout.width = 100; + node_1.layout.height = 100; + } + } + + test("should correctly space wrapped nodes", root_node, root_layout); + } /** END_GENERATED **/ }