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

[Issue facebook/css-layout#78]: Implemented alignContent ; #79

Merged
prenaux merged 15 commits from master into master 2015-05-17 08:58:05 -07:00
Conversation 13 Commits 15 Files Changed 17 +1921 -8188
17 changed files with 1921 additions and 8188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 68d029e460 - Show all commits

5
src/Layout-test-utils.js
View File

@@ -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) {

2
src/Layout.js
View File

@@ -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';

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

@@ -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');
});