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

Fix layout for absolutely positioned nodes with absolutely positioned parents that have border and/or padding

Browse Source
This commit is contained in:
Andrew Rasmussen
2015-04-30 14:35:59 -07:00
parent 0af68d137a
commit 5f52e947cb
6 changed files with 320 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4754,6 +4754,134 @@ int main()
test("should layout minHeight without a flex child", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.dimensions[CSS_WIDTH] = 400;
node_0->style.dimensions[CSS_HEIGHT] = 400;
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.position_type = CSS_POSITION_ABSOLUTE;
node_1->style.padding[CSS_LEFT] = 10;
node_1->style.padding[CSS_TOP] = 10;
node_1->style.padding[CSS_RIGHT] = 10;
node_1->style.padding[CSS_BOTTOM] = 10;
node_1->style.position[CSS_LEFT] = 100;
node_1->style.position[CSS_TOP] = 100;
node_1->style.position[CSS_RIGHT] = 100;
node_1->style.position[CSS_BOTTOM] = 100;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->style.position_type = CSS_POSITION_ABSOLUTE;
node_2->style.position[CSS_LEFT] = 10;
node_2->style.position[CSS_TOP] = 10;
node_2->style.position[CSS_RIGHT] = 10;
node_2->style.position[CSS_BOTTOM] = 10;
}
}
}
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] = 400;
node_0->layout.dimensions[CSS_HEIGHT] = 400;
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] = 100;
node_1->layout.position[CSS_LEFT] = 100;
node_1->layout.dimensions[CSS_WIDTH] = 200;
node_1->layout.dimensions[CSS_HEIGHT] = 200;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->layout.position[CSS_TOP] = 10;
node_2->layout.position[CSS_LEFT] = 10;
node_2->layout.dimensions[CSS_WIDTH] = 180;
node_2->layout.dimensions[CSS_HEIGHT] = 180;
}
}
}
test("should layout absolutely positioned node with absolutely positioned padded parent", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.dimensions[CSS_WIDTH] = 400;
node_0->style.dimensions[CSS_HEIGHT] = 400;
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.position_type = CSS_POSITION_ABSOLUTE;
node_1->style.padding[CSS_LEFT] = 10;
node_1->style.padding[CSS_TOP] = 10;
node_1->style.padding[CSS_RIGHT] = 10;
node_1->style.padding[CSS_BOTTOM] = 10;
node_1->style.border[CSS_LEFT] = 1;
node_1->style.border[CSS_TOP] = 1;
node_1->style.border[CSS_RIGHT] = 1;
node_1->style.border[CSS_BOTTOM] = 1;
node_1->style.position[CSS_LEFT] = 100;
node_1->style.position[CSS_TOP] = 100;
node_1->style.position[CSS_RIGHT] = 100;
node_1->style.position[CSS_BOTTOM] = 100;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->style.position_type = CSS_POSITION_ABSOLUTE;
node_2->style.position[CSS_LEFT] = 10;
node_2->style.position[CSS_TOP] = 10;
node_2->style.position[CSS_RIGHT] = 10;
node_2->style.position[CSS_BOTTOM] = 10;
}
}
}
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] = 400;
node_0->layout.dimensions[CSS_HEIGHT] = 400;
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] = 100;
node_1->layout.position[CSS_LEFT] = 100;
node_1->layout.dimensions[CSS_WIDTH] = 200;
node_1->layout.dimensions[CSS_HEIGHT] = 200;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->layout.position[CSS_TOP] = 11;
node_2->layout.position[CSS_LEFT] = 11;
node_2->layout.dimensions[CSS_WIDTH] = 178;
node_2->layout.dimensions[CSS_HEIGHT] = 178;
}
}
}
test("should layout absolutely positioned node with absolutely positioned padded and bordered parent", root_node, root_layout);
}
/** END_GENERATED **/
return tests_finished();
}

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

@@ -1552,5 +1552,50 @@ describe('Layout', function() {
);
});
it('should layout absolutely positioned node with absolutely positioned padded parent', function() {
testLayout(
{style: {width: 400, height: 400}, children: [
{style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]},
]},
{width: 400, height: 400, top: 0, left: 0, children: [
{width: 200, height: 200, top: 100, left: 100, children: [
{width: 180, height: 180, top: 10, left: 10}
]}
]}
);
});
it('should layout absolutely positioned node with absolutely positioned padded and bordered parent', function() {
testLayout(
{style: {width: 400, height: 400}, children: [
{style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10, borderWidth: 1}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]},
]},
{width: 400, height: 400, top: 0, left: 0, children: [
{width: 200, height: 200, top: 100, left: 100, children: [
{width: 178, height: 178, top: 11, left: 11}
]}
]}
);
});
it('should layout absolutely positioned node with padded flex 1 parent', function() {
testLayout(
{style: {width: 400, height: 400}, children: [
{style: {flex: 1, padding: 10}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]},
]},
{width: 400, height: 400, top: 0, left: 0, children: [
{width: 400, height: 400, top: 0, left: 0, children: [
{width: 380, height: 380, top: 10, left: 10}
]}
]}
);
});
});