DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Fixed spacing for wrapped elements

Browse Source
This commit is contained in:
Nick Lockwood
2015-05-12 09:54:02 +01:00
parent 729f7d42b1
commit bf1d7eacfd
6 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Layout.c
View File

@@ -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 // If there's only one element, then it's bigger than the content
// and needs its own line // and needs its own line
i != startLine) { i != startLine) {
nonFlexibleChildrenCount --;
alreadyComputedNextLayout = 1; alreadyComputedNextLayout = 1;
break; break;
} }

1
src/Layout.js
View File

@@ -520,6 +520,7 @@ var computeLayout = (function() {
// If there's only one element, then it's bigger than the content // If there's only one element, then it's bigger than the content
// and needs its own line // and needs its own line
i !== startLine) { i !== startLine) {
nonFlexibleChildrenCount --;
alreadyComputedNextLayout = 1; alreadyComputedNextLayout = 1;
break; break;
} }

79
src/__tests__/Layout-test.c
View File

@@ -6985,6 +6985,85 @@ int main()
test("should layout nested nodes with mixed directions", root_node, root_layout); 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 **/ /** END_GENERATED **/
return tests_finished(); return tests_finished();
} }

21
src/__tests__/Layout-test.js
View File

@@ -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},
]}
);
});
}); });

1
src/java/src/com/facebook/csslayout/LayoutEngine.java
View File

@@ -609,6 +609,7 @@ public class LayoutEngine {
// If there's only one element, then it's bigger than the content // If there's only one element, then it's bigger than the content
// and needs its own line // and needs its own line
i != startLine) { i != startLine) {
nonFlexibleChildrenCount --;
alreadyComputedNextLayout = 1; alreadyComputedNextLayout = 1;
break; break;
} }

81
src/java/tests/com/facebook/csslayout/LayoutEngineTest.java
View File

@@ -7394,5 +7394,86 @@ public class LayoutEngineTest {
test("should layout nested nodes with mixed directions", root_node, root_layout); 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 **/ /** END_GENERATED **/
} }