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

Make align-items: stretch the default

Browse Source
This commit is contained in:
Christopher Chedeau
2014-10-08 09:35:44 -07:00
parent 43bfaa5866
commit c0f895c6f2
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 Usage
----- -----
A single function `computeLayout` is exposed and A single function `computeLayout` is exposed and
- takes a tree of nodes: `{ style: { ... }, children: [ nodes ] }` - takes a tree of nodes: `{ style: { ... }, children: [ nodes ] }`
- returns a tree of rectanges: `{ width: ..., height: ..., top: ..., left: ..., children: [ rects ] }` - returns a tree of rectanges: `{ width: ..., height: ..., top: ..., left: ..., children: [ rects ] }`
For example, For example,
```javascript ```javascript
computeLayout( computeLayout(
@@ -58,11 +58,10 @@ div, span {
border: 0 solid black; border: 0 solid black;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch; align-items: stretch;
align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
} }

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

@@ -21,8 +21,8 @@ var layoutTestUtils = (function() {
display: -webkit-flex; display: -webkit-flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column; -webkit-flex-direction: column;
align-items: flex-start; align-items: stretch;
-webkit-align-items: flex-start; -webkit-align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
@@ -72,6 +72,7 @@ var layoutTestUtils = (function() {
} }
fillNodes(rootNode); fillNodes(rootNode);
rootNode.style.alignSelf = 'flex-start';
realComputeLayout(rootNode); realComputeLayout(rootNode);
return extractNodes(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) { 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 // Some of the fields default to undefined and not 0
node->style.dimensions[CSS_WIDTH] = CSS_UNDEFINED; 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) { if ('alignItems' in node.style) {
return node.style.alignItems; return node.style.alignItems;
} }
return 'flex-start'; return 'stretch';
} }
function getFlexDirection(node) { 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 *root_node = new_test_css_node();
{ {
css_node_t *node_0 = root_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_WIDTH] = 100;
init_css_node_children(node_0, 1); init_css_node_children(node_0, 1);
{ {
css_node_t *node_1; css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0); 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->measure = measure;
node_1->context = "loooooooooong with space"; node_1->context = "loooooooooong with space";
} }
@@ -2764,6 +2766,7 @@ int main()
css_node_t *root_node = new_test_css_node(); css_node_t *root_node = new_test_css_node();
{ {
css_node_t *node_0 = root_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_WIDTH] = 100;
node_0->style.padding[CSS_LEFT] = 10; node_0->style.padding[CSS_LEFT] = 10;
node_0->style.padding[CSS_TOP] = 10; node_0->style.padding[CSS_TOP] = 10;
@@ -2773,6 +2776,7 @@ int main()
{ {
css_node_t *node_1; css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0); 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_LEFT] = 10;
node_1->style.margin[CSS_TOP] = 10; node_1->style.margin[CSS_TOP] = 10;
node_1->style.margin[CSS_RIGHT] = 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 *root_node = new_test_css_node();
{ {
css_node_t *node_0 = root_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_WIDTH] = 100;
node_0->style.dimensions[CSS_HEIGHT] = 100; node_0->style.dimensions[CSS_HEIGHT] = 100;
init_css_node_children(node_0, 2); init_css_node_children(node_0, 2);
{ {
css_node_t *node_1; css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0); 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->style.flex = 2.5;
node_1 = node_0->get_child(node_0->context, 1); 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; node_1->style.flex = 7.5;
} }
} }
@@ -3086,13 +3093,16 @@ int main()
css_node_t *root_node = new_test_css_node(); css_node_t *root_node = new_test_css_node();
{ {
css_node_t *node_0 = root_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_WIDTH] = 100;
node_0->style.dimensions[CSS_HEIGHT] = 100; node_0->style.dimensions[CSS_HEIGHT] = 100;
init_css_node_children(node_0, 2); init_css_node_children(node_0, 2);
{ {
css_node_t *node_1; css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0); 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 = node_0->get_child(node_0->context, 1);
node_1->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.flex = 0; 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() { it('should layout node with text bounded by parent', function() {
testLayout( testLayout(
{style: {width: 100}, children: [ {style: {width: 100, alignSelf: 'flex-start'}, children: [
{style: {measure: text(texts.big)}} {style: {measure: text(texts.big), alignSelf: 'flex-start'}}
]}, ]},
{width: 100, height: textSizes.bigHeight, top: 0, left: 0, children: [ {width: 100, height: textSizes.bigHeight, top: 0, left: 0, children: [
{width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0} {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() { it('should layout node with text bounded by grand-parent', function() {
testLayout( testLayout(
{style: {width: 100, padding: 10}, children: [ {style: {width: 100, padding: 10, alignSelf: 'flex-start'}, children: [
{style: {margin: 10}, children: [ {style: {margin: 10, alignSelf: 'flex-start'}, children: [
{style: {measure: text(texts.big)}} {style: {measure: text(texts.big)}}
]} ]}
]}, ]},
@@ -918,9 +918,9 @@ describe('Layout', function() {
it('should layout with arbitrary flex', function() { it('should layout with arbitrary flex', function() {
testLayout( testLayout(
{style: {width: 100, height: 100}, children: [ {style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
{style: {flex: 2.5}}, {style: {flex: 2.5, alignSelf: 'flex-start'}},
{style: {flex: 7.5}} {style: {flex: 7.5, alignSelf: 'flex-start'}}
]}, ]},
{width: 100, height: 100, top: 0, left: 0, children: [ {width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 25, top: 0, left: 0}, {width: 0, height: 25, top: 0, left: 0},
@@ -931,9 +931,9 @@ describe('Layout', function() {
it('should layout with negative flex', function() { it('should layout with negative flex', function() {
testLayout( testLayout(
{style: {width: 100, height: 100}, children: [ {style: {width: 100, height: 100, alignSelf: 'flex-start'}, children: [
{style: {flex: -2.5}}, {style: {flex: -2.5, alignSelf: 'flex-start'}},
{style: {flex: 0}} {style: {flex: 0, alignSelf: 'flex-start'}}
]}, ]},
{width: 100, height: 100, top: 0, left: 0, children: [ {width: 100, height: 100, top: 0, left: 0, children: [
{width: 0, height: 0, top: 0, left: 0}, {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 CSSFlexDirection flexDirection = CSSFlexDirection.COLUMN;
public CSSJustify justifyContent = CSSJustify.FLEX_START; public CSSJustify justifyContent = CSSJustify.FLEX_START;
public CSSAlign alignItems = CSSAlign.FLEX_START; public CSSAlign alignItems = CSSAlign.STRETCH;
public CSSAlign alignSelf = CSSAlign.AUTO; public CSSAlign alignSelf = CSSAlign.AUTO;
public CSSPositionType positionType = CSSPositionType.RELATIVE; public CSSPositionType positionType = CSSPositionType.RELATIVE;
public float flex; 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 root_node = new TestCSSNode();
{ {
TestCSSNode node_0 = root_node; TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100; node_0.style.width = 100;
addChildren(node_0, 1); addChildren(node_0, 1);
{ {
TestCSSNode node_1; TestCSSNode node_1;
node_1 = node_0.getChildAt(0); node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.setMeasureFunction(sTestMeasureFunction); node_1.setMeasureFunction(sTestMeasureFunction);
node_1.context = "loooooooooong with space"; node_1.context = "loooooooooong with space";
} }
@@ -2981,6 +2983,7 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode(); TestCSSNode root_node = new TestCSSNode();
{ {
TestCSSNode node_0 = root_node; TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100; node_0.style.width = 100;
node_0.style.paddingLeft = 10; node_0.style.paddingLeft = 10;
node_0.style.paddingTop = 10; node_0.style.paddingTop = 10;
@@ -2990,6 +2993,7 @@ public class LayoutEngineTest {
{ {
TestCSSNode node_1; TestCSSNode node_1;
node_1 = node_0.getChildAt(0); node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.marginLeft = 10; node_1.style.marginLeft = 10;
node_1.style.marginTop = 10; node_1.style.marginTop = 10;
node_1.style.marginRight = 10; node_1.style.marginRight = 10;
@@ -3273,14 +3277,17 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode(); TestCSSNode root_node = new TestCSSNode();
{ {
TestCSSNode node_0 = root_node; TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100; node_0.style.width = 100;
node_0.style.height = 100; node_0.style.height = 100;
addChildren(node_0, 2); addChildren(node_0, 2);
{ {
TestCSSNode node_1; TestCSSNode node_1;
node_1 = node_0.getChildAt(0); node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 2.5f; node_1.style.flex = 2.5f;
node_1 = node_0.getChildAt(1); node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 7.5f; node_1.style.flex = 7.5f;
} }
} }
@@ -3317,13 +3324,16 @@ public class LayoutEngineTest {
TestCSSNode root_node = new TestCSSNode(); TestCSSNode root_node = new TestCSSNode();
{ {
TestCSSNode node_0 = root_node; TestCSSNode node_0 = root_node;
node_0.style.alignSelf = CSSAlign.FLEX_START;
node_0.style.width = 100; node_0.style.width = 100;
node_0.style.height = 100; node_0.style.height = 100;
addChildren(node_0, 2); addChildren(node_0, 2);
{ {
TestCSSNode node_1; TestCSSNode node_1;
node_1 = node_0.getChildAt(0); node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1 = node_0.getChildAt(1); node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.style.flex = 0; node_1.style.flex = 0;
} }
} }