Remove all uses of display:block and display:inline-block.

-Make display:flex, flex-direction: column, flex-shrink: 1 the default. -Simplify StyleAdjuster::adjustStyleForAlignment to remove special cases we won't need as we make flex the default and remove absolute positioning. -Fix a bug this exposed in column flexboxes where we'd apply the wrong edge of border/padding/margin. -For now leave the default of align-items:stretch. The main change here is that iframe/img will do width:auto the same as blocks (i.e. the width of the parent). I think this is a good change, but we'll have to see how it feels in practice. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1061163002
2026-02-20 02:29:02 +08:00 · 2015-04-06 16:44:12 -07:00 · 2015-04-06 16:44:12 -07:00 · 88f38ce0e6
commit 88f38ce0e6
parent 8570f4fbdb
35 changed files with 83 additions and 104 deletions
--- a/engine/core/css/parser/CSSPropertyParser.cpp
+++ b/engine/core/css/parser/CSSPropertyParser.cpp
@ -4257,6 +4257,7 @@ static bool isFlexBasisMiddleArg(double flexGrow, double flexShrink, double unse
    return flexGrow != unsetValue && flexShrink == unsetValue &&  argSize == 3;
 }

+// TODO(ojan): Make this have reasonable defaults.
 bool CSSPropertyParser::parseFlex(CSSParserValueList* args)
 {
    if (!args || !args->size() || args->size() > 3)
--- a/engine/core/css/resolver/StyleAdjuster.cpp
+++ b/engine/core/css/resolver/StyleAdjuster.cpp
@ -184,53 +184,19 @@ void StyleAdjuster::adjustRenderStyle(RenderStyle* style, RenderStyle* parentSty

 void StyleAdjuster::adjustStyleForAlignment(RenderStyle& style, const RenderStyle& parentStyle)
 {
-    bool isFlex = style.isDisplayFlexibleBox();
-    bool absolutePositioned = style.position() == AbsolutePosition;
-
-    // If the inherited value of justify-items includes the legacy keyword, 'auto'
-    // computes to the the inherited value.
-    // Otherwise, auto computes to:
-    //  - 'stretch' for flex containers.
-    //  - 'start' for everything else.
    if (style.justifyItems() == ItemPositionAuto) {
-        if (parentStyle.justifyItemsPositionType() == LegacyPosition) {
-            style.setJustifyItems(parentStyle.justifyItems());
-            style.setJustifyItemsPositionType(parentStyle.justifyItemsPositionType());
-        } else if (isFlex) {
-            style.setJustifyItems(ItemPositionStretch);
-        }
+        style.setJustifyItems(parentStyle.justifyItems());
+        style.setJustifyItemsPositionType(parentStyle.justifyItemsPositionType());
    }

-    // The 'auto' keyword computes to 'stretch' on absolutely-positioned elements,
-    // and to the computed value of justify-items on the parent (minus
-    // any legacy keywords) on all other boxes.
    if (style.justifySelf() == ItemPositionAuto) {
-        if (absolutePositioned) {
-            style.setJustifySelf(ItemPositionStretch);
-        } else {
-            style.setJustifySelf(parentStyle.justifyItems());
-            style.setJustifySelfOverflowAlignment(parentStyle.justifyItemsOverflowAlignment());
-        }
+        style.setJustifySelf(parentStyle.justifyItems());
+        style.setJustifySelfOverflowAlignment(parentStyle.justifyItemsOverflowAlignment());
    }

-    // The 'auto' keyword computes to:
-    //  - 'stretch' for flex containers,
-    //  - 'start' for everything else.
-    if (style.alignItems() == ItemPositionAuto) {
-        if (isFlex)
-            style.setAlignItems(ItemPositionStretch);
-    }
-
-    // The 'auto' keyword computes to 'stretch' on absolutely-positioned elements,
-    // and to the computed value of align-items on the parent (minus
-    // any 'legacy' keywords) on all other boxes.
    if (style.alignSelf() == ItemPositionAuto) {
-        if (absolutePositioned) {
-            style.setAlignSelf(ItemPositionStretch);
-        } else {
-            style.setAlignSelf(parentStyle.alignItems());
-            style.setAlignSelfOverflowAlignment(parentStyle.alignItemsOverflowAlignment());
-        }
+        style.setAlignSelf(parentStyle.alignItems());
+        style.setAlignSelfOverflowAlignment(parentStyle.alignItemsOverflowAlignment());
    }
 }

--- a/engine/core/rendering/RenderFlexibleBox.cpp
+++ b/engine/core/rendering/RenderFlexibleBox.cpp
@ -418,14 +418,12 @@ LayoutUnit RenderFlexibleBox::flowAwareBorderEnd() const

 LayoutUnit RenderFlexibleBox::flowAwareBorderBefore() const
 {
-    // FIXME(sky): Remove
-    return borderTop();
+    return isHorizontalFlow() ? borderTop() : borderLeft();
 }

 LayoutUnit RenderFlexibleBox::flowAwareBorderAfter() const
 {
-    // FIXME(sky): Remove
-    return borderBottom();
+    return isHorizontalFlow() ? borderBottom() : borderRight();
 }

 LayoutUnit RenderFlexibleBox::flowAwarePaddingStart() const
@ -444,14 +442,12 @@ LayoutUnit RenderFlexibleBox::flowAwarePaddingEnd() const

 LayoutUnit RenderFlexibleBox::flowAwarePaddingBefore() const
 {
-    // FIXME(sky): Remove
-    return paddingTop();
+    return isHorizontalFlow() ? paddingTop() : paddingLeft();
 }

 LayoutUnit RenderFlexibleBox::flowAwarePaddingAfter() const
 {
-    // FIXME(sky): Remove
-    return paddingBottom();
+    return isHorizontalFlow() ? paddingBottom() : paddingRight();
 }

 LayoutUnit RenderFlexibleBox::flowAwareMarginStartForChild(RenderBox* child) const
@ -470,8 +466,7 @@ LayoutUnit RenderFlexibleBox::flowAwareMarginEndForChild(RenderBox* child) const

 LayoutUnit RenderFlexibleBox::flowAwareMarginBeforeForChild(RenderBox* child) const
 {
-    // FIXME(sky): Remove
-    return child->marginTop();
+    return isHorizontalFlow() ? child->marginTop() : child->marginLeft();
 }

 LayoutUnit RenderFlexibleBox::crossAxisMarginExtentForChild(RenderBox* child) const
--- a/engine/core/rendering/style/RenderStyle.h
+++ b/engine/core/rendering/style/RenderStyle.h
@ -1111,7 +1111,7 @@ public:
    static TextOrientation initialTextOrientation() { return TextOrientationVerticalRight; }
    static ObjectFit initialObjectFit() { return ObjectFitFill; }
    static LengthPoint initialObjectPosition() { return LengthPoint(Length(50.0, Percent), Length(50.0, Percent)); }
-    static EDisplay initialDisplay() { return BLOCK; }
+    static EDisplay initialDisplay() { return FLEX; }
    static EEmptyCell initialEmptyCells() { return SHOW; }
    static EListStylePosition initialListStylePosition() { return OUTSIDE; }
    static EListStyleType initialListStyleType() { return Disc; }
@ -1164,7 +1164,7 @@ public:
    static unsigned initialBoxOrdinalGroup() { return 1; }
    static EBoxSizing initialBoxSizing() { return CONTENT_BOX; }
    static float initialFlexGrow() { return 0; }
-    static float initialFlexShrink() { return 1; }
+    static float initialFlexShrink() { return 0; }
    static Length initialFlexBasis() { return Length(Auto); }
    static int initialOrder() { return 0; }
    static EAlignContent initialAlignContent() { return AlignContentStretch; }
@ -1172,7 +1172,7 @@ public:
    static OverflowAlignment initialAlignItemsOverflowAlignment() { return OverflowAlignmentDefault; }
    static ItemPosition initialAlignSelf() { return ItemPositionAuto; }
    static OverflowAlignment initialAlignSelfOverflowAlignment() { return OverflowAlignmentDefault; }
-    static EFlexDirection initialFlexDirection() { return FlowRow; }
+    static EFlexDirection initialFlexDirection() { return FlowColumn; }
    static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
    static EJustifyContent initialJustifyContent() { return JustifyFlexStart; }
    static ItemPosition initialJustifyItems() { return ItemPositionAuto; }
--- a/examples/stocks/lib/stock_arrow.dart
+++ b/examples/stocks/lib/stock_arrow.dart
@ -10,6 +10,7 @@ class StockArrow extends Component {
    width: 40px;
    height: 40px;
    display: flex;
+    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
--- a/examples/stocks/lib/stock_row.dart
+++ b/examples/stocks/lib/stock_row.dart
@ -11,6 +11,7 @@ import 'stock_data.dart';
 class StockRow extends Component {
  static final Style _style = new Style('''
    display: flex;
+    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #F4F4F4;
    padding-top: 16px;
--- a/framework/components/action_bar.dart
+++ b/framework/components/action_bar.dart
@ -9,6 +9,7 @@ import 'material.dart';
 class ActionBar extends Component {
  static final Style _style = new Style('''
    display: flex;
+    flex-direction: row;
    align-items: center;
    height: 56px;
    padding: 0 8px;
--- a/framework/components/checkbox.dart
+++ b/framework/components/checkbox.dart
@ -11,6 +11,7 @@ class Checkbox extends ButtonBase {
  static final Style _style = new Style('''
    transform: translateX(0);
    display: flex;
+    flex-direction: row;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
--- a/framework/components/floating_action_button.dart
+++ b/framework/components/floating_action_button.dart
@ -21,6 +21,7 @@ class FloatingActionButton extends Component {
    transform: translateX(0);
    position: absolute;
    display: flex;
+    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
--- a/framework/components/menu_item.dart
+++ b/framework/components/menu_item.dart
@ -11,6 +11,7 @@ class MenuItem extends ButtonBase {
  static final Style _style = new Style('''
    transform: translateX(0);
    display: flex;
+    flex-direction: row;
    align-items: center;
    height: 48px;
    -webkit-user-select: none;'''
@ -19,6 +20,7 @@ class MenuItem extends ButtonBase {
  static final Style _highlightStyle = new Style('''
    transform: translateX(0);
    display: flex;
+    flex-direction: row;
    align-items: center;
    height: 48px;
    background: rgba(153, 153, 153, 0.4);
--- a/framework/components/radio.dart
+++ b/framework/components/radio.dart
@ -16,7 +16,7 @@ class Radio extends ButtonBase {

  static final Style _style = new Style('''
    transform: translateX(0);
-    display: inline-block;
+    display: inline-flex;
    -webkit-user-select: none;
    width: 14px;
    height: 14px;
@ -27,7 +27,7 @@ class Radio extends ButtonBase {

  static final Style _highlightStyle = new Style('''
    transform: translateX(0);
-    display: inline-block;
+    display: inline-flex;
    -webkit-user-select: none;
    width: 14px;
    height: 14px;
--- a/framework/editing/editable_text.dart
+++ b/framework/editing/editable_text.dart
@ -13,7 +13,7 @@ class EditableText extends Component {
  );

  static final Style _cusorStyle = new Style('''
-    display: inline-block;
+    display: inline-flex;
    width: 2px;
    height: 1.2em;
    vertical-align: top;
--- a/framework/elements/sky-checkbox.sky
+++ b/framework/elements/sky-checkbox.sky
@ -10,7 +10,7 @@
 <template>
  <style>
    :host {
-      display: inline-block;
+      display: inline-flex;
      -webkit-user-select: none;
      margin: 8px 16px;
    }
--- a/framework/elements/sky-input.sky
+++ b/framework/elements/sky-input.sky
@ -10,6 +10,7 @@
  <style>
  :host {
    display: flex;
+    flex-direction: row;
  }
  #control {
    margin: 8px;
--- a/framework/elements/sky-menu-item.sky
+++ b/framework/elements/sky-menu-item.sky
@ -12,12 +12,14 @@
  <style>
    :host {
      display: flex;
+      flex-direction: row;
      align-items: center;
      height: 48px;
      -webkit-user-select: none;
    }
    #background {
      display: flex;
+      flex-direction: row;
      align-items: center;
      height: 100%;
      flex: 1;
--- a/framework/elements/sky-radio.sky
+++ b/framework/elements/sky-radio.sky
@ -10,7 +10,7 @@
 <template>
  <style>
    :host {
-      display: inline-block;
+      display: inline-flex;
      -webkit-user-select: none;
      margin: 8px 16px;
    }
--- a/framework/elements/sky-toolbar.sky
+++ b/framework/elements/sky-toolbar.sky
@ -11,6 +11,7 @@
  <style>
    :host {
      display: flex;
+      flex-direction: row;
      align-items: center;
      height: 56px;
    }
--- a/tests/clipping/background-opaque-clipped-gradients-expected.txt
+++ b/tests/clipping/background-opaque-clipped-gradients-expected.txt
@ -1,9 +1,9 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {sky} at (0,0) size 800x238
+    RenderFlexibleBox {sky} at (0,0) size 800x238
      RenderParagraph (anonymous) at (0,0) size 800x38
        RenderText {#text} at (0,0) size 778x38
          text run at (0,0) width 778: "Test passes if the image below shows nested green, blue and yellow squares with a dotted black"
          text run at (0,19) width 59: "border."
-      RenderBlock {div} at (0,38) size 200x200 [border: (25px dotted #000000)]
+      RenderFlexibleBox {div} at (0,38) size 200x200 [border: (25px dotted #000000)]

--- a/tests/editing/backspace.sky
+++ b/tests/editing/backspace.sky
@ -2,6 +2,7 @@
 <style>
 .blue {
  border: 2px solid blue;
+  display: paragraph;
 }
 </style>
 <div class="blue" contenteditable></div>
--- a/tests/editing/replace.sky
+++ b/tests/editing/replace.sky
@ -2,6 +2,7 @@
 <style>
 .blue {
  border: 2px solid blue;
+  display: paragraph;
 }
 </style>
 <div class="blue" contenteditable></div>
--- a/tests/editing/selection.sky
+++ b/tests/editing/selection.sky
@ -2,6 +2,7 @@
 <style>
 .blue {
  border: 2px solid blue;
+  display: paragraph;
 }
 </style>
 <div class="blue" contenteditable></div>
--- a/tests/editing/typing.sky
+++ b/tests/editing/typing.sky
@ -2,6 +2,7 @@
 <style>
 .blue {
  border: 2px solid blue;
+  display: paragraph;
 }
 </style>
 <div class="blue" contenteditable></div>
--- a/tests/layout/continuations-expected.txt
+++ b/tests/layout/continuations-expected.txt
@ -1,9 +1,9 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {sky} at (0,0) size 800x19
-      RenderBlock {div} at (0,0) size 800x19
+    RenderFlexibleBox {sky} at (0,0) size 800x19
+      RenderFlexibleBox {div} at (0,0) size 800x19
        RenderParagraph {span} at (0,0) size 800x19
-          RenderBlock (inline-block) {div} at (0,0) size 25.22x19
+          RenderFlexibleBox {div} at (0,0) size 25.22x19
            RenderParagraph (anonymous) at (0,0) size 25.22x19
              RenderText {#text} at (0,0) size 26x19
                text run at (0,0) width 26: "foo"
--- a/tests/layout/document-elementFromPoint-absolute-position.sky
+++ b/tests/layout/document-elementFromPoint-absolute-position.sky
@ -7,7 +7,7 @@ no-z-above,
 no-z-below,
 postive-z-after {
  position: absolute;
-  display: block;
+  display: flex;
  left: 0;
  right: 0;
  top: 0;
--- a/tests/layout/document-elementFromPoint.sky
+++ b/tests/layout/document-elementFromPoint.sky
@ -5,15 +5,15 @@ bar { width: 100px; height: 100px; background: purple; }
 parent { display: paragraph; }
 child { background: salmon; }
 canvas { height: 50px; background-color: pink; }
-inline-block { display: inline-block; width: 50px; height: 50px; background: green; }
+inline-flex { display: inline-flex; width: 50px; height: 50px; background: green; }
 grand-child { width: 50px; height: 50px; transform: translate3d(100px, 0, 0); background: papayawhip; }
 </style>
 <foo /><bar />
 <parent>
  <child>Foo bar</child>
-  <inline-block>
+  <inline-flex>
    <grand-child />
-  </inline-block>
+  </inline-flex>
 </parent>
 <canvas />
 <script>
@ -57,11 +57,11 @@ void main() {
  });

  test("should hit test transformed child", () {
-    document.querySelector('parent').style["display"] = "block";
+    document.querySelector('parent').style["display"] = "flex";
    document.querySelector('child').style["transform"] = "translate3d(100px, 0, 0)";
    expect(document.elementFromPoint(50, 210).tagName, equals('parent'));
    expect(document.elementFromPoint(150, 210).tagName, equals('child'));
-    expect(document.elementFromPoint(25, 240).tagName, equals('inline-block'));
+    expect(document.elementFromPoint(25, 240).tagName, equals('inline-flex'));
    // TODO(ojan): This is incorrect. It should hit grand-child.
    // This broke sometime before 4153b8a515d54275934d4244aaf2d5a7a8fe3333.
    expect(document.elementFromPoint(150, 240).tagName, equals('sky'));
--- a/tests/layout/ellipsis-expected.txt
+++ b/tests/layout/ellipsis-expected.txt
@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {sky} at (0,0) size 800x94
+    RenderFlexibleBox {sky} at (0,0) size 800x94
 layer at (0,0) size 56x69
-  RenderBlock {div} at (0,0) size 56x69 [border: (3px solid #0000FF)]
+  RenderFlexibleBox {div} at (0,0) size 56x69 [border: (3px solid #0000FF)]
    RenderParagraph (anonymous) at (3,3) size 50x19
      RenderText {#text} at (0,0) size 91x19
        text run at (0,0) width 91: "These lines"
--- a/tests/layout/fixed-width-expected.txt
+++ b/tests/layout/fixed-width-expected.txt
@ -1,5 +1,5 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {sky} at (0,0) size 800x50
-      RenderBlock {div} at (0,0) size 50x50 [bgcolor=#FFC0CB]
+    RenderFlexibleBox {sky} at (0,0) size 800x50
+      RenderFlexibleBox {div} at (0,0) size 50x50 [bgcolor=#FFC0CB]

--- a/tests/layout/position-absolute-expected.txt
+++ b/tests/layout/position-absolute-expected.txt
@ -1,21 +1,21 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
 layer at (0,0) size 100x100
-  RenderBlock {block} at (0,0) size 100x100 [bgcolor=#FFC0CB]
-    RenderBlock {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
-    RenderBlock {spacer} at (0,40) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+  RenderFlexibleBox {block} at (0,0) size 100x100 [bgcolor=#FFC0CB]
+    RenderFlexibleBox {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+    RenderFlexibleBox {spacer} at (0,40) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
 layer at (0,0) size 20x20
-  RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]
+  RenderFlexibleBox {absolute} at (0,0) size 20x20 [bgcolor=#008000]
 layer at (0,150) size 100x100
  RenderParagraph {paragraph} at (0,150) size 100x100 [bgcolor=#FFA500]
-    RenderBlock (inline-block) {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
-    RenderBlock (inline-block) {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+    RenderFlexibleBox {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+    RenderFlexibleBox {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
 layer at (0,150) size 20x20
-  RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]
+  RenderFlexibleBox {absolute} at (0,0) size 20x20 [bgcolor=#008000]
 layer at (0,300) size 100x100
  RenderFlexibleBox {flex} at (0,300) size 100x100 [bgcolor=#FA8072]
-    RenderBlock {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
-    RenderBlock {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+    RenderFlexibleBox {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
+    RenderFlexibleBox {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
 layer at (0,300) size 20x20
-  RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]
+  RenderFlexibleBox {absolute} at (0,0) size 20x20 [bgcolor=#008000]

--- a/tests/layout/position-absolute-pixels.sky
+++ b/tests/layout/position-absolute-pixels.sky
@ -16,6 +16,7 @@
  flex {
    background: salmon;
    display: flex;
+    flex-direction: row;
  }
  spacer {
    height: 30px;
--- a/tests/layout/position-absolute.sky
+++ b/tests/layout/position-absolute.sky
@ -16,6 +16,7 @@
  flex {
    background: salmon;
    display: flex;
+    flex-direction: row;
  }
  spacer {
    height: 30px;
--- a/tests/lowlevel/abarth-expected.txt
+++ b/tests/lowlevel/abarth-expected.txt
@ -1,23 +1,23 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
 layer at (0,0) size 800x600
-  RenderBlock {html} at (0,0) size 800x600
-    RenderBlock {head} at (0,0) size 800x0
-    RenderBlock {body} at (0,0) size 800x600 [bgcolor=#FFFFFF]
-      RenderBlock {div} at (0,0) size 800x265
-        RenderBlock {div} at (0,0) size 800x115
+  RenderFlexibleBox {html} at (0,0) size 800x600
+    RenderFlexibleBox {head} at (0,0) size 800x0
+    RenderFlexibleBox {body} at (0,0) size 800x600 [bgcolor=#FFFFFF]
+      RenderFlexibleBox {div} at (0,0) size 800x265
+        RenderFlexibleBox {div} at (0,0) size 800x115
          RenderParagraph {div} at (15,15) size 770x49
            RenderInline {a} at (0,0) size 242x48 [color=#333333]
              RenderText {#text} at (528,0) size 242x48
                text run at (528,0) width 242: "Adam Barth"
-          RenderBlock {div} at (15,64) size 770x36
+          RenderFlexibleBox {div} at (15,64) size 770x36
            RenderParagraph {div} at (0,0) size 770x18
              RenderText {#text} at (574,0) size 196x17
                text run at (574,0) width 196: "Ph.D., M.S., Stanford, 2008"
            RenderParagraph {div} at (0,18) size 770x18
              RenderText {#text} at (635,0) size 135x17
                text run at (635,0) width 135: "B.A., Cornell, 2003"
-        RenderBlock {div} at (0,115) size 800x150
+        RenderFlexibleBox {div} at (0,115) size 800x150
          RenderParagraph {div} at (0,19) size 800x28
            RenderInline {a} at (0,0) size 93x17 [color=#333333]
              RenderText {#text} at (692,5) size 93x17
--- a/tests/lowlevel/hello-world-expected.txt
+++ b/tests/lowlevel/hello-world-expected.txt
@ -1,6 +1,6 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {foo} at (0,0) size 800x19
+    RenderFlexibleBox {foo} at (0,0) size 800x19
      RenderParagraph (anonymous) at (0,0) size 800x19
        RenderText {#text} at (0,0) size 99x19
          text run at (0,0) width 99: "Hello World!"
--- a/tests/lowlevel/home-expected.txt
+++ b/tests/lowlevel/home-expected.txt
@ -1,11 +1,11 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {div} at (0,0) size 800x137
-      RenderBlock {div} at (32,32) size 736x38
+    RenderFlexibleBox {div} at (0,0) size 800x137
+      RenderFlexibleBox {div} at (32,32) size 736x38
        RenderParagraph (anonymous) at (0,0) size 736x38
          RenderText {#text} at (0,0) size 191x38
            text run at (0,0) width 191: "about:blank"
-      RenderBlock {div} at (16,110) size 768x19 [color=#BCD8F5]
+      RenderFlexibleBox {div} at (16,110) size 768x19 [color=#BCD8F5]
        RenderParagraph (anonymous) at (0,0) size 768x19
          RenderText {#text} at (0,0) size 152x19
            text run at (0,0) width 152: "Welcome to Sky!"
--- a/tests/lowlevel/iframe-expected.txt
+++ b/tests/lowlevel/iframe-expected.txt
@ -1,26 +1,26 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {sky} at (0,0) size 800x506
-      RenderBlock {div} at (0,0) size 800x228
+    RenderFlexibleBox {sky} at (0,0) size 800x506
+      RenderFlexibleBox {div} at (0,0) size 800x228
        RenderParagraph (anonymous) at (0,0) size 800x19
          RenderText {#text} at (0,0) size 76x19
            text run at (0,0) width 76: "This is an"
        RenderParagraph (anonymous) at (0,209) size 800x19
          RenderText {#text} at (0,0) size 72x19
            text run at (0,0) width 72: "element."
-      RenderBlock {div} at (0,228) size 800x200
+      RenderFlexibleBox {div} at (0,228) size 800x200
        RenderParagraph (anonymous) at (0,0) size 800x19
          RenderText {#text} at (0,0) size 99x19
            text run at (0,0) width 99: "Placeholder."
-      RenderBlock {div} at (0,428) size 800x78
+      RenderFlexibleBox {div} at (0,428) size 800x78
        RenderParagraph (anonymous) at (0,0) size 800x19
          RenderText {#text} at (0,0) size 218x19
            text run at (0,0) width 218: "Small iframe should render"
        RenderParagraph (anonymous) at (0,59) size 800x19
          RenderText {#text} at (0,0) size 76x19
            text run at (0,0) width 76: "correctly."
-layer at (0,19) size 340x190
-  RenderReplaced {iframe} at (0,19) size 340x190 [border: (20px solid #000000)]
-layer at (0,447) size 300x40
-  RenderReplaced {iframe} at (0,19) size 300x40
+layer at (0,19) size 800x190
+  RenderReplaced {iframe} at (0,19) size 800x190 [border: (20px solid #000000)]
+layer at (0,447) size 800x40
+  RenderReplaced {iframe} at (0,19) size 800x40

--- a/tests/lowlevel/img-expected.txt
+++ b/tests/lowlevel/img-expected.txt
@ -1,6 +1,6 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderBlock {foo} at (0,0) size 800x89
-      RenderImage {img} at (0,0) size 256x64
+    RenderFlexibleBox {foo} at (0,0) size 800x89
+      RenderImage {img} at (0,0) size 800x64
      RenderImage {img} at (0,64) size 100x25