From 7f9db79750c1f66643ec3b1951d485ecc8313a29 Mon Sep 17 00:00:00 2001
From: Collin Jackson <jackson@google.com>
Date: Fri, 17 Jul 2015 12:46:51 -0700
Subject: [PATCH 1/3] Fix #57 Flex needs to understand baselines

---
 sky/sdk/example/rendering/align_items.dart | 58 ++++++++++++++++++++++
 sky/sdk/example/stocks/lib/stock_row.dart  | 12 +++--
 sky/sdk/lib/rendering/flex.dart            | 18 ++++++-
 3 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 sky/sdk/example/rendering/align_items.dart

diff --git a/sky/sdk/example/rendering/align_items.dart b/sky/sdk/example/rendering/align_items.dart
new file mode 100644
index 0000000000000..5741f532ee0e8
--- /dev/null
+++ b/sky/sdk/example/rendering/align_items.dart
@@ -0,0 +1,58 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky';
+
+import 'package:sky/painting/text_style.dart';
+import 'package:sky/rendering/box.dart';
+import 'package:sky/rendering/flex.dart';
+import 'package:sky/rendering/object.dart';
+import 'package:sky/rendering/paragraph.dart';
+import 'package:sky/rendering/sky_binding.dart';
+
+import 'solid_color_box.dart';
+
+void main() {
+  var table = new RenderFlex(direction: FlexDirection.vertical);
+
+  void addRow(FlexAlignItems align) {
+    TextStyle style = const TextStyle(color: const Color(0xFF000000));
+    RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${align}")]));
+    table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
+    var row = new RenderFlex(direction: FlexDirection.horizontal);
+
+    style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
+    row.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFCCCC)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
+    ));
+    style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
+    row.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCFFCC)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
+    ));
+    style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
+    row.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCFF)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo foo')]))
+    ));
+    row.add(new RenderSolidColorBox(const Color(0xFFCCFFFF), desiredSize: new Size(30.0, 40.0)));
+    row.alignItems = align;
+    table.add(row);
+    row.parentData.flex = 1;
+  }
+
+  addRow(FlexAlignItems.start);
+  addRow(FlexAlignItems.end);
+  addRow(FlexAlignItems.center);
+  addRow(FlexAlignItems.stretch);
+  addRow(FlexAlignItems.baseline);
+
+  RenderDecoratedBox root = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
+    child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
+  );
+
+  new SkyBinding(root: root);
+}
diff --git a/sky/sdk/example/stocks/lib/stock_row.dart b/sky/sdk/example/stocks/lib/stock_row.dart
index 57d1a65682c27..af75ba94ff3d3 100644
--- a/sky/sdk/example/stocks/lib/stock_row.dart
+++ b/sky/sdk/example/stocks/lib/stock_row.dart
@@ -26,10 +26,6 @@ class StockRow extends Component {
     if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
 
     List<Widget> children = [
-      new Container(
-        child: new StockArrow(percentChange: stock.percentChange),
-        margin: const EdgeDims.only(right: 5.0)
-      ),
       new Flexible(
         child: new Text(stock.symbol),
         flex: 2
@@ -58,7 +54,13 @@ class StockRow extends Component {
             bottom: new BorderSide(color: Theme.of(this).dividerColor)
           )
         ),
-        child: new Flex(children)
+        child: new Flex([
+          new Container(
+            child: new StockArrow(percentChange: stock.percentChange),
+            margin: const EdgeDims.only(right: 5.0)
+          ),
+          new Flex(children, alignItems: FlexAlignItems.baseline)
+        ])
       )
     );
   }
diff --git a/sky/sdk/lib/rendering/flex.dart b/sky/sdk/lib/rendering/flex.dart
index 6e4754042e0e0..ed59f7272153b 100644
--- a/sky/sdk/lib/rendering/flex.dart
+++ b/sky/sdk/lib/rendering/flex.dart
@@ -34,6 +34,7 @@ enum FlexAlignItems {
   end,
   center,
   stretch,
+  baseline,
 }
 
 typedef double _ChildSizingFunction(RenderBox child, BoxConstraints constraints);
@@ -315,6 +316,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     // Steps 4-5. Distribute remaining space to flexible children.
     double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0;
     double usedSpace = 0.0;
+    double maxBaselineDistance = 0.0;
     child = firstChild;
     while (child != null) {
       int flex = _getFlex(child);
@@ -337,6 +339,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         usedSpace += _getMainSize(child);
         crossSize = math.max(crossSize, _getCrossSize(child));
       }
+      if (alignItems == FlexAlignItems.baseline) {
+        // TODO(jackson): Support for non-alphabetic baselines
+        double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+        if (distance != null)
+          maxBaselineDistance = math.max(maxBaselineDistance, distance);
+      }
       assert(child.parentData is FlexBoxParentData);
       child = child.parentData.nextSibling;
     }
