diff --git a/src/Layout.c b/src/Layout.c index ee2edd77..8574dcad 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -393,26 +393,6 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { // You never want to go smaller than padding getPaddingAndBorderAxis(child, crossAxis) ); - } else if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { - // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both - // left and right or top and bottom). - for (int ii = 0; ii < 2; ii++) { - css_flex_direction_t axis = ii ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; - if (!isUndefined(node->layout.dimensions[dim[axis]]) && - !isDimDefined(child, axis) && - isPosDefined(child, leading[axis]) && - isPosDefined(child, trailing[axis])) { - child->layout.dimensions[dim[axis]] = fmaxf( - node->layout.dimensions[dim[axis]] - - getPaddingAndBorderAxis(node, axis) - - getMarginAxis(child, axis) - - getPosition(child, leading[axis]) - - getPosition(child, trailing[axis]), - // You never want to go smaller than padding - getPaddingAndBorderAxis(child, axis) - ); - } - } } } @@ -549,7 +529,6 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { } } - // Position elements in the main axis and compute dimensions // At this point, all the children have their dimensions set. We need to @@ -666,6 +645,33 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth) { child->layout.position[pos[crossAxis]] += leadingCrossDim; } } + + // Calculate dimensions for absolutely positioned elements + + for (int i = 0; i < node->children_count; ++i) { + css_node_t* child = node->get_child(node->context, i); + if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { + // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both + // left and right or top and bottom). + for (int ii = 0; ii < 2; ii++) { + css_flex_direction_t axis = ii ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; + if (!isUndefined(node->layout.dimensions[dim[axis]]) && + !isDimDefined(child, axis) && + isPosDefined(child, leading[axis]) && + isPosDefined(child, trailing[axis])) { + child->layout.dimensions[dim[axis]] = fmaxf( + node->layout.dimensions[dim[axis]] - + getPaddingAndBorderAxis(node, axis) - + getMarginAxis(child, axis) - + getPosition(child, leading[axis]) - + getPosition(child, trailing[axis]), + // You never want to go smaller than padding + getPaddingAndBorderAxis(child, axis) + ); + } + } + } + } } void layoutNode(css_node_t *node, float parentMaxWidth) { diff --git a/src/Layout.js b/src/Layout.js index 91bd6f3f..42a66ca9 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -269,26 +269,6 @@ var computeLayout = (function() { // You never want to go smaller than padding getPaddingAndBorderAxis(child, crossAxis) ); - } else if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { - // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both - // left and right or top and bottom). - for (var/*int*/ ii = 0; ii < 2; ii++) { - var/*css_flex_direction_t*/ axis = ii ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; - if (!isUndefined(node.layout[dim[axis]]) && - !isDimDefined(child, axis) && - isPosDefined(child, leading[axis]) && - isPosDefined(child, trailing[axis])) { - child.layout[dim[axis]] = fmaxf( - node.layout[dim[axis]] - - getPaddingAndBorderAxis(node, axis) - - getMarginAxis(child, axis) - - getPosition(child, leading[axis]) - - getPosition(child, trailing[axis]), - // You never want to go smaller than padding - getPaddingAndBorderAxis(child, axis) - ); - } - } } } @@ -425,7 +405,6 @@ var computeLayout = (function() { } } - // Position elements in the main axis and compute dimensions // At this point, all the children have their dimensions set. We need to @@ -542,7 +521,34 @@ var computeLayout = (function() { child.layout[pos[crossAxis]] += leadingCrossDim; } } - } + + // Calculate dimensions for absolutely positioned elements + + for (var/*int*/ i = 0; i < node.children.length; ++i) { + var/*css_node_t**/ child = node.children[i]; + if (getPositionType(child) == CSS_POSITION_ABSOLUTE) { + // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both + // left and right or top and bottom). + for (var/*int*/ ii = 0; ii < 2; ii++) { + var/*css_flex_direction_t*/ axis = ii ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; + if (!isUndefined(node.layout[dim[axis]]) && + !isDimDefined(child, axis) && + isPosDefined(child, leading[axis]) && + isPosDefined(child, trailing[axis])) { + child.layout[dim[axis]] = fmaxf( + node.layout[dim[axis]] - + getPaddingAndBorderAxis(node, axis) - + getMarginAxis(child, axis) - + getPosition(child, leading[axis]) - + getPosition(child, trailing[axis]), + // You never want to go smaller than padding + getPaddingAndBorderAxis(child, axis) + ); + } + } + } + } + }; })(); diff --git a/src/__tests__/Layout-test.c b/src/__tests__/Layout-test.c index 8d6a3a7c..4e7ce09e 100644 --- a/src/__tests__/Layout-test.c +++ b/src/__tests__/Layout-test.c @@ -2473,7 +2473,7 @@ int main() 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] = 33; + node_0->layout.dimensions[CSS_WIDTH] = 34.671875; node_0->layout.dimensions[CSS_HEIGHT] = 18; } @@ -2505,14 +2505,6 @@ int main() css_node_t *root_node = new_test_css_node(); { css_node_t *node_0 = root_node; - node_0->style.margin[CSS_LEFT] = 5; - node_0->style.margin[CSS_TOP] = 5; - node_0->style.margin[CSS_RIGHT] = 5; - node_0->style.margin[CSS_BOTTOM] = 5; - node_0->style.padding[CSS_LEFT] = 5; - node_0->style.padding[CSS_TOP] = 5; - node_0->style.padding[CSS_RIGHT] = 5; - node_0->style.padding[CSS_BOTTOM] = 5; node_0->measure = measure; node_0->context = "loooooooooong with space"; } @@ -2520,10 +2512,10 @@ int main() css_node_t *root_layout = new_test_css_node(); { css_node_t *node_0 = root_layout; - node_0->layout.position[CSS_TOP] = 5; - node_0->layout.position[CSS_LEFT] = 5; - node_0->layout.dimensions[CSS_WIDTH] = 181; - node_0->layout.dimensions[CSS_HEIGHT] = 28; + node_0->layout.position[CSS_TOP] = 0; + node_0->layout.position[CSS_LEFT] = 0; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; + node_0->layout.dimensions[CSS_HEIGHT] = 18; } test("should layout node with text, padding and margin", root_node, root_layout); @@ -2759,7 +2751,7 @@ int main() 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_WIDTH] = 100.453125; node_1->layout.dimensions[CSS_HEIGHT] = 36; } } @@ -2807,7 +2799,7 @@ int main() node_1 = node_0->get_child(node_0->context, 0); node_1->layout.position[CSS_TOP] = 20; node_1->layout.position[CSS_LEFT] = 20; - node_1->layout.dimensions[CSS_WIDTH] = 100; + node_1->layout.dimensions[CSS_WIDTH] = 100.453125; node_1->layout.dimensions[CSS_HEIGHT] = 36; init_css_node_children(node_1, 1); { @@ -2815,7 +2807,7 @@ int main() node_2 = node_1->get_child(node_1->context, 0); node_2->layout.position[CSS_TOP] = 0; node_2->layout.position[CSS_LEFT] = 0; - node_2->layout.dimensions[CSS_WIDTH] = 100; + node_2->layout.dimensions[CSS_WIDTH] = 100.453125; node_2->layout.dimensions[CSS_HEIGHT] = 36; } } @@ -2946,7 +2938,7 @@ int main() node_2 = node_1->get_child(node_1->context, 0); node_2->layout.position[CSS_TOP] = 20; node_2->layout.position[CSS_LEFT] = 20; - node_2->layout.dimensions[CSS_WIDTH] = 171; + node_2->layout.dimensions[CSS_WIDTH] = 172.421875; node_2->layout.dimensions[CSS_HEIGHT] = 18; } } @@ -3130,6 +3122,49 @@ int main() test("should layout with negative flex", root_node, root_layout); } + { + css_node_t *root_node = new_test_css_node(); + { + css_node_t *node_0 = root_node; + 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.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 1); + node_1->style.position_type = CSS_POSITION_ABSOLUTE; + node_1->style.position[CSS_LEFT] = 0; + node_1->style.position[CSS_RIGHT] = 0; + } + } + + 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] = 50; + node_0->layout.dimensions[CSS_HEIGHT] = 100; + 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] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 1); + node_1->layout.position[CSS_TOP] = 100; + node_1->layout.position[CSS_LEFT] = 0; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 0; + } + } + + test("should layout with ne3gative flex", root_node, root_layout); + } + { css_node_t *root_node = new_test_css_node(); { @@ -3164,7 +3199,6 @@ int main() { 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->measure = measure; node_1->context = "loooooooooong with space"; } @@ -3290,7 +3324,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 18; node_0->layout.position[CSS_LEFT] = -5; - node_0->layout.dimensions[CSS_WIDTH] = 194; + node_0->layout.dimensions[CSS_WIDTH] = 195.421875; node_0->layout.dimensions[CSS_HEIGHT] = 338; } @@ -3383,7 +3417,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 10; node_0->layout.position[CSS_LEFT] = 0; - node_0->layout.dimensions[CSS_WIDTH] = 46; + node_0->layout.dimensions[CSS_WIDTH] = 47.671875; node_0->layout.dimensions[CSS_HEIGHT] = 116; init_css_node_children(node_0, 2); { @@ -3391,7 +3425,7 @@ int main() node_1 = node_0->get_child(node_0->context, 0); node_1->layout.position[CSS_TOP] = 25; node_1->layout.position[CSS_LEFT] = -7; - node_1->layout.dimensions[CSS_WIDTH] = 35; + node_1->layout.dimensions[CSS_WIDTH] = 36.671875; node_1->layout.dimensions[CSS_HEIGHT] = 633; node_1 = node_0->get_child(node_0->context, 1); node_1->layout.position[CSS_TOP] = 3; @@ -3512,7 +3546,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 4; node_0->layout.position[CSS_LEFT] = 13; - node_0->layout.dimensions[CSS_WIDTH] = 109; + node_0->layout.dimensions[CSS_WIDTH] = 110.671875; node_0->layout.dimensions[CSS_HEIGHT] = 757; init_css_node_children(node_0, 1); { @@ -3520,7 +3554,7 @@ int main() node_1 = node_0->get_child(node_0->context, 0); node_1->layout.position[CSS_TOP] = 35.5; node_1->layout.position[CSS_LEFT] = 6; - node_1->layout.dimensions[CSS_WIDTH] = 80; + node_1->layout.dimensions[CSS_WIDTH] = 81.671875; node_1->layout.dimensions[CSS_HEIGHT] = 669; init_css_node_children(node_1, 1); { @@ -3528,7 +3562,7 @@ int main() node_2 = node_1->get_child(node_1->context, 0); node_2->layout.position[CSS_TOP] = 37; node_2->layout.position[CSS_LEFT] = 21; - node_2->layout.dimensions[CSS_WIDTH] = 38; + node_2->layout.dimensions[CSS_WIDTH] = 39.671875; node_2->layout.dimensions[CSS_HEIGHT] = 626; } } @@ -3658,7 +3692,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 6; node_0->layout.position[CSS_LEFT] = 2; - node_0->layout.dimensions[CSS_WIDTH] = 187; + node_0->layout.dimensions[CSS_WIDTH] = 188.421875; node_0->layout.dimensions[CSS_HEIGHT] = 948; } @@ -3720,7 +3754,7 @@ int main() 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] = 171; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; node_0->layout.dimensions[CSS_HEIGHT] = 36; init_css_node_children(node_0, 1); { @@ -3728,7 +3762,7 @@ int main() 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] = 171; + node_1->layout.dimensions[CSS_WIDTH] = 172.421875; node_1->layout.dimensions[CSS_HEIGHT] = 36; init_css_node_children(node_1, 1); { @@ -4006,7 +4040,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 7; node_0->layout.position[CSS_LEFT] = 0; - node_0->layout.dimensions[CSS_WIDTH] = 45; + node_0->layout.dimensions[CSS_WIDTH] = 46.671875; node_0->layout.dimensions[CSS_HEIGHT] = 605; } @@ -4391,7 +4425,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 6; node_0->layout.position[CSS_LEFT] = -2; - node_0->layout.dimensions[CSS_WIDTH] = 171; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; node_0->layout.dimensions[CSS_HEIGHT] = 635; } @@ -4663,7 +4697,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 17; node_0->layout.position[CSS_LEFT] = 16; - node_0->layout.dimensions[CSS_WIDTH] = 171; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; node_0->layout.dimensions[CSS_HEIGHT] = 712; } @@ -4724,7 +4758,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = -10; node_0->layout.position[CSS_LEFT] = -15; - node_0->layout.dimensions[CSS_WIDTH] = 171; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; node_0->layout.dimensions[CSS_HEIGHT] = 335; } @@ -4878,8 +4912,8 @@ int main() css_node_t *node_2; node_2 = node_1->get_child(node_1->context, 0); node_2->layout.position[CSS_TOP] = 31; - node_2->layout.position[CSS_LEFT] = 806; - node_2->layout.dimensions[CSS_WIDTH] = 115; + node_2->layout.position[CSS_LEFT] = 804.328125; + node_2->layout.dimensions[CSS_WIDTH] = 116.671875; node_2->layout.dimensions[CSS_HEIGHT] = 898; init_css_node_children(node_2, 1); { @@ -4887,7 +4921,7 @@ int main() node_3 = node_2->get_child(node_2->context, 0); node_3->layout.position[CSS_TOP] = 1; node_3->layout.position[CSS_LEFT] = 6; - node_3->layout.dimensions[CSS_WIDTH] = 103; + node_3->layout.dimensions[CSS_WIDTH] = 104.671875; node_3->layout.dimensions[CSS_HEIGHT] = 274; init_css_node_children(node_3, 2); { @@ -4900,7 +4934,7 @@ int main() node_4 = node_3->get_child(node_3->context, 1); node_4->layout.position[CSS_TOP] = 208; node_4->layout.position[CSS_LEFT] = 34; - node_4->layout.dimensions[CSS_WIDTH] = 53; + node_4->layout.dimensions[CSS_WIDTH] = 54.671875; node_4->layout.dimensions[CSS_HEIGHT] = 37; } } @@ -4908,12 +4942,12 @@ int main() node_1 = node_0->get_child(node_0->context, 1); node_1->layout.position[CSS_TOP] = 33; node_1->layout.position[CSS_LEFT] = 23; - node_1->layout.dimensions[CSS_WIDTH] = 47; + node_1->layout.dimensions[CSS_WIDTH] = 48.671875; node_1->layout.dimensions[CSS_HEIGHT] = 49; node_1 = node_0->get_child(node_0->context, 2); node_1->layout.position[CSS_TOP] = 31.5; - node_1->layout.position[CSS_LEFT] = 66; - node_1->layout.dimensions[CSS_WIDTH] = 33; + node_1->layout.position[CSS_LEFT] = 67.671875; + node_1->layout.dimensions[CSS_WIDTH] = 34.671875; node_1->layout.dimensions[CSS_HEIGHT] = 46; } } @@ -4973,7 +5007,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 0; node_0->layout.position[CSS_LEFT] = -12; - node_0->layout.dimensions[CSS_WIDTH] = 33; + node_0->layout.dimensions[CSS_WIDTH] = 34.671875; node_0->layout.dimensions[CSS_HEIGHT] = 861; } @@ -5136,72 +5170,11 @@ int main() { css_node_t *node_0 = root_node; node_0->style.align_items = CSS_ALIGN_CENTER; - node_0->style.dimensions[CSS_WIDTH] = 632; - node_0->style.dimensions[CSS_HEIGHT] = 810; - node_0->style.margin[CSS_LEFT] = 1; - node_0->style.margin[CSS_TOP] = 1; - node_0->style.margin[CSS_RIGHT] = 1; - node_0->style.margin[CSS_BOTTOM] = 1; - node_0->style.margin[CSS_LEFT] = -9; - node_0->style.margin[CSS_TOP] = 10; - node_0->style.padding[CSS_BOTTOM] = 1; - node_0->style.border[CSS_RIGHT] = 3; - node_0->style.position[CSS_LEFT] = -4; 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_direction = CSS_FLEX_DIRECTION_COLUMN; - node_1->style.margin[CSS_TOP] = 15; - node_1->style.padding[CSS_TOP] = 0; - node_1->style.padding[CSS_BOTTOM] = 12; - 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.border[CSS_TOP] = 2; - node_1->style.position[CSS_LEFT] = -5; - init_css_node_children(node_1, 2); - { - css_node_t *node_2; - node_2 = node_1->get_child(node_1->context, 0); - node_2->style.justify_content = CSS_JUSTIFY_CENTER; - node_2->style.align_self = CSS_ALIGN_CENTER; - node_2->style.position_type = CSS_POSITION_ABSOLUTE; - node_2->style.dimensions[CSS_HEIGHT] = 674; - node_2->style.margin[CSS_RIGHT] = 11; - node_2->style.padding[CSS_LEFT] = 4; - node_2->style.padding[CSS_RIGHT] = 10; - node_2->style.border[CSS_LEFT] = 2; - node_2->style.border[CSS_TOP] = 1; - node_2->style.border[CSS_BOTTOM] = 1; - node_2->style.position[CSS_LEFT] = 6; - node_2 = node_1->get_child(node_1->context, 1); - node_2->style.flex_direction = CSS_FLEX_DIRECTION_ROW; - node_2->style.justify_content = CSS_JUSTIFY_FLEX_START; - node_2->style.dimensions[CSS_WIDTH] = 811; - node_2->style.margin[CSS_TOP] = -5; - node_2->style.padding[CSS_LEFT] = 16; - node_2->style.padding[CSS_TOP] = 16; - node_2->style.padding[CSS_RIGHT] = 16; - node_2->style.padding[CSS_BOTTOM] = 16; - node_2->style.border[CSS_LEFT] = 0; - node_2->measure = measure; - node_2->context = "small"; - } node_1 = node_0->get_child(node_0->context, 1); - node_1->style.flex_direction = CSS_FLEX_DIRECTION_ROW; - node_1->style.justify_content = CSS_JUSTIFY_CENTER; - node_1->style.dimensions[CSS_HEIGHT] = 51; - node_1->style.margin[CSS_TOP] = -4; - node_1->style.margin[CSS_RIGHT] = 14; - node_1->style.padding[CSS_LEFT] = 3; - node_1->style.padding[CSS_TOP] = 3; - node_1->style.padding[CSS_RIGHT] = 3; - node_1->style.padding[CSS_BOTTOM] = 3; - node_1->style.padding[CSS_LEFT] = 11; - node_1->style.padding[CSS_BOTTOM] = 18; - node_1->style.position[CSS_LEFT] = -9; node_1->measure = measure; node_1->context = "loooooooooong with space"; } @@ -5210,37 +5183,23 @@ int main() css_node_t *root_layout = new_test_css_node(); { css_node_t *node_0 = root_layout; - node_0->layout.position[CSS_TOP] = 10; - node_0->layout.position[CSS_LEFT] = -13; - node_0->layout.dimensions[CSS_WIDTH] = 632; - node_0->layout.dimensions[CSS_HEIGHT] = 810; + node_0->layout.position[CSS_TOP] = 0; + node_0->layout.position[CSS_LEFT] = 0; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; + node_0->layout.dimensions[CSS_HEIGHT] = 18; 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] = 15; - node_1->layout.position[CSS_LEFT] = -97; - node_1->layout.dimensions[CSS_WIDTH] = 813; - node_1->layout.dimensions[CSS_HEIGHT] = 60; - init_css_node_children(node_1, 2); - { - css_node_t *node_2; - node_2 = node_1->get_child(node_1->context, 0); - node_2->layout.position[CSS_TOP] = 2; - node_2->layout.position[CSS_LEFT] = 7; - node_2->layout.dimensions[CSS_WIDTH] = 16; - node_2->layout.dimensions[CSS_HEIGHT] = 674; - node_2 = node_1->get_child(node_1->context, 1); - node_2->layout.position[CSS_TOP] = -3; - node_2->layout.position[CSS_LEFT] = 1; - node_2->layout.dimensions[CSS_WIDTH] = 811; - node_2->layout.dimensions[CSS_HEIGHT] = 50; - } + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 86.203125; + node_1->layout.dimensions[CSS_WIDTH] = 0; + node_1->layout.dimensions[CSS_HEIGHT] = 0; node_1 = node_0->get_child(node_0->context, 1); - node_1->layout.position[CSS_TOP] = 71; - node_1->layout.position[CSS_LEFT] = 206; - node_1->layout.dimensions[CSS_WIDTH] = 185; - node_1->layout.dimensions[CSS_HEIGHT] = 51; + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 0; + node_1->layout.dimensions[CSS_WIDTH] = 172.421875; + node_1->layout.dimensions[CSS_HEIGHT] = 18; } } @@ -5403,85 +5362,13 @@ int main() css_node_t *root_node = new_test_css_node(); { css_node_t *node_0 = root_node; - node_0->style.justify_content = CSS_JUSTIFY_CENTER; - node_0->style.align_items = CSS_ALIGN_CENTER; - node_0->style.margin[CSS_TOP] = 7; - node_0->style.padding[CSS_LEFT] = 8; - node_0->style.padding[CSS_TOP] = 8; - node_0->style.padding[CSS_RIGHT] = 8; - node_0->style.padding[CSS_BOTTOM] = 8; - node_0->style.padding[CSS_BOTTOM] = 18; - node_0->style.border[CSS_RIGHT] = 0; - node_0->style.position[CSS_LEFT] = 8; - node_0->style.position[CSS_TOP] = 1; - init_css_node_children(node_0, 4); + 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.justify_content = CSS_JUSTIFY_FLEX_END; - node_1->style.align_items = CSS_ALIGN_CENTER; - node_1->style.align_self = CSS_ALIGN_STRETCH; - node_1->style.dimensions[CSS_HEIGHT] = 952; - node_1->style.margin[CSS_LEFT] = 17; - node_1->style.margin[CSS_TOP] = 17; - node_1->style.margin[CSS_RIGHT] = 17; - node_1->style.margin[CSS_BOTTOM] = 17; - node_1->style.margin[CSS_TOP] = 1; - node_1->style.margin[CSS_RIGHT] = 0; - node_1->style.padding[CSS_LEFT] = 11; - node_1->style.padding[CSS_TOP] = 11; - node_1->style.padding[CSS_RIGHT] = 11; - node_1->style.padding[CSS_BOTTOM] = 11; - node_1->style.padding[CSS_BOTTOM] = 11; - node_1->style.border[CSS_BOTTOM] = 2; - node_1->style.position[CSS_TOP] = 4; + node_1->style.dimensions[CSS_WIDTH] = 1000; node_1 = node_0->get_child(node_0->context, 1); - node_1->style.flex_direction = CSS_FLEX_DIRECTION_ROW; - node_1->style.justify_content = CSS_JUSTIFY_SPACE_AROUND; - node_1->style.dimensions[CSS_WIDTH] = 229; - node_1->style.margin[CSS_LEFT] = 1; - node_1->style.margin[CSS_TOP] = 1; - node_1->style.margin[CSS_RIGHT] = 1; - node_1->style.margin[CSS_BOTTOM] = 1; - node_1->style.margin[CSS_TOP] = 12; - node_1->style.margin[CSS_RIGHT] = -2; - node_1->style.padding[CSS_RIGHT] = 14; - node_1->style.border[CSS_LEFT] = 3; - node_1->style.border[CSS_TOP] = 0; - node_1->style.border[CSS_BOTTOM] = 3; - node_1->style.position[CSS_TOP] = -3; - node_1->measure = measure; - node_1->context = "loooooooooong with space"; - node_1 = node_0->get_child(node_0->context, 2); - node_1->style.flex_direction = CSS_FLEX_DIRECTION_ROW; - node_1->style.justify_content = CSS_JUSTIFY_SPACE_AROUND; - node_1->style.align_self = CSS_ALIGN_FLEX_END; - node_1->style.dimensions[CSS_WIDTH] = 971; - node_1->style.margin[CSS_LEFT] = 15; - node_1->style.margin[CSS_TOP] = 1; - node_1->style.padding[CSS_LEFT] = 0; - node_1->style.padding[CSS_TOP] = 0; - node_1->style.padding[CSS_RIGHT] = 0; - node_1->style.padding[CSS_BOTTOM] = 0; - node_1->measure = measure; - node_1->context = "small"; - node_1 = node_0->get_child(node_0->context, 3); - node_1->style.justify_content = CSS_JUSTIFY_FLEX_END; node_1->style.align_self = CSS_ALIGN_CENTER; - node_1->style.margin[CSS_LEFT] = 0; - node_1->style.margin[CSS_TOP] = 0; - node_1->style.margin[CSS_RIGHT] = 0; - node_1->style.margin[CSS_BOTTOM] = 0; - node_1->style.margin[CSS_RIGHT] = 7; - node_1->style.padding[CSS_BOTTOM] = 16; - node_1->style.border[CSS_LEFT] = 0; - node_1->style.border[CSS_TOP] = 0; - node_1->style.border[CSS_RIGHT] = 0; - node_1->style.border[CSS_BOTTOM] = 0; - node_1->style.border[CSS_LEFT] = 2; - node_1->style.border[CSS_TOP] = 1; - node_1->style.border[CSS_RIGHT] = 0; - node_1->style.position[CSS_TOP] = -5; node_1->measure = measure; node_1->context = "small"; } @@ -5490,33 +5377,23 @@ int main() css_node_t *root_layout = new_test_css_node(); { css_node_t *node_0 = root_layout; - node_0->layout.position[CSS_TOP] = 8; - node_0->layout.position[CSS_LEFT] = 8; - node_0->layout.dimensions[CSS_WIDTH] = 1002; - node_0->layout.dimensions[CSS_HEIGHT] = 1084; - init_css_node_children(node_0, 4); + 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] = 18; + 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] = 13; - node_1->layout.position[CSS_LEFT] = 25; - node_1->layout.dimensions[CSS_WIDTH] = 969; - node_1->layout.dimensions[CSS_HEIGHT] = 952; + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 0; + node_1->layout.dimensions[CSS_WIDTH] = 1000; + node_1->layout.dimensions[CSS_HEIGHT] = 0; node_1 = node_0->get_child(node_0->context, 1); - node_1->layout.position[CSS_TOP] = 987; - node_1->layout.position[CSS_LEFT] = 388; - node_1->layout.dimensions[CSS_WIDTH] = 229; - node_1->layout.dimensions[CSS_HEIGHT] = 21; - node_1 = node_0->get_child(node_0->context, 2); - node_1->layout.position[CSS_TOP] = 1013; - node_1->layout.position[CSS_LEFT] = 23; - node_1->layout.dimensions[CSS_WIDTH] = 971; + node_1->layout.position[CSS_TOP] = 0; + node_1->layout.position[CSS_LEFT] = 482.65625; + node_1->layout.dimensions[CSS_WIDTH] = 34.671875; node_1->layout.dimensions[CSS_HEIGHT] = 18; - node_1 = node_0->get_child(node_0->context, 3); - node_1->layout.position[CSS_TOP] = 1026; - node_1->layout.position[CSS_LEFT] = 480; - node_1->layout.dimensions[CSS_WIDTH] = 35; - node_1->layout.dimensions[CSS_HEIGHT] = 35; } } @@ -5764,7 +5641,7 @@ int main() node_2 = node_1->get_child(node_1->context, 0); node_2->layout.position[CSS_TOP] = 0; node_2->layout.position[CSS_LEFT] = 6; - node_2->layout.dimensions[CSS_WIDTH] = 211; + node_2->layout.dimensions[CSS_WIDTH] = 212.421875; node_2->layout.dimensions[CSS_HEIGHT] = 193; init_css_node_children(node_2, 3); { @@ -5772,12 +5649,12 @@ int main() node_3 = node_2->get_child(node_2->context, 0); node_3->layout.position[CSS_TOP] = 7; node_3->layout.position[CSS_LEFT] = 11; - node_3->layout.dimensions[CSS_WIDTH] = 177; + node_3->layout.dimensions[CSS_WIDTH] = 178.421875; node_3->layout.dimensions[CSS_HEIGHT] = 32; node_3 = node_2->get_child(node_2->context, 1); node_3->layout.position[CSS_TOP] = 49; - node_3->layout.position[CSS_LEFT] = 53; - node_3->layout.dimensions[CSS_WIDTH] = 92; + node_3->layout.position[CSS_LEFT] = 52.875; + node_3->layout.dimensions[CSS_WIDTH] = 93.671875; node_3->layout.dimensions[CSS_HEIGHT] = 128; init_css_node_children(node_3, 2); { @@ -5785,7 +5662,7 @@ int main() node_4 = node_3->get_child(node_3->context, 0); node_4->layout.position[CSS_TOP] = 26; node_4->layout.position[CSS_LEFT] = 18; - node_4->layout.dimensions[CSS_WIDTH] = 49; + node_4->layout.dimensions[CSS_WIDTH] = 50.671875; node_4->layout.dimensions[CSS_HEIGHT] = 96; node_4 = node_3->get_child(node_3->context, 1); node_4->layout.position[CSS_TOP] = 123; @@ -5805,7 +5682,7 @@ int main() node_3 = node_2->get_child(node_2->context, 2); node_3->layout.position[CSS_TOP] = 183; node_3->layout.position[CSS_LEFT] = 17; - node_3->layout.dimensions[CSS_WIDTH] = 196; + node_3->layout.dimensions[CSS_WIDTH] = 197.421875; node_3->layout.dimensions[CSS_HEIGHT] = 18; } } @@ -5930,7 +5807,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 20; node_0->layout.position[CSS_LEFT] = -5; - node_0->layout.dimensions[CSS_WIDTH] = 187; + node_0->layout.dimensions[CSS_WIDTH] = 188.421875; node_0->layout.dimensions[CSS_HEIGHT] = 20; } @@ -6260,7 +6137,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = -13; node_0->layout.position[CSS_LEFT] = 18; - node_0->layout.dimensions[CSS_WIDTH] = 171; + node_0->layout.dimensions[CSS_WIDTH] = 172.421875; node_0->layout.dimensions[CSS_HEIGHT] = 20; } @@ -6440,7 +6317,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 4; node_0->layout.position[CSS_LEFT] = -1; - node_0->layout.dimensions[CSS_WIDTH] = 36; + node_0->layout.dimensions[CSS_WIDTH] = 37.671875; node_0->layout.dimensions[CSS_HEIGHT] = 21; } @@ -6467,7 +6344,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 0; node_0->layout.position[CSS_LEFT] = -8; - node_0->layout.dimensions[CSS_WIDTH] = 33; + node_0->layout.dimensions[CSS_WIDTH] = 34.671875; node_0->layout.dimensions[CSS_HEIGHT] = 20; } @@ -6580,7 +6457,7 @@ int main() css_node_t *node_0 = root_layout; node_0->layout.position[CSS_TOP] = 3; node_0->layout.position[CSS_LEFT] = 0; - node_0->layout.dimensions[CSS_WIDTH] = 35; + node_0->layout.dimensions[CSS_WIDTH] = 36.671875; node_0->layout.dimensions[CSS_HEIGHT] = 863; } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index f73995ac..d40358ae 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -945,6 +945,19 @@ describe('Layout', function() { ); }); + it('should layout with ne3gative flex', function() { + testLayout( + {style: {}, children: [ + {style: {width: 50, height: 100}}, + {style: {position: 'absolute', left: 0, right: 0}} + ]}, + {width: 50, height: 100, top: 0, left: 0, children: [ + {width: 50, height: 100, top: 0, left: 0}, + {width: 50, height: 0, top: 100, left: 0}, + ]} + ); + }); + xit('should layout text with alignItems: stretch', function() { testLayout( {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}}, diff --git a/src/transpile.html b/src/transpile.html index 179a4f9c..9a838e86 100644 --- a/src/transpile.html +++ b/src/transpile.html @@ -53,7 +53,9 @@ var layoutTestUtils = { computeLayout: computeLayout, computeDOMLayout: computeDOMLayout, reduceTest: reduceTest, - text: text + text: text, + texts: layoutTestUtils.texts, + textSizes: layoutTestUtils.textSizes, }; function describe(name, cb) { cb(); } function it(name, cb) { currentTest = name; cb(); }