Add a very simple RenderParagraph example using LayoutRoot.

sky/examples/raw/render_paragraph.dart

Index: sky/examples/raw/render_paragraph.dart
diff --git a/sky/examples/raw/simple_render_tree.dart b/sky/examples/raw/render_paragraph.dart
similarity index 50%
copy from sky/examples/raw/simple_render_tree.dart
copy to sky/examples/raw/render_paragraph.dart
index f2db8ee3dfd263b09c9a35bf6f406940a9f6d167..7092f93494e025e26960456d434c3f26ed097f39 100644
--- a/sky/examples/raw/simple_render_tree.dart
+++ b/sky/examples/raw/render_paragraph.dart
@@ -6,6 +6,36 @@ import 'dart:sky';
 import 'package:sky/framework/app.dart';
 import 'package:sky/framework/layout2.dart';
 
+class RenderParagraph extends RenderDecoratedBox {
+  final String text;
+  LayoutRoot _layoutRoot = new LayoutRoot();
+  Document _document;
+
+  RenderParagraph(String this.text) :
+   super(new BoxDecoration(backgroundColor: 0xFFFFFFFF)) {
+    _document = new Document();
+    _layoutRoot.rootElement = _document.createElement('p');
+    _layoutRoot.rootElement.appendChild(_document.createText(this.text));
+  }
+
+  void performLayout() {
+    _layoutRoot.maxWidth = constraints.maxWidth;
+    _layoutRoot.minWidth = constraints.minWidth;
+    _layoutRoot.layout();
+    width = _layoutRoot.rootElement.width;
+    height = _layoutRoot.rootElement.height;
+  }
+
+  void hitTestChildren(HitTestResult result, { double x, double y }) {
+    // defaultHitTestChildren(result, x: x, y: y);
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    super.paint(canvas);
+    _layoutRoot.paint(canvas);
+  }
+}
+
 class RenderSolidColor extends RenderDecoratedBox {
   final double desiredHeight;
   final double desiredWidth;
@@ -42,37 +72,20 @@ void main() {
       direction: FlexDirection.Vertical,
       decoration: new BoxDecoration(backgroundColor: 0xFF000000));
 
-  void addFlexChild(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
-    RenderNode child = new RenderSolidColor(backgroundColor);
-    parent.add(child);
-    child.parentData.flex = flex;
-  }
-
-  // Yellow bar at top
-  addFlexChild(root, 0xFFFFFF00, flex: 1);
-
-  // Turquoise box
-  root.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 100.0));
-
-  // Green and cyan render block with padding
-  var renderBlock = new RenderBlock(decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF));
+  RenderNode child = new RenderSolidColor(0xFFFFFF00);
+  root.add(child);
+  child.parentData.flex = 2;
 
-  renderBlock.add(new RenderSolidColor(0xFF00FF00, desiredHeight: 50.0, desiredWidth: 100.0));
-  renderBlock.add(new RenderSolidColor(0x7700FFFF, desiredHeight: 100.0, desiredWidth: 50.0));
+  // The internet is a beautiful place.  https://baconipsum.com/
+  String meatyString = """Bacon ipsum dolor amet ham fatback tri-tip, prosciutto
+porchetta bacon kevin meatball meatloaf pig beef ribs chicken. Brisket ribeye
+andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola
+alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
+Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
 
-  root.add(new RenderPadding(const EdgeDims(10.0, 10.0, 10.0, 10.0), renderBlock));
-
-  var row = new RenderFlex(
-    direction: FlexDirection.Horizontal,
-    decoration: new BoxDecoration(backgroundColor: 0xFF333333));
-
-  // Purple and blue cells
-  addFlexChild(row, 0x77FF00FF, flex: 1);
-  addFlexChild(row, 0xFF0000FF, flex: 2);
-
-  root.add(row);
-  row.parentData.flex = 3;
+  child = new RenderParagraph(meatyString);
+  root.add(child);
+  child.parentData.flex = 1;
 
   app = new AppView(root);
-
 }