@@ -345,7 +353,6 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     double remainingSpace = math.max(0.0, freeSpace - usedSpace);
     double leadingSpace;
     double betweenSpace;
-    child = firstChild;
     switch (_justifyContent) {
       case FlexJustifyContent.start:
         leadingSpace = 0.0;
@@ -397,6 +404,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         case FlexAlignItems.center:
           childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0;
           break;
+        case FlexAlignItems.baseline:
+          childCrossPosition = 0.0;
+          if (_direction == FlexDirection.horizontal) {
+            // TODO(jackson): Support for non-alphabetic baselines
+            double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+            if (distance != null)
+              childCrossPosition = maxBaselineDistance - distance;
+          }
+          break;
       }
       switch (_direction) {
         case FlexDirection.horizontal:

From 1c440b1596c04832dadd3b5d1f0b675700299782 Mon Sep 17 00:00:00 2001
From: Collin Jackson <jackson@google.com>
Date: Fri, 17 Jul 2015 12:49:37 -0700
Subject: [PATCH 2/3] Fix comments

---
 sky/sdk/lib/rendering/flex.dart | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/sky/sdk/lib/rendering/flex.dart b/sky/sdk/lib/rendering/flex.dart
index ed59f7272153b..c7b79f8bb5bdb 100644
--- a/sky/sdk/lib/rendering/flex.dart
+++ b/sky/sdk/lib/rendering/flex.dart
@@ -387,7 +387,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         break;
     }
 
-    // Position elements. For now, center the flex items in the cross direction
+    // Position elements
     double childMainPosition = leadingSpace;
     child = firstChild;
     while (child != null) {
@@ -406,6 +406,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
           break;
         case FlexAlignItems.baseline:
           childCrossPosition = 0.0;
+          // TODO(jackson): Support for vertical baselines
           if (_direction == FlexDirection.horizontal) {
             // TODO(jackson): Support for non-alphabetic baselines
             double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);

From d7d625b2bfa63db12b5e8a78040cac4d518c769b Mon Sep 17 00:00:00 2001
From: Collin Jackson <jackson@google.com>
Date: Fri, 17 Jul 2015 14:29:05 -0700
Subject: [PATCH 3/3] Update example

---
 sky/sdk/example/rendering/align_items.dart | 25 +++++++++-------------
 sky/sdk/lib/rendering/box.dart             |  2 +-
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/sky/sdk/example/rendering/align_items.dart b/sky/sdk/example/rendering/align_items.dart
index 5741f532ee0e8..a8c15484e3fe8 100644
--- a/sky/sdk/example/rendering/align_items.dart
+++ b/sky/sdk/example/rendering/align_items.dart
@@ -16,39 +16,34 @@ import 'solid_color_box.dart';
 void main() {
   var table = new RenderFlex(direction: FlexDirection.vertical);
 
-  void addRow(FlexAlignItems align) {
+  for(FlexAlignItems alignItems in FlexAlignItems.values) {
     TextStyle style = const TextStyle(color: const Color(0xFF000000));
-    RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${align}")]));
+    RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
     table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
-    var row = new RenderFlex(direction: FlexDirection.horizontal);
+    var row = new RenderFlex(alignItems: alignItems);
 
     style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
     row.add(new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFCCCC)),
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FFFCCCC)),
       child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
     ));
     style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
     row.add(new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCFFCC)),
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
       child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
     ));
+    var subrow = new RenderFlex(alignItems: alignItems);
     style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
-    row.add(new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCFF)),
+    subrow.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),
       child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo foo')]))
     ));
-    row.add(new RenderSolidColorBox(const Color(0xFFCCFFFF), desiredSize: new Size(30.0, 40.0)));
-    row.alignItems = align;
+    subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: new Size(30.0, 40.0)));
+    row.add(subrow);
     table.add(row);
     row.parentData.flex = 1;
   }
 
-  addRow(FlexAlignItems.start);
-  addRow(FlexAlignItems.end);
-  addRow(FlexAlignItems.center);
-  addRow(FlexAlignItems.stretch);
-  addRow(FlexAlignItems.baseline);
-
   RenderDecoratedBox root = new RenderDecoratedBox(
     decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
     child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
diff --git a/sky/sdk/lib/rendering/box.dart b/sky/sdk/lib/rendering/box.dart
index 10fad5cc313ec..b07874e5d42e7 100644
--- a/sky/sdk/lib/rendering/box.dart
+++ b/sky/sdk/lib/rendering/box.dart
@@ -1662,7 +1662,7 @@ abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, Pare
       assert(child.parentData is ParentDataType);
       double candidate = child.getDistanceToActualBaseline(baseline);
       if (candidate != null) {
-        candidate += child.parentData.position.x;
+        candidate += child.parentData.position.y;
         if (result != null)
           result = math.min(result, candidate);
         else