diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index f58dcf67..8848e770 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -429,6 +429,11 @@ var layoutTestUtils = (function() { testNamedLayout('expected-dom', expectedLayout, domLayout); testNamedLayout('layout-dom', layout, domLayout); }, + testLayoutAgainstDomOnly: function(node, expectedLayout) { + var layout = computeCSSLayout(node); + var domLayout = computeDOMLayout(node); + testNamedLayout('layout-dom', layout, domLayout); + }, testFillNodes: testFillNodes, testExtractNodes: testExtractNodes, testRandomLayout: function(node) { diff --git a/src/Layout.js b/src/Layout.js index b44cd4c0..8172ffe2 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -22,7 +22,7 @@ var computeLayout = (function() { var CSS_ALIGN_FLEX_START = 'flex-start'; var CSS_ALIGN_CENTER = 'center'; - // var CSS_ALIGN_FLEX_END = 'flex-end'; + var CSS_ALIGN_FLEX_END = 'flex-end'; var CSS_ALIGN_STRETCH = 'stretch'; var CSS_POSITION_RELATIVE = 'relative'; diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index f0bb41e4..6ba84cdb 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -9,6 +9,7 @@ /* globals layoutTestUtils */ var testLayout = layoutTestUtils.testLayout; +var testLayoutAgainstDomOnly = layoutTestUtils.testLayoutAgainstDomOnly; var testFillNodes = layoutTestUtils.testFillNodes; var testExtractNodes = layoutTestUtils.testExtractNodes; var text = layoutTestUtils.text; @@ -1586,5 +1587,78 @@ 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, + { 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}, + {width:50,height:50,top:10,left:150}, + {width:50,height:50,top:10,left:220}, + {width:50,height:100,top:92.5,left:10}, + {width:50,height:50,top:92.5,left:80}, + {width:50,height:50,top:92.5,left:150}, + {width:50,height:100,top:92.5,left:220}, + {width:50,height:50,top:225,left:10}, + {width:50,height:50,top:225,left:80}, + {width:50,height:50,top:225,left:150}, + {width:50,height:50,top:225,left:220}, + {width:50,height:50,top:307.5,left:10}, + {width:50,height:50,top:307.5,left:80}, + {width:50,height:50,top:307.5,left:150} + ]} + ); + }); + + function testAlignContent(aAlignContent, aAlignItems) { + it('should layout with alignContent: '+aAlignContent+', and alignItems: '+aAlignItems, function() { + testLayoutAgainstDomOnly(alignContentData); + }); + } + + // testAlignContent('stretch', 'flex-start'); // above with expected value data + testAlignContent('stretch', 'center'); + testAlignContent('stretch', 'flex-end'); + testAlignContent('stretch', 'stretch'); + + testAlignContent('flex-start', 'flex-start'); + testAlignContent('flex-start', 'center'); + testAlignContent('flex-start', 'flex-end'); + testAlignContent('flex-start', 'stretch'); + + testAlignContent('center', 'flex-start'); + testAlignContent('center', 'center'); + testAlignContent('center', 'flex-end'); + testAlignContent('center', 'stretch'); + + testAlignContent('flex-end', 'flex-start'); + testAlignContent('flex-end', 'center'); + testAlignContent('flex-end', 'flex-end'); + testAlignContent('flex-end', 'stretch'); });