diff --git a/sdk/example/rendering/baseline.dart b/sdk/example/rendering/baseline.dart index 303972c8d7f..daf1e83defe 100644 --- a/sdk/example/rendering/baseline.dart +++ b/sdk/example/rendering/baseline.dart @@ -5,8 +5,8 @@ import 'dart:sky' as sky; import 'package:sky/painting/text_style.dart'; -import 'package:sky/rendering/block.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'; @@ -67,12 +67,15 @@ RenderBox getBox(double lh) { } void main() { - RenderBox root = new RenderBlock(children: [ - new RenderConstrainedBox( - additionalConstraints: new BoxConstraints.tightFor(height: 50.0) - ), - getBox(1.0), - getBox(null), - ]); + RenderBox root = new RenderFlex(children: [ + new RenderConstrainedBox( + additionalConstraints: new BoxConstraints.tightFor(height: 50.0) + ), + getBox(1.0), + getBox(null), + ], + direction: FlexDirection.vertical, + alignItems: FlexAlignItems.stretch + ); new SkyBinding(root: root); } diff --git a/sdk/example/rendering/flex.dart b/sdk/example/rendering/flex.dart new file mode 100644 index 00000000000..702dbc7d0c3 --- /dev/null +++ b/sdk/example/rendering/flex.dart @@ -0,0 +1,93 @@ +// 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' as sky; + +import 'package:sky/rendering/box.dart'; +import 'package:sky/rendering/flex.dart'; +import 'package:sky/rendering/sky_binding.dart'; + +class RenderSolidColor extends RenderDecoratedBox { + final sky.Size desiredSize; + final sky.Color backgroundColor; + + RenderSolidColor(sky.Color backgroundColor, { this.desiredSize: sky.Size.infinite }) + : backgroundColor = backgroundColor, + super(decoration: new BoxDecoration(backgroundColor: backgroundColor)) { + } + + double getMinIntrinsicWidth(BoxConstraints constraints) { + return constraints.constrainWidth(desiredSize.width); + } + + double getMaxIntrinsicWidth(BoxConstraints constraints) { + return constraints.constrainWidth(desiredSize.width); + } + + double getMinIntrinsicHeight(BoxConstraints constraints) { + return constraints.constrainHeight(desiredSize.height); + } + + double getMaxIntrinsicHeight(BoxConstraints constraints) { + return constraints.constrainHeight(desiredSize.height); + } + + void performLayout() { + size = constraints.constrain(desiredSize); + } + + void handleEvent(sky.Event event, BoxHitTestEntry entry) { + if (event.type == 'pointerdown') + decoration = new BoxDecoration(backgroundColor: const sky.Color(0xFFFF0000)); + else if (event.type == 'pointerup') + decoration = new BoxDecoration(backgroundColor: backgroundColor); + } +} + +RenderBox buildFlexExample() { + RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical); + + RenderDecoratedBox root = new RenderDecoratedBox( + decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF000000)), + child: flexRoot + ); + + void addFlexChildSolidColor(RenderFlex parent, sky.Color backgroundColor, { int flex: 0 }) { + RenderSolidColor child = new RenderSolidColor(backgroundColor); + parent.add(child); + child.parentData.flex = flex; + } + + // Yellow bar at top + addFlexChildSolidColor(flexRoot, const sky.Color(0xFFFFFF00), flex: 1); + + // Turquoise box + flexRoot.add(new RenderSolidColor(const sky.Color(0x7700FFFF), desiredSize: new sky.Size(100.0, 100.0))); + + var renderDecoratedBlock = new RenderDecoratedBox( + decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFFFFFFFF)) + ); + + flexRoot.add(new RenderPadding(padding: const EdgeDims.all(10.0), child: renderDecoratedBlock)); + + var row = new RenderFlex(direction: FlexDirection.horizontal); + + // Purple and blue cells + addFlexChildSolidColor(row, const sky.Color(0x77FF00FF), flex: 1); + addFlexChildSolidColor(row, const sky.Color(0xFF0000FF), flex: 2); + + var decoratedRow = new RenderDecoratedBox( + decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF333333)), + child: row + ); + + flexRoot.add(decoratedRow); + decoratedRow.parentData.flex = 3; + + return root; +} + +void main() { + new SkyBinding(root: buildFlexExample()); +} diff --git a/tests/raw/box_layout-expected.txt b/tests/raw/box_layout-expected.txt index e93ade3fe2c..e3296e08558 100644 --- a/tests/raw/box_layout-expected.txt +++ b/tests/raw/box_layout-expected.txt @@ -5,7 +5,7 @@ PAINT FOR FRAME #1 ---------------------------------------------- 1 | paintChild RenderDecoratedBox at Point(0.0, 0.0) 1 | | TestPaintingCanvas() constructor: 800.0 x 600.0 1 | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 600.0), Paint(color:Color(0xff0000ff))) -1 | | paintChild RenderBlock at Point(0.0, 0.0) +1 | | paintChild RenderFlex at Point(0.0, 0.0) 1 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 1 | | | paintChild RenderPadding at Point(0.0, 0.0) 1 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 diff --git a/tests/raw/box_layout.dart b/tests/raw/box_layout.dart index 64b7c9b61ca..660d5446b92 100644 --- a/tests/raw/box_layout.dart +++ b/tests/raw/box_layout.dart @@ -1,17 +1,17 @@ import 'dart:math' as math; import 'dart:sky' as sky; -import 'package:sky/rendering/block.dart'; import 'package:sky/rendering/box.dart'; +import 'package:sky/rendering/flex.dart'; import 'package:sky/rendering/object.dart'; import '../resources/display_list.dart'; void main() { - var size = new RenderConstrainedBox(additionalConstraints: new BoxConstraints().applyHeight(100.0)); - var inner = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00)), child: size); - var padding = new RenderPadding(padding: new EdgeDims.all(50.0), child: inner); - var block = new RenderBlock(children: [padding]); - var outer = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF0000FF)), child: block); + RenderBox size = new RenderConstrainedBox(additionalConstraints: new BoxConstraints().applyHeight(100.0)); + RenderBox inner = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00)), child: size); + RenderBox padding = new RenderPadding(padding: new EdgeDims.all(50.0), child: inner); + RenderBox flex = new RenderFlex(children: [padding], direction: FlexDirection.vertical, alignItems: FlexAlignItems.stretch); + RenderBox outer = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF0000FF)), child: flex); new TestRenderView(outer).endTest(); } diff --git a/tests/raw/render_flex-expected.txt b/tests/raw/render_flex-expected.txt index 6fa68d09970..0658d30aa19 100644 --- a/tests/raw/render_flex-expected.txt +++ b/tests/raw/render_flex-expected.txt @@ -10,34 +10,26 @@ PAINT FOR FRAME #1 ---------------------------------------------- 1 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 1 | | | paintChild RenderSolidColor at Point(0.0, 0.0) 1 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 82.5), Paint(color:Color(0xffffff00))) -1 | | | paintChild RenderSolidColor at Point(350.0, 82.5) +1 | | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 120.0), Paint(color:Color(0xffffff00))) +1 | | | paintChild RenderSolidColor at Point(350.0, 120.0) 1 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | drawRect(Rect.fromLTRB(350.0, 82.5, 450.0, 182.5), Paint(color:Color(0x7700ffff))) -1 | | | paintChild RenderPadding at Point(0.0, 182.5) +1 | | | | drawRect(Rect.fromLTRB(350.0, 120.0, 450.0, 220.0), Paint(color:Color(0x7700ffff))) +1 | | | paintChild RenderPadding at Point(390.0, 220.0) 1 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | paintChild RenderDecoratedBox at Point(10.0, 192.5) +1 | | | | paintChild RenderDecoratedBox at Point(400.0, 230.0) 1 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | drawRect(Rect.fromLTRB(10.0, 192.5, 790.0, 342.5), Paint(color:Color(0xffffffff))) -1 | | | | | paintChild RenderBlock at Point(10.0, 192.5) -1 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | | paintChild RenderSolidColor at Point(10.0, 192.5) -1 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | | | drawRect(Rect.fromLTRB(10.0, 192.5, 790.0, 242.5), Paint(color:Color(0xff00ff00))) -1 | | | | | | paintChild RenderSolidColor at Point(10.0, 242.5) -1 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | | | drawRect(Rect.fromLTRB(10.0, 242.5, 790.0, 342.5), Paint(color:Color(0x7700ffff))) -1 | | | paintChild RenderDecoratedBox at Point(0.0, 352.5) +1 | | | | | drawRect(Rect.fromLTRB(400.0, 230.0, 400.0, 230.0), Paint(color:Color(0xffffffff))) +1 | | | paintChild RenderDecoratedBox at Point(0.0, 240.0) 1 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | drawRect(Rect.fromLTRB(0.0, 352.5, 800.0, 600.0), Paint(color:Color(0xff333333))) -1 | | | | paintChild RenderFlex at Point(0.0, 352.5) +1 | | | | drawRect(Rect.fromLTRB(0.0, 240.0, 800.0, 600.0), Paint(color:Color(0xff333333))) +1 | | | | paintChild RenderFlex at Point(0.0, 240.0) 1 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | paintChild RenderSolidColor at Point(0.0, 352.5) +1 | | | | | paintChild RenderSolidColor at Point(0.0, 240.0) 1 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | | drawRect(Rect.fromLTRB(0.0, 352.5, 266.6666564941406, 600.0), Paint(color:Color(0x77ff00ff))) -1 | | | | | paintChild RenderSolidColor at Point(266.6666666666667, 352.5) +1 | | | | | | drawRect(Rect.fromLTRB(0.0, 240.0, 266.6666564941406, 600.0), Paint(color:Color(0x77ff00ff))) +1 | | | | | paintChild RenderSolidColor at Point(266.6666666666667, 240.0) 1 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -1 | | | | | | drawRect(Rect.fromLTRB(266.6666564941406, 352.5, 800.0, 600.0), Paint(color:Color(0xff0000ff))) +1 | | | | | | drawRect(Rect.fromLTRB(266.6666564941406, 240.0, 800.0, 600.0), Paint(color:Color(0xff0000ff))) ------------------------------------------------------------------------ CONSOLE: PASS: should flex CONSOLE: diff --git a/tests/raw/render_flex.dart b/tests/raw/render_flex.dart index 36b694769a4..ae92e42392c 100644 --- a/tests/raw/render_flex.dart +++ b/tests/raw/render_flex.dart @@ -4,106 +4,20 @@ import 'dart:sky' as sky; -import 'package:sky/rendering/block.dart'; import 'package:sky/rendering/box.dart'; -import 'package:sky/rendering/flex.dart'; +import '../../sdk/example/rendering/flex.dart'; import '../resources/display_list.dart'; import '../resources/third_party/unittest/unittest.dart'; import '../resources/unit.dart'; -class RenderSolidColor extends RenderDecoratedBox { - final sky.Size desiredSize; - final sky.Color backgroundColor; - - RenderSolidColor(sky.Color backgroundColor, { this.desiredSize: sky.Size.infinite }) - : backgroundColor = backgroundColor, - super(decoration: new BoxDecoration(backgroundColor: backgroundColor)) { - } - - double getMinIntrinsicWidth(BoxConstraints constraints) { - return constraints.constrainWidth(desiredSize.width); - } - - double getMaxIntrinsicWidth(BoxConstraints constraints) { - return constraints.constrainWidth(desiredSize.width); - } - - double getMinIntrinsicHeight(BoxConstraints constraints) { - return constraints.constrainHeight(desiredSize.height); - } - - double getMaxIntrinsicHeight(BoxConstraints constraints) { - return constraints.constrainHeight(desiredSize.height); - } - - void performLayout() { - size = constraints.constrain(desiredSize); - } - - void handleEvent(sky.Event event, BoxHitTestEntry entry) { - if (event.type == 'pointerdown') - decoration = new BoxDecoration(backgroundColor: const sky.Color(0xFFFF0000)); - else if (event.type == 'pointerup') - decoration = new BoxDecoration(backgroundColor: backgroundColor); - } -} - void main() { initUnit(); test("should flex", () { - RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical); - - RenderDecoratedBox root = new RenderDecoratedBox( - decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF000000)), - child: flexRoot - ); - - void addFlexChildSolidColor(RenderFlex parent, sky.Color backgroundColor, { int flex: 0 }) { - RenderSolidColor child = new RenderSolidColor(backgroundColor); - parent.add(child); - child.parentData.flex = flex; - } - - // Yellow bar at top - addFlexChildSolidColor(flexRoot, const sky.Color(0xFFFFFF00), flex: 1); - - // Turquoise box - flexRoot.add(new RenderSolidColor(const sky.Color(0x7700FFFF), desiredSize: new sky.Size(100.0, 100.0))); - - // Green and cyan render block with padding - var renderBlock = new RenderBlock(); - - renderBlock.add(new RenderSolidColor(const sky.Color(0xFF00FF00), desiredSize: new sky.Size(100.0, 50.0))); - renderBlock.add(new RenderSolidColor(const sky.Color(0x7700FFFF), desiredSize: new sky.Size(50.0, 100.0))); - - var renderDecoratedBlock = new RenderDecoratedBox( - decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFFFFFFFF)), - child: renderBlock - ); - - flexRoot.add(new RenderPadding(padding: const EdgeDims.all(10.0), child: renderDecoratedBlock)); - - var row = new RenderFlex(direction: FlexDirection.horizontal); - - // Purple and blue cells - addFlexChildSolidColor(row, const sky.Color(0x77FF00FF), flex: 1); - addFlexChildSolidColor(row, const sky.Color(0xFF0000FF), flex: 2); - - var decoratedRow = new RenderDecoratedBox( - decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF333333)), - child: row - ); - - flexRoot.add(decoratedRow); - decoratedRow.parentData.flex = 3; - + RenderBox root = buildFlexExample(); new TestRenderView(root); - expect(root.size.width, equals(sky.view.width)); expect(root.size.height, equals(sky.view.height)); - expect(renderBlock.size.width, equals(sky.view.width - 20.0)); - }); } diff --git a/tests/widgets/syncs1-expected.txt b/tests/widgets/syncs1-expected.txt index f1ffae8408f..d5470acbf3d 100644 --- a/tests/widgets/syncs1-expected.txt +++ b/tests/widgets/syncs1-expected.txt @@ -6,7 +6,7 @@ PAINT FOR FRAME #1 ---------------------------------------------- CONSOLE: PAINT FOR FRAME #2 ---------------------------------------------- 2 | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | paintChild RenderBlock at Point(0.0, 0.0) +2 | paintChild RenderFlex at Point(0.0, 0.0) 2 | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | paintChild RenderConstrainedBox at Point(0.0, 0.0) 2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 @@ -68,7 +68,7 @@ PAINT FOR FRAME #2 ---------------------------------------------- CONSOLE: PAINT FOR FRAME #3 ---------------------------------------------- 3 | TestPaintingCanvas() constructor: 800.0 x 600.0 -3 | paintChild RenderBlock at Point(0.0, 0.0) +3 | paintChild RenderFlex at Point(0.0, 0.0) 3 | | TestPaintingCanvas() constructor: 800.0 x 600.0 3 | | paintChild RenderConstrainedBox at Point(0.0, 0.0) 3 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 @@ -130,7 +130,7 @@ PAINT FOR FRAME #3 ---------------------------------------------- CONSOLE: PAINT FOR FRAME #4 ---------------------------------------------- 4 | TestPaintingCanvas() constructor: 800.0 x 600.0 -4 | paintChild RenderBlock at Point(0.0, 0.0) +4 | paintChild RenderFlex at Point(0.0, 0.0) 4 | | TestPaintingCanvas() constructor: 800.0 x 600.0 4 | | paintChild RenderConstrainedBox at Point(0.0, 0.0) 4 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 diff --git a/tests/widgets/syncs1.dart b/tests/widgets/syncs1.dart index 0fa9991193a..dcc20355dd5 100644 --- a/tests/widgets/syncs1.dart +++ b/tests/widgets/syncs1.dart @@ -64,18 +64,21 @@ class FiddleApp extends App { } Widget build() { - return new Block([ - new SizedBox( - key: 'flex-example', - height: 250.0, - child: arbitrarySetting ? buildFlex1() : buildFlex2() - ), - new SizedBox( - key: 'stack-example', - height: 250.0, - child: arbitrarySetting ? buildStack1() : buildStack2() - ) - ]); + return new Flex([ + new SizedBox( + key: 'flex-example', + height: 250.0, + child: arbitrarySetting ? buildFlex1() : buildFlex2() + ), + new SizedBox( + key: 'stack-example', + height: 250.0, + child: arbitrarySetting ? buildStack1() : buildStack2() + ) + ], + direction: FlexDirection.vertical, + alignItems: FlexAlignItems.stretch + ); } }