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

Fix positioning of items with min/max width/height

Browse Source 
We found a case where a flexible item with a max width that was supposed
to be centered was positioned in the wrong location.

The problem was with our 2 pass approach for sizing flexible items with
a min/max width/height. Items sized in the first pass were being double
counted when calculating the remainingFreeSpace. Specifically, their
sizes were being subtracted from remainingFreeSpace in both the first
and second passes.

I also noticed a second unrelated bug. We weren't correctly calculating
deltaFreeSpace in the first pass. When calculating deltaFreeSpace, we
need to take into account the flex basis like we do in the second pass.
Consequently, in the first pass I changed this:
  deltaFreeSpace -= boundMainSize;

To this:
  deltaFreeSpace -= boundMainSize - childFlexBasis;

The problem there was that we'd end up double counting childFlexBasis
in the remainingFreeSpace.
This commit is contained in:
Adam Comella
2016-04-28 17:07:34 -07:00
committed by Adam Comella
parent f3dd51ab97
commit 8779d942ea
13 changed files with 411 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6923,6 +6923,93 @@ int main()
test("should layout node with position absolute, top and left and min bounds", 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_CENTER;
node_0->style.dimensions[CSS_WIDTH] = 1000;
node_0->style.dimensions[CSS_HEIGHT] = 1000;
init_css_node_children(node_0, 1);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->style.flex = 1;
node_1->style.dimensions[CSS_HEIGHT] = 1000;
node_1->style.maxDimensions[CSS_WIDTH] = 600;
}
}
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] = 1000;
node_0->layout.dimensions[CSS_HEIGHT] = 1000;
init_css_node_children(node_0, 1);
{
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] = 200;
node_1->layout.dimensions[CSS_WIDTH] = 600;
node_1->layout.dimensions[CSS_HEIGHT] = 1000;
}
}
test("should center flexible item with max size", 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.dimensions[CSS_WIDTH] = 1000;
node_0->style.dimensions[CSS_HEIGHT] = 1000;
init_css_node_children(node_0, 2);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->style.flex = 1;
node_1->style.dimensions[CSS_WIDTH] = 100;
node_1->style.dimensions[CSS_HEIGHT] = 1000;
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.flex = 1;
node_1->style.dimensions[CSS_WIDTH] = 100;
node_1->style.dimensions[CSS_HEIGHT] = 1000;
node_1->style.maxDimensions[CSS_WIDTH] = 200;
}
}
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] = 1000;
node_0->layout.dimensions[CSS_HEIGHT] = 1000;
init_css_node_children(node_0, 2);
{
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] = 800;
node_1->layout.dimensions[CSS_HEIGHT] = 1000;
node_1 = node_0->get_child(node_0->context, 1);
node_1->layout.position[CSS_TOP] = 0;
node_1->layout.position[CSS_LEFT] = 800;
node_1->layout.dimensions[CSS_WIDTH] = 200;
node_1->layout.dimensions[CSS_HEIGHT] = 1000;
}
}
test("should correctly size flexible items with flex basis and a max width", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{