diff --git a/README.md b/README.md index c6fd1ea9..5f146d0c 100644 --- a/README.md +++ b/README.md @@ -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; } diff --git a/src/Layout-test-utils.js b/src/Layout-test-utils.js index 62796f32..c4ae5949 100644 --- a/src/Layout-test-utils.js +++ b/src/Layout-test-utils.js @@ -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); } diff --git a/src/Layout.c b/src/Layout.c index 0e3c9fea..72cb7e3a 100644 --- a/src/Layout.c +++ b/src/Layout.c @@ -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; diff --git a/src/Layout.js b/src/Layout.js index 01858307..07bd7ec4 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -76,7 +76,7 @@ var computeLayout = (function() { if ('alignItems' in node.style) { return node.style.alignItems; } - return 'flex-start'; + return 'stretch'; } function getFlexDirection(node) { diff --git a/src/__tests__/Layout-test.c b/src/__tests__/Layout-test.c index 89d926bd..0efd3b6c 100644 --- a/src/__tests__/Layout-test.c +++ b/src/__tests__/Layout-test.c @@ -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; } } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 37a051ba..80478804 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -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}, diff --git a/src/java/src/com/facebook/csslayout/CSSStyle.java b/src/java/src/com/facebook/csslayout/CSSStyle.java index 3d9e7278..23d8354c 100644 --- a/src/java/src/com/facebook/csslayout/CSSStyle.java +++ b/src/java/src/com/facebook/csslayout/CSSStyle.java @@ -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; diff --git a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java index 368ed3c1..410e1d1f 100644 --- a/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java +++ b/src/java/tests/com/facebook/csslayout/LayoutEngineTest.java @@ -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; } }