Make align-items: stretch the default

CharlieGreenman · Oct 8, 2014 · c0f895c · c0f895c
1 parent 43bfaa5
commit c0f895c
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2944,11 +2944,13 @@ public void testCase70()
     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 void testCase71()
     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 void testCase71()
       {
         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 void testCase77()
     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 void testCase78()
     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;
       }
     }