Stop rendering text inside flex boxes.

Text can only only inside paragraphs and inlines. This patch makes it so we stop putting such text nodes in the render tree at all if their parent is not a paragraph or an inline. This is the final step in making it so that we don't create anonymous renderers, which fixes a crash in the new custom layout code. R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1077473002
2015-04-09 11:40:03 -07:00
parent de89bf500f
commit 4289780662
34 changed files with 101 additions and 123 deletions
--- a/engine/src/flutter/examples/home.sky
+++ b/engine/src/flutter/examples/home.sky
@@ -1,5 +1,6 @@
 #!mojo mojo:sky_viewer
 <style>
+ div { display: paragraph; }
 .h1 { font-size: 2em; margin: 1em; }
 .p { margin: 0.5em 1em; color: #bcd8f5; font-weight: 900; }
 </style>
--- a/engine/src/flutter/tests/clipping/background-opaque-clipped-gradients-expected.txt
+++ b/engine/src/flutter/tests/clipping/background-opaque-clipped-gradients-expected.txt
@@ -1,7 +1,7 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
    RenderFlexibleBox {sky} at (0,0) size 800x238
-      RenderParagraph (anonymous) at (0,0) size 800x38
+      RenderParagraph {p} 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."
--- a/engine/src/flutter/tests/clipping/background-opaque-clipped-gradients.sky
+++ b/engine/src/flutter/tests/clipping/background-opaque-clipped-gradients.sky
@@ -12,6 +12,6 @@ div {
 }
 </style>
 <!-- TODO(ojan): Make this a reftest once we support them. -->
-Test passes if the image below shows nested green, blue and yellow squares with a dotted black border.
+<p>Test passes if the image below shows nested green, blue and yellow squares with a dotted black border.</p>
 <div></div>
 </sky>
--- a/engine/src/flutter/tests/editing/backspace.sky
+++ b/engine/src/flutter/tests/editing/backspace.sky
@@ -2,10 +2,9 @@
 <style>
 .blue {
  border: 2px solid blue;
-  display: paragraph;
 }
 </style>
-<div class="blue" contenteditable></div>
+<p class="blue" contenteditable></p>
 <script>
 import "../resources/event-sender.dart" as eventSender;
 import "dart:sky";
--- a/engine/src/flutter/tests/editing/replace.sky
+++ b/engine/src/flutter/tests/editing/replace.sky
@@ -2,10 +2,9 @@
 <style>
 .blue {
  border: 2px solid blue;
-  display: paragraph;
 }
 </style>
-<div class="blue" contenteditable></div>
+<p class="blue" contenteditable></p>
 <script>
 import "../resources/event-sender.dart" as eventSender;
 import "dart:sky";
--- a/engine/src/flutter/tests/editing/selection.sky
+++ b/engine/src/flutter/tests/editing/selection.sky
@@ -2,10 +2,9 @@
 <style>
 .blue {
  border: 2px solid blue;
-  display: paragraph;
 }
 </style>
-<div class="blue" contenteditable></div>
+<p class="blue" contenteditable></p>
 <script>
 import "../resources/event-sender.dart" as eventSender;
 import "dart:sky";
--- a/engine/src/flutter/tests/editing/typing.sky
+++ b/engine/src/flutter/tests/editing/typing.sky
@@ -2,10 +2,9 @@
 <style>
 .blue {
  border: 2px solid blue;
-  display: paragraph;
 }
 </style>
-<div class="blue" contenteditable></div>
+<p class="blue" contenteditable></p>
 <script>
 import "../resources/event-sender.dart" as eventSender;
 import "dart:sky";
--- a/engine/src/flutter/tests/harness/reftest-mismatch.sky
+++ b/engine/src/flutter/tests/harness/reftest-mismatch.sky
@@ -1,6 +1,6 @@
 <foo>
 <import src="../resources/run-after-display.sky" />
-This is a mismatch reftest. Should not match.
+<p>This is a mismatch reftest. Should not match.</p>
 <script>
 import "dart:sky.internals" as internals;

--- a/engine/src/flutter/tests/layout/borderbox-percent-padding.sky
+++ b/engine/src/flutter/tests/layout/borderbox-percent-padding.sky
@@ -5,13 +5,10 @@
    max-width: 300px;
    padding: 0 5%;
  }
-  paragraph {
-    display: paragraph;
-  }
 </style>
 <container style="width: 400px">
  <border-box>
