diff --git a/Makefile b/Makefile index b3f66362..7457d412 100644 --- a/Makefile +++ b/Makefile @@ -55,3 +55,9 @@ transpile_all: ./src/transpile.js debug: @gcc -std=c99 -ggdb $(FILES) -lm -o $(C_TEST_EXE) && $(LLDB) $(C_TEST_EXE) @rm $(C_TEST_EXE) + +ifeq ($(OS),Windows_NT) +c_test_msvc: c + @cl -nologo -Zi -Tpsrc/__tests__/Layout-test.c -Tpsrc/Layout.c -Tpsrc/Layout-test-utils.c -link -incremental:no -out:"$(C_TEST_EXE)" && "$(C_TEST_EXE)" + @rm "$(C_TEST_EXE)" ./*.obj ./*.pdb +endif diff --git a/src/Layout-test-utils.c b/src/Layout-test-utils.c index 6a28f1f4..0f89339a 100644 --- a/src/Layout-test-utils.c +++ b/src/Layout-test-utils.c @@ -10,6 +10,17 @@ #include "Layout-test-utils.h" #include +#ifdef _MSC_VER +#include +#define isnan _isnan +__forceinline const float fmaxf(const float a, const float b) { + return (a > b) ? a : b; +} +__forceinline const float fminf(const float a, const float b) { + return (a < b) ? a : b; +} +#endif + /** START_GENERATED **/ #define SMALL_WIDTH 35 #define SMALL_HEIGHT 18 @@ -30,7 +41,8 @@ typedef struct failed_test_t { static failed_test_t *failed_test_head = NULL; static failed_test_t *failed_test_tail = NULL; static void add_failed_test(const char *name, css_node_t *style, css_node_t *expected) { - failed_test_t *failed_test = malloc(sizeof(failed_test_t)); + failed_test_t *failed_test = (failed_test_t *)malloc(sizeof(failed_test_t)); + failed_test->next = NULL; failed_test->name = name; failed_test->style = style; failed_test->expected = expected; @@ -65,7 +77,7 @@ static bool are_layout_equal(css_node_t *a, css_node_t *b) { } css_dim_t measure(void *context, float width) { - const char *text = context; + const char *text = (const char *)context; css_dim_t dim; if (width != width) { width = 1000000; @@ -87,7 +99,10 @@ css_dim_t measure(void *context, float width) { return dim; } +static int test_ran_count = 0; void test(const char *name, css_node_t *style, css_node_t *expected_layout) { + ++test_ran_count; + layoutNode(style, CSS_UNDEFINED); if (!are_layout_equal(style, expected_layout)) { @@ -109,12 +124,12 @@ int tests_finished() { printf("%sFAIL%s %s\n", "\x1B[31m", "\x1B[0m", failed_test->name); printf("Input: "); - print_css_node(failed_test->style, CSS_PRINT_STYLE | CSS_PRINT_CHILDREN); + print_css_node(failed_test->style, (css_print_options_t)(CSS_PRINT_STYLE | CSS_PRINT_CHILDREN)); printf("Output: "); - print_css_node(failed_test->style, CSS_PRINT_LAYOUT | CSS_PRINT_CHILDREN); + print_css_node(failed_test->style, (css_print_options_t)(CSS_PRINT_LAYOUT | CSS_PRINT_CHILDREN)); printf("Expected: "); - print_css_node(failed_test->expected, CSS_PRINT_LAYOUT | CSS_PRINT_CHILDREN); + print_css_node(failed_test->expected, (css_print_options_t)(CSS_PRINT_LAYOUT | CSS_PRINT_CHILDREN)); free_css_node(failed_test->style); free_css_node(failed_test->expected); @@ -131,7 +146,7 @@ int tests_finished() { printf("TESTS FAILED: %d\n", tests_failed); return 1; } else { - printf("ALL TESTS PASSED\n"); + printf("ALL TESTS PASSED: %d tests ran.\n", test_ran_count); return 0; } } diff --git a/src/Layout-test-utils.h b/src/Layout-test-utils.h index 7a04f5a3..73569cce 100644 --- a/src/Layout-test-utils.h +++ b/src/Layout-test-utils.h @@ -9,7 +9,6 @@ #include "Layout.h" #include -#include #include void test(const char *name, css_node_t *style, css_node_t *expected_layout); diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 2eaa18e6..d0e66b34 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -253,7 +253,7 @@ var layoutTestUtils = (function() { var val = obj[key]; if (typeof val === 'number') { - obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) /testMeasurePrecision; + obj[key] = Math.floor((val * testMeasurePrecision) + 0.5) / testMeasurePrecision; } else if (typeof val === 'object') { inplaceRoundNumbersInObject(val); diff --git a/src/Layout.c b/src/Layout.c index 7694aed1..d44c6b8c 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -142,6 +142,14 @@ static void print_css_node_rec( printf("alignItems: 'stretch', "); } + if (node->style.align_content == CSS_ALIGN_CENTER) { + printf("alignContent: 'center', "); + } else if (node->style.align_content == CSS_ALIGN_FLEX_END) { + printf("alignContent: 'flex-end', "); + } else if (node->style.align_content == CSS_ALIGN_STRETCH) { + printf("alignContent: 'stretch', "); + } + if (node->style.align_self == CSS_ALIGN_FLEX_START) { printf("alignSelf: 'flex-start', "); } else if (node->style.align_self == CSS_ALIGN_CENTER) { diff --git a/src/__tests__/Layout-test.c b/src/__tests__/Layout-test.c index 16e7ea65..269ce927 100644 --- a/src/__tests__/Layout-test.c +++ b/src/__tests__/Layout-test.c @@ -4873,6 +4873,221 @@ int main() test("should layout absolutely positioned node with padded flex 1 parent", 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.align_content = CSS_ALIGN_STRETCH; + node_0->style.align_items = CSS_ALIGN_FLEX_START; + node_0->style.flex_wrap = CSS_WRAP; + node_0->style.dimensions[CSS_WIDTH] = 300; + node_0->style.dimensions[CSS_HEIGHT] = 380; + init_css_node_children(node_0, 15); + { + 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] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 1); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 2); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 3); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 4); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 5); + node_1->style.align_self = CSS_ALIGN_FLEX_START; + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 6); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 7); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 100; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 8); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 9); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 10); + node_1->style.align_self = CSS_ALIGN_FLEX_START; + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 11); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 12); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 13); + node_1->style.align_self = CSS_ALIGN_FLEX_START; + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[CSS_BOTTOM] = 10; + node_1 = node_0->get_child(node_0->context, 14); + node_1->style.dimensions[CSS_WIDTH] = 50; + node_1->style.dimensions[CSS_HEIGHT] = 50; + node_1->style.margin[CSS_LEFT] = 10; + node_1->style.margin[CSS_TOP] = 10; + node_1->style.margin[CSS_RIGHT] = 10; + node_1->style.margin[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] = 300; + node_0->layout.dimensions[CSS_HEIGHT] = 380; + init_css_node_children(node_0, 15); + { + css_node_t *node_1; + node_1 = node_0->get_child(node_0->context, 0); + node_1->layout.position[CSS_TOP] = 10; + node_1->layout.position[CSS_LEFT] = 10; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 1); + node_1->layout.position[CSS_TOP] = 10; + node_1->layout.position[CSS_LEFT] = 80; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 2); + node_1->layout.position[CSS_TOP] = 10; + node_1->layout.position[CSS_LEFT] = 150; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 3); + node_1->layout.position[CSS_TOP] = 10; + node_1->layout.position[CSS_LEFT] = 220; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 4); + node_1->layout.position[CSS_TOP] = 92.5; + node_1->layout.position[CSS_LEFT] = 10; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 5); + node_1->layout.position[CSS_TOP] = 92.5; + node_1->layout.position[CSS_LEFT] = 80; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 6); + node_1->layout.position[CSS_TOP] = 92.5; + node_1->layout.position[CSS_LEFT] = 150; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 7); + node_1->layout.position[CSS_TOP] = 92.5; + node_1->layout.position[CSS_LEFT] = 220; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 100; + node_1 = node_0->get_child(node_0->context, 8); + node_1->layout.position[CSS_TOP] = 225; + node_1->layout.position[CSS_LEFT] = 10; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 9); + node_1->layout.position[CSS_TOP] = 225; + node_1->layout.position[CSS_LEFT] = 80; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 10); + node_1->layout.position[CSS_TOP] = 225; + node_1->layout.position[CSS_LEFT] = 150; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 11); + node_1->layout.position[CSS_TOP] = 225; + node_1->layout.position[CSS_LEFT] = 220; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 12); + node_1->layout.position[CSS_TOP] = 307.5; + node_1->layout.position[CSS_LEFT] = 10; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 13); + node_1->layout.position[CSS_TOP] = 307.5; + node_1->layout.position[CSS_LEFT] = 80; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + node_1 = node_0->get_child(node_0->context, 14); + node_1->layout.position[CSS_TOP] = 307.5; + node_1->layout.position[CSS_LEFT] = 150; + node_1->layout.dimensions[CSS_WIDTH] = 50; + node_1->layout.dimensions[CSS_HEIGHT] = 50; + } + } + + test("should layout with alignContent: stretch, and alignItems: flex-start", root_node, root_layout); + } /** END_GENERATED **/ return tests_finished(); } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index b084b434..6ff28331 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -1591,30 +1591,27 @@ describe('Layout', function() { describe('Layout alignContent', function() { - var alignContentData = { - style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'}, - children: [ - /* 0 */ {style: {width: 50, height: 50, margin: 10}}, - /* 1 */ {style: {width: 50, height: 50, margin: 10}}, - /* 2 */ {style: {width: 50, height: 50, margin: 10}}, - /* 3 */ {style: {width: 50, height: 50, margin: 10}}, - /* 4 */ {style: {width: 50, height: 100, margin: 10}}, - /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, - /* 6 */ {style: {width: 50, height: 50, margin: 10}}, - /* 7 */ {style: {width: 50, height: 100, margin: 10}}, - /* 8 */ {style: {width: 50, height: 50, margin: 10}}, - /* 9 */ {style: {width: 50, height: 50, margin: 10}}, - /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }}, - /* 11 */ {style: {width: 50, height: 50, margin: 10}}, - /* 12 */ {style: {width: 50, height: 50, margin: 10}}, - /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, - /* 14 */ {style: {width: 50, height: 50, margin: 10}}, - ], - }; - it('should layout with alignContent: stretch, and alignItems: flex-start', function() { testLayout( - alignContentData, + {style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap', alignContent: 'stretch', alignItems: 'flex-start'}, + children: [ + /* 0 */ {style: {width: 50, height: 50, margin: 10}}, + /* 1 */ {style: {width: 50, height: 50, margin: 10}}, + /* 2 */ {style: {width: 50, height: 50, margin: 10}}, + /* 3 */ {style: {width: 50, height: 50, margin: 10}}, + /* 4 */ {style: {width: 50, height: 100, margin: 10}}, + /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 6 */ {style: {width: 50, height: 50, margin: 10}}, + /* 7 */ {style: {width: 50, height: 100, margin: 10}}, + /* 8 */ {style: {width: 50, height: 50, margin: 10}}, + /* 9 */ {style: {width: 50, height: 50, margin: 10}}, + /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }}, + /* 11 */ {style: {width: 50, height: 50, margin: 10}}, + /* 12 */ {style: {width: 50, height: 50, margin: 10}}, + /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 14 */ {style: {width: 50, height: 50, margin: 10}}, + ], + }, {width: 300, height: 380, top: 0, left: 0, children: [ {width: 50, height: 50, top: 10, left: 10}, {width: 50, height: 50, top: 10, left: 80}, @@ -1635,13 +1632,32 @@ describe('Layout alignContent', function() { ); }); + function testAlignContent(alignContent, alignItems) { it('should layout with alignContent: ' + alignContent + ', and alignItems: ' + alignItems, function() { - testLayoutAgainstDomOnly(alignContentData); + testLayoutAgainstDomOnly( + {style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap', alignContent: alignContent, alignItems: alignItems}, + children: [ + /* 0 */ {style: {width: 50, height: 50, margin: 10}}, + /* 1 */ {style: {width: 50, height: 50, margin: 10}}, + /* 2 */ {style: {width: 50, height: 50, margin: 10}}, + /* 3 */ {style: {width: 50, height: 50, margin: 10}}, + /* 4 */ {style: {width: 50, height: 100, margin: 10}}, + /* 5 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 6 */ {style: {width: 50, height: 50, margin: 10}}, + /* 7 */ {style: {width: 50, height: 100, margin: 10}}, + /* 8 */ {style: {width: 50, height: 50, margin: 10}}, + /* 9 */ {style: {width: 50, height: 50, margin: 10}}, + /* 10 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' }}, + /* 11 */ {style: {width: 50, height: 50, margin: 10}}, + /* 12 */ {style: {width: 50, height: 50, margin: 10}}, + /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, + /* 14 */ {style: {width: 50, height: 50, margin: 10}}, + ], + } + ); }); } - - // testAlignContent('stretch', 'flex-start'); // above with expected value data testAlignContent('stretch', 'center'); testAlignContent('stretch', 'flex-end'); testAlignContent('stretch', 'stretch'); diff --git a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java index 296fa608..0e1ee66c 100644 --- a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java +++ b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java @@ -5194,5 +5194,222 @@ public class LayoutEngineTest { test("should layout absolutely positioned node with padded flex 1 parent", root_node, root_layout); } + + @Test + public void testCase123() + { + TestCSSNode root_node = new TestCSSNode(); + { + TestCSSNode node_0 = root_node; + node_0.style.flexDirection = CSSFlexDirection.ROW; + node_0.style.alignContent = CSSAlign.STRETCH; + node_0.style.alignItems = CSSAlign.FLEX_START; + node_0.style.flexWrap = CSSWrap.WRAP; + node_0.style.width = 300; + node_0.style.height = 380; + addChildren(node_0, 15); + { + TestCSSNode node_1; + node_1 = node_0.getChildAt(0); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(1); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(2); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(3); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(4); + node_1.style.width = 50; + node_1.style.height = 100; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(5); + node_1.style.alignSelf = CSSAlign.FLEX_START; + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(6); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(7); + node_1.style.width = 50; + node_1.style.height = 100; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(8); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(9); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(10); + node_1.style.alignSelf = CSSAlign.FLEX_START; + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(11); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(12); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(13); + node_1.style.alignSelf = CSSAlign.FLEX_START; + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + node_1 = node_0.getChildAt(14); + node_1.style.width = 50; + node_1.style.height = 50; + node_1.style.margin[Spacing.LEFT] = 10; + node_1.style.margin[Spacing.TOP] = 10; + node_1.style.margin[Spacing.RIGHT] = 10; + node_1.style.margin[Spacing.BOTTOM] = 10; + } + } + + TestCSSNode root_layout = new TestCSSNode(); + { + TestCSSNode node_0 = root_layout; + node_0.layout.y = 0; + node_0.layout.x = 0; + node_0.layout.width = 300; + node_0.layout.height = 380; + addChildren(node_0, 15); + { + TestCSSNode node_1; + node_1 = node_0.getChildAt(0); + node_1.layout.y = 10; + node_1.layout.x = 10; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(1); + node_1.layout.y = 10; + node_1.layout.x = 80; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(2); + node_1.layout.y = 10; + node_1.layout.x = 150; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(3); + node_1.layout.y = 10; + node_1.layout.x = 220; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(4); + node_1.layout.y = 92.5f; + node_1.layout.x = 10; + node_1.layout.width = 50; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(5); + node_1.layout.y = 92.5f; + node_1.layout.x = 80; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(6); + node_1.layout.y = 92.5f; + node_1.layout.x = 150; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(7); + node_1.layout.y = 92.5f; + node_1.layout.x = 220; + node_1.layout.width = 50; + node_1.layout.height = 100; + node_1 = node_0.getChildAt(8); + node_1.layout.y = 225; + node_1.layout.x = 10; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(9); + node_1.layout.y = 225; + node_1.layout.x = 80; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(10); + node_1.layout.y = 225; + node_1.layout.x = 150; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(11); + node_1.layout.y = 225; + node_1.layout.x = 220; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(12); + node_1.layout.y = 307.5f; + node_1.layout.x = 10; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(13); + node_1.layout.y = 307.5f; + node_1.layout.x = 80; + node_1.layout.width = 50; + node_1.layout.height = 50; + node_1 = node_0.getChildAt(14); + node_1.layout.y = 307.5f; + node_1.layout.x = 150; + node_1.layout.width = 50; + node_1.layout.height = 50; + } + } + + test("should layout with alignContent: stretch, and alignItems: flex-start", root_node, root_layout); + } /** END_GENERATED **/ } diff --git a/src/transpile.js b/src/transpile.js index b12c07e8..ab745dec 100644 --- a/src/transpile.js +++ b/src/transpile.js @@ -20,6 +20,8 @@ global.layoutTestUtils = { testLayout: function(node, expectedLayout) { allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout}); }, + testLayoutAgainstDomOnly: function(node) { + }, testRandomLayout: function(node, i) { allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)}); }, @@ -31,7 +33,8 @@ global.layoutTestUtils = { }; global.describe = function(name, cb) { - if (name === 'Layout') { + if (name === 'Layout' || + name === 'Layout alignContent') { cb(); } };