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

Merge pull request #14 from vjeux/default_stretch

Browse Source 
Make align-items: stretch the default
This commit is contained in:
Andy Street
2014-10-08 09:55:12 -07:00
parent 43bfaa5866 c0f895c6f2
commit a22dedfc2f
8 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -28,11 +28,11 @@ position | 'relative', 'absolute'
Usage
-----
A single function `computeLayout` is exposed and
A single function `computeLayout` is exposed and
- takes a tree of nodes: `{ style: { ... }, children: [ nodes ] }`
- returns a tree of rectanges: `{ width: ..., height: ..., top: ..., left: ..., children: [ rects ] }`
For example,
For example,
```javascript
computeLayout(
@@ -58,11 +58,10 @@ div, span {
border: 0 solid black;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-self: stretch;
align-items: flex-start;
align-items: stretch;
justify-content: flex-start;
flex-shrink: 0;
}

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

@@ -21,8 +21,8 @@ var layoutTestUtils = (function() {
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
-webkit-align-items: flex-start;
align-items: stretch;
-webkit-align-items: stretch;
justify-content: flex-start;
-webkit-justify-content: flex-start;
flex-shrink: 0;
@@ -72,6 +72,7 @@ var layoutTestUtils = (function() {
}
fillNodes(rootNode);
rootNode.style.alignSelf = 'flex-start';
realComputeLayout(rootNode);
return extractNodes(rootNode);
}

2
src/Layout.c
View File

@@ -18,7 +18,7 @@ static bool eq(float a, float b) {
}
void init_css_node(css_node_t *node) {
node->style.align_items = CSS_ALIGN_FLEX_START;
node->style.align_items = CSS_ALIGN_STRETCH;
// Some of the fields default to undefined and not 0
node->style.dimensions[CSS_WIDTH] = CSS_UNDEFINED;

2
src/Layout.js
View File

@@ -76,7 +76,7 @@ var computeLayout = (function() {
if ('alignItems' in node.style) {
return node.style.alignItems;
}
return 'flex-start';
return 'stretch';
}
function getFlexDirection(node) {

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

@@ -2729,11 +2729,13 @@ int main()
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.align_self = CSS_ALIGN_FLEX_START;
node_0->style.dimensions[CSS_WIDTH] = 100;
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.align_self = CSS_ALIGN_FLEX_START;
node_1->measure = measure;
node_1->context = "loooooooooong with space";
}
@@ -2764,6 +2766,7 @@ int main()
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.align_self = CSS_ALIGN_FLEX_START;
node_0->style.dimensions[CSS_WIDTH] = 100;
node_0->style.padding[CSS_LEFT] = 10;
node_0->style.padding[CSS_TOP] = 10;
@@ -2773,6 +2776,7 @@ int main()
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.margin[CSS_LEFT] = 10;
node_1->style.margin[CSS_TOP] = 10;
node_1->style.margin[CSS_RIGHT] = 10;
@@ -3044,14 +3048,17 @@ int main()
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.align_self = CSS_ALIGN_FLEX_START;
node_0->style.dimensions[CSS_WIDTH] = 100;
node_0->style.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->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.flex = 2.5;
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.flex = 7.5;
}
}
@@ -3086,13 +3093,16 @@ int main()
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.align_self = CSS_ALIGN_FLEX_START;
node_0->style.dimensions[CSS_WIDTH] = 100;
node_0->style.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->style.align_self = CSS_ALIGN_FLEX_START;
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.flex = 0;
}
}

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

@@ -827,8 +827,8 @@ describe('Layout', function() {
it('should layout node with text bounded by parent', function() {
testLayout(
{style: {width: 100}, children: [
{style: {measure: text(texts.big)}}
{style: {width: 100, alignSelf: 'flex-start'}, children: [
{style: {measure: text(texts.big), alignSelf: 'flex-start'}}
]},
{width: 100, height: textSizes.bigHeight, top: 0, left: 0, children: [
{width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
@@ -838,8 +838,8 @@ describe('Layout', function() {
it('should layout node with text bounded by grand-parent', function() {
testLayout(
{style: {width: 100, padding: 10}, children: [
{style: {margin: 10}, children: [
{style: {width: 100, padding: 10, alignSelf: 'flex-start'}, children: [
{style: {margin: 10, alignSelf: 'flex-start'}, children: [
{style: {measure: text(texts.big)}}
]}
]},
@@ -918,9 +918,9 @@ describe('Layout', function() {
it('should layout with arbitrary flex', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {flex: 2.5}},
{style: {flex: 7.5}}
{style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
{style: {flex: 2.5, alignSelf: 'flex-start'}},
{style: {flex: 7.5, alignSelf: 'flex-start'}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 25, top: 0, left: 0},
@@ -931,9 +931,9 @@ describe('Layout', function() {
it('should layout with negative flex', function() {
testLayout(
{style: {width: 100, height: 100}, children: [
{style: {flex: -2.5}},
{style: {flex: 0}}
{style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
{style: {flex: -2.5, alignSelf: 'flex-start'}},
{style: {flex: 0, alignSelf: 'flex-start'}}
]},
{width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0},

2
src/java/src/com/facebook/csslayout/CSSStyle.java
View File

@@ -7,7 +7,7 @@ public class CSSStyle {
public CSSFlexDirection flexDirection = CSSFlexDirection.COLUMN;
public CSSJustify justifyContent = CSSJustify.FLEX_START;
public CSSAlign alignItems = CSSAlign.FLEX_START;
public CSSAlign alignItems = CSSAlign.STRETCH;
public CSSAlign alignSelf = CSSAlign.AUTO;
public CSSPositionType positionType = CSSPositionType.RELATIVE;
public float flex;

10
src/java/tests/com/facebook/csslayout/LayoutEngineTest.java
View File

@@ -2944,11 +2944,13 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100;
addChildren(node_0, 1);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.setMeasureFunction(sTestMeasureFunction);
node_1.context = "loooooooooong with space";
}
@@ -2981,6 +2983,7 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100;
node_0.style.paddingLeft = 10;
node_0.style.paddingTop = 10;
@@ -2990,6 +2993,7 @@ public class LayoutEngineTest {
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.marginLeft = 10;
node_1.style.marginTop = 10;
node_1.style.marginRight = 10;
@@ -3273,14 +3277,17 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100;
node_0.style.height = 100;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 2.5f;
node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 7.5f;
}
}
@@ -3317,13 +3324,16 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100;
node_0.style.height = 100;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 0;
}
}