-    <paragraph>Even though the width of 'border-box' stays the same after it reaches 300px, the width available to its children decreases as its padding continues to expand. Because the padding is based off the width before it's constrained by min/max. This tests that we continue to layout the contents of border-box even when its own width remains the same.</paragraph>
+    <p>Even though the width of 'border-box' stays the same after it reaches 300px, the width available to its children decreases as its padding continues to expand. Because the padding is based off the width before it's constrained by min/max. This tests that we continue to layout the contents of border-box even when its own width remains the same.</p>
  </div>
 </container>

@@ -25,9 +22,9 @@ void main() {
  initUnit();

  test("paragraph width should shrink", () {
-    expect(document.querySelector("paragraph").offsetWidth, equals(260));
+    expect(document.querySelector("p").offsetWidth, equals(260));
    document.querySelector("container").style["width"] = "800px";
-    expect(document.querySelector("paragraph").offsetWidth, equals(220));
+    expect(document.querySelector("p").offsetWidth, equals(220));
  });
 }
 </script>
--- a/engine/src/flutter/tests/layout/continuations-expected.txt
+++ b/engine/src/flutter/tests/layout/continuations-expected.txt
@@ -1,12 +0,0 @@
-layer at (0,0) size 800x600
-  RenderView {#document} at (0,0) size 800x600
-    RenderFlexibleBox {sky} at (0,0) size 800x19
-      RenderFlexibleBox {div} at (0,0) size 800x19
-        RenderParagraph {span} at (0,0) size 800x19
-          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"
-          RenderText {#text} at (25,0) size 27x19
-            text run at (25,0) width 27: "bar"
-
--- a/engine/src/flutter/tests/layout/continuations.sky
+++ b/engine/src/flutter/tests/layout/continuations.sky
@@ -1,4 +0,0 @@
-<sky>
-    <import src="../resources/dump-as-render-tree.sky" />
-    <div><span style="display: paragraph"><div>foo</div>bar</span></div>
-</sky>
--- a/engine/src/flutter/tests/layout/custom-dirty-bits-expected.txt
+++ b/engine/src/flutter/tests/layout/custom-dirty-bits-expected.txt
@@ -0,0 +1,4 @@
+layer at (0,0) size 800x600
+  RenderView {#document} at (0,0) size 800x600
+    RenderCustomLayout {block} at (0,0) size 0x0
+
--- a/engine/src/flutter/tests/layout/custom-dirty-bits.sky
+++ b/engine/src/flutter/tests/layout/custom-dirty-bits.sky
@@ -0,0 +1,16 @@
+<import src="../resources/dump-as-render-tree.sky" />
+
+<block>hello</block>
+
+<script>
+import 'dart:sky';
+
+void main() {
+  // This tests custom layout of text nodes inside non-paragraphs.
+  // They shouldn't show up in the render tree at all, so they
+  // don't need laying out.
+  // This test passes if it doesn't crash and the render tree
+  // has no RenderTexts.
+  document.querySelector('block').setLayoutManager(() => {});
+}
+</script>
--- a/engine/src/flutter/tests/layout/document-elementFromPoint.sky
+++ b/engine/src/flutter/tests/layout/document-elementFromPoint.sky
@@ -3,7 +3,7 @@
 foo, parent { width: 100px; height: 100px; background: blue; }
 bar { width: 100px; height: 100px; background: purple; }
 parent { display: paragraph; }
-child { background: salmon; }
+child { background: salmon; display: paragraph; }
 canvas { height: 50px; background-color: pink; }
 inline-flex { display: inline-flex; width: 50px; height: 50px; background: green; }
 grand-child { width: 50px; height: 50px; transform: translate3d(100px, 0, 0); background: papayawhip; }
--- a/engine/src/flutter/tests/layout/ellipsis-expected.txt
+++ b/engine/src/flutter/tests/layout/ellipsis-expected.txt
@@ -1,20 +1,17 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    RenderFlexibleBox {sky} at (0,0) size 800x94
-layer at (0,0) size 56x69
-  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"
-    RenderParagraph (anonymous) at (3,47) size 50x19
-      RenderText {#text} at (0,0) size 94x19
-        text run at (0,0) width 94: "all ellipsize."
-layer at (3,22) size 56x25 backgroundClip at (3,22) size 50x25
-  RenderParagraph {p} at (3,22) size 56x25 [border: (3px solid #FF0000)]
-    RenderText {#text} at (3,3) size 54x19
-      text run at (3,3) width 54: "should"
-layer at (0,69) size 56x25
-  RenderParagraph {p} at (0,69) size 56x25 [border: (3px solid #FF0000)]
+    RenderFlexibleBox {sky} at (0,0) size 800x50
+layer at (0,0) size 56x25
+  RenderParagraph {p} at (0,0) size 56x25 [border: (3px solid #FF0000)]
+    RenderText {#text} at (3,3) size 96x19
+      text run at (3,3) width 96: "These lines "
+    RenderInline {p} at (0,0) size 54x19 [border: (3px solid #FF0000)]
+      RenderText {#text} at (98,3) size 54x19
+        text run at (98,3) width 54: "should"
+    RenderText {#text} at (151,3) size 99x19
+      text run at (151,3) width 99: " all ellipsize."
+layer at (0,25) size 56x25
+  RenderParagraph {p} at (0,25) size 56x25 [border: (3px solid #FF0000)]
    RenderInline {span} at (0,0) size 117x19
      RenderText {#text} at (3,3) size 117x19
        text run at (3,3) width 117: "As should this."
--- a/engine/src/flutter/tests/layout/ellipsis.sky
+++ b/engine/src/flutter/tests/layout/ellipsis.sky
@@ -1,16 +1,8 @@
 <sky>
    <import src="../resources/dump-as-render-tree.sky" />
    <style>
-        div {
-            width: 50px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            border: 3px solid blue;
-        }
        p {
            width: 50px;
-            display: paragraph;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
@@ -20,6 +12,6 @@
            display: inline;
        }
    </style>
-    <div>These lines <p>should</p> all ellipsize. </div>
+    <p>These lines <p>should</p> all ellipsize. </p>
    <p><span>As should this.</span></p>
 </sky>
--- a/engine/src/flutter/tests/layout/position-absolute-expected.txt
+++ b/engine/src/flutter/tests/layout/position-absolute-expected.txt
@@ -7,7 +7,7 @@ layer at (0,0) size 100x100
 layer at (0,0) size 20x20
  RenderFlexibleBox {absolute} at (0,0) size 20x20 [bgcolor=#008000]
 layer at (0,150) size 100x100
-  RenderParagraph {paragraph} at (0,150) size 100x100 [bgcolor=#FFA500]
+  RenderParagraph {p} at (0,150) size 100x100 [bgcolor=#FFA500]
    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
--- a/engine/src/flutter/tests/layout/position-absolute-pixels.sky
+++ b/engine/src/flutter/tests/layout/position-absolute-pixels.sky
@@ -1,7 +1,7 @@
 <import src="../resources/run-after-display.sky" />

 <style>
-  block, paragraph, flex {
+  block, p, flex {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
@@ -9,9 +9,8 @@
    transform: translate3d(0, 0, 0);
  }
  block { background: pink; }
-  paragraph {
+  p {
    background: orange;
-    display: paragraph;
  }
  flex {
    background: salmon;
@@ -37,11 +36,11 @@
  <spacer />
 </block>

-<paragraph>
+<p>
  <spacer />
  <absolute />
  <spacer />
-</paragraph>
+</p>

 <flex>
  <spacer />
--- a/engine/src/flutter/tests/layout/position-absolute.sky
+++ b/engine/src/flutter/tests/layout/position-absolute.sky
@@ -1,7 +1,7 @@
 <import src="../resources/dump-as-render-tree.sky" />

 <style>
-  block, paragraph, flex {
+  block, p, flex {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
@@ -9,9 +9,8 @@
    transform: translate3d(0, 0, 0);
  }
  block { background: pink; }
-  paragraph {
+  p {
    background: orange;
-    display: paragraph;
  }
  flex {
    background: salmon;
@@ -37,11 +36,11 @@
  <spacer />
 </block>

-<paragraph>
+<p>
  <spacer />
  <absolute />
  <spacer />
-</paragraph>
+</p>

 <flex>
  <spacer />
--- a/engine/src/flutter/tests/lowlevel/filters.sky
+++ b/engine/src/flutter/tests/lowlevel/filters.sky
@@ -1,7 +1,7 @@
 <foo>
 <import src="../resources/run-after-display.sky" />

-<div style="filter: grayscale(1) blur(2px); color: green;">This should be gray and blurred</div>
+<p style="filter: grayscale(1) blur(2px); color: green;">This should be gray and blurred</p>

 <script>
 import "dart:sky.internals" as internals;
--- a/engine/src/flutter/tests/lowlevel/hello-world-expected.txt
+++ b/engine/src/flutter/tests/lowlevel/hello-world-expected.txt
@@ -1,7 +1,7 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
    RenderFlexibleBox {foo} at (0,0) size 800x19
-      RenderParagraph (anonymous) at (0,0) size 800x19
+      RenderParagraph {p} at (0,0) size 800x19
        RenderText {#text} at (0,0) size 99x19
          text run at (0,0) width 99: "Hello World!"

--- a/engine/src/flutter/tests/lowlevel/hello-world.sky
+++ b/engine/src/flutter/tests/lowlevel/hello-world.sky
@@ -1,4 +1,4 @@
 <foo>
 <import src="../resources/dump-as-render-tree.sky" />
-Hello World!
+<p>Hello World!</p>
 </foo>
--- a/engine/src/flutter/tests/lowlevel/home-expected.txt
+++ b/engine/src/flutter/tests/lowlevel/home-expected.txt
@@ -1,12 +1,10 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
    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"
-      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!"
+      RenderParagraph {p} at (32,32) size 736x38
+        RenderText {#text} at (0,0) size 191x38
+          text run at (0,0) width 191: "about:blank"
+      RenderParagraph {p} at (16,110) size 768x19 [color=#BCD8F5]
+        RenderText {#text} at (0,0) size 152x19
+          text run at (0,0) width 152: "Welcome to Sky!"

--- a/engine/src/flutter/tests/lowlevel/home.sky
+++ b/engine/src/flutter/tests/lowlevel/home.sky
@@ -1,10 +1,10 @@
 <div>
 <style>
- .h1 { font-size: 2em; margin: 1em; }
- .p { margin: 0.5em 1em; color: #bcd8f5; font-weight: 900; }
+  .h1 { font-size: 2em; margin: 1em; }
+  .p { margin: 0.5em 1em; color: #bcd8f5; font-weight: 900; }
 </style>
-<div class="h1">about:blank</div>
-<div class="p">Welcome to Sky!</div>
+<p class="h1">about:blank</p>
+<p class="p">Welcome to Sky!</p>
 <script>
 import "dart:sky" as sky;
 import "dart:sky.internals" as internals;
@@ -12,7 +12,7 @@ import "dart:sky.internals" as internals;
 // Don't use dump-as-render-tree.sky, we want a test with no imports.
 void main() {
  sky.window.addEventListener('load', (_) =>
-    internals.notifyTestComplete(internals.renderTreeAsText()));  
+    internals.notifyTestComplete(internals.renderTreeAsText()));
 }
 </script>
 </div>
--- a/engine/src/flutter/tests/lowlevel/iframe-expected.txt
+++ b/engine/src/flutter/tests/lowlevel/iframe-expected.txt
@@ -1,26 +1,21 @@
 layer at (0,0) size 800x600
  RenderView {#document} at (0,0) size 800x600
-    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."
-      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."
-      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 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
+    RenderFlexibleBox {sky} at (0,0) size 800x438
+      RenderParagraph {p} at (0,0) size 800x194
+        RenderText {#text} at (0,175) size 81x19
+          text run at (0,175) width 81: "This is an "
+        RenderText {#text} at (420,175) size 77x19
+          text run at (420,175) width 77: " element."
+      RenderParagraph {p} at (0,194) size 800x200
+        RenderText {#text} at (0,0) size 99x19
+          text run at (0,0) width 99: "Placeholder."
+      RenderParagraph {p} at (0,394) size 800x44
+        RenderText {#text} at (0,25) size 223x19
+          text run at (0,25) width 223: "Small iframe should render "
+        RenderText {#text} at (522,25) size 82x19
+          text run at (522,25) width 82: " correctly."
+layer at (81,0) size 340x190
+  RenderReplaced {iframe} at (80.67,0) size 340x190 [border: (20px solid #000000)]
+layer at (223,394) size 300x40
+  RenderReplaced {iframe} at (222.81,0) size 300x40

--- a/engine/src/flutter/tests/lowlevel/iframe.sky
+++ b/engine/src/flutter/tests/lowlevel/iframe.sky
@@ -1,9 +1,9 @@
 <sky>
    <import src="../resources/dump-as-render-tree.sky"/>
    <iframe id="removeMe" src="text.sky">Should not render</iframe>
-    <div>This is an <iframe style="border-style: solid; border-width: 20px" src="abarth.sky">iframe</iframe> element.</div>
-    <div style="height: 200px">Placeholder.</div>
-    <div>Small iframe should render <iframe style="height: 40px" src="abarth.sky">iframe</iframe> correctly.</div>
+    <p>This is an <iframe style="border-style: solid; border-width: 20px" src="abarth.sky">iframe</iframe> element.</p>
+    <p style="height: 200px">Placeholder.</p>
+    <p>Small iframe should render <iframe style="height: 40px" src="abarth.sky">iframe</iframe> correctly.</p>

    <script>
    import "dart:sky";
--- a/engine/src/flutter/tests/lowlevel/style-basic.sky
+++ b/engine/src/flutter/tests/lowlevel/style-basic.sky
@@ -28,7 +28,7 @@
        var i = 1;
        for (Element element = tests.firstElementChild; element != null; element = element.nextElementSibling) {
            var order = int.parse(window.getComputedStyle(element)["order"]);
-            var div = document.createElement("div");
+            var p = document.createElement("p");
            var text = (order == i) ? "PASS" : "FAIL";
            text += ": <"
                + element.tagName
@@ -39,8 +39,8 @@
                + order.toString();
            if (order != i)
                text += " expected " + i;
-            div.textContent = text;
-            log.appendChild(div);
+            p.textContent = text;
+            log.appendChild(p);
            ++i;
        }
    }
--- a/engine/src/flutter/tests/lowlevel/text.sky
+++ b/engine/src/flutter/tests/lowlevel/text.sky
@@ -1,6 +1,6 @@
 <html>
 <import src="../resources/dump-as-text.sky" />
-<body>
+<p>
 This is a dump-as-text test.
-</body>
+</p>
 </html>
--- a/engine/src/flutter/tests/modules/basic.sky
+++ b/engine/src/flutter/tests/modules/basic.sky
@@ -1,7 +1,7 @@
 <html>
 <import src="../resources/dump-as-text.sky" />
 <import src="resources/pass.sky" as="hello" />
-<div id="result">FAIL</div>
+<p id="result">FAIL</p>
 <script>
 import "dart:sky";

--- a/engine/src/flutter/tests/modules/import-syntax-error.sky
+++ b/engine/src/flutter/tests/modules/import-syntax-error.sky
@@ -1,7 +1,7 @@
 <html>
 <import src="../resources/dump-as-text.sky" />
 <import src="resources/syntax-error.sky" as="hello" />
-<div id="result">PASS</div>
+<p id="result">PASS</p>
 <script>
 import "dart:sky";

--- a/engine/src/flutter/tests/modules/import-without-export.sky
+++ b/engine/src/flutter/tests/modules/import-without-export.sky
@@ -1,7 +1,7 @@
 <html>
 <import src="resources/does-not-export.sky" as="hello" />
 <import src="../resources/dump-as-text.sky" />
-<div id="result">FAIL - Script did not execute</div>
+<p id="result">FAIL - Script did not execute</p>
 <script>
 import "dart:sky";

--- a/engine/src/flutter/tests/modules/imports-can-import.sky
+++ b/engine/src/flutter/tests/modules/imports-can-import.sky
@@ -1,6 +1,6 @@
 <html>
 <import src="resources/intermediate.sky" as="chocolate" />
-<div id="result">FAIL</div>
+<p id="result">FAIL</p>
 <script>
 import "dart:sky";

--- a/engine/src/flutter/tests/modules/imports-can-load-404s.sky
+++ b/engine/src/flutter/tests/modules/imports-can-load-404s.sky
@@ -1,7 +1,7 @@
 <html>
 <import src="resources/does-not-exist.sky" as="hello" />
 <import src="../resources/dump-as-text.sky" />
-<div id="result">FAIL - Script did not execute</div>
+<p id="result">FAIL - Script did not execute</p>
 <script>
 import "dart:sky";

--- a/engine/src/flutter/tests/parser/comments.sky
+++ b/engine/src/flutter/tests/parser/comments.sky
@@ -1,6 +1,6 @@
 <html>
 <import src="../resources/dump-as-text.sky" />
-<body>
+<p>
 <
 <!
 <!-
@@ -11,5 +11,5 @@
 >
 </
 </>
-</body>
+</p>
 </html>