From f6bee1e2c4538e70cdb888101a6bca04801659fa Mon Sep 17 00:00:00 2001
From: Ojan Vafai <ojan@chromium.org>
Date: Fri, 20 Feb 2015 18:20:23 -0800
Subject: [PATCH] Add render tree dump and pixel tests for statically placed
 position:absolute.

This exposes a bug that we position and size position:absolute
correctly inside paragraphs, but we fail to paint them.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/943113003
---
 .../layout/position-absolute-expected.txt     | 21 +++++++
 .../position-absolute-pixels-expected.sky     | 18 ++++++
 .../tests/layout/position-absolute-pixels.sky | 62 +++++++++++++++++++
 .../tests/layout/position-absolute.sky        | 49 +++++++++++++++
 4 files changed, 150 insertions(+)
 create mode 100644 engine/src/flutter/tests/layout/position-absolute-expected.txt
 create mode 100644 engine/src/flutter/tests/layout/position-absolute-pixels-expected.sky
 create mode 100644 engine/src/flutter/tests/layout/position-absolute-pixels.sky
 create mode 100644 engine/src/flutter/tests/layout/position-absolute.sky

diff --git a/engine/src/flutter/tests/layout/position-absolute-expected.txt b/engine/src/flutter/tests/layout/position-absolute-expected.txt
new file mode 100644
index 00000000000..58658574d3f
--- /dev/null
+++ b/engine/src/flutter/tests/layout/position-absolute-expected.txt
@@ -0,0 +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)]
+layer at (0,40) size 20x20
+  RenderBlock (positioned) {absolute} at (0,40) 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)]
+layer at (0,194) size 20x20
+  RenderBlock (positioned) {absolute} at (0,44) 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)]
+layer at (40,300) size 20x20
+  RenderBlock (positioned) {absolute} at (40,0) size 20x20 [bgcolor=#008000]
+
diff --git a/engine/src/flutter/tests/layout/position-absolute-pixels-expected.sky b/engine/src/flutter/tests/layout/position-absolute-pixels-expected.sky
new file mode 100644
index 00000000000..57acdb7281d
--- /dev/null
+++ b/engine/src/flutter/tests/layout/position-absolute-pixels-expected.sky
@@ -0,0 +1,18 @@
+<sky>
+  <import src="../resources/run-after-display.sky"/>
+
+  <img src="http://storage.googleapis.com/mojo/sky-pngs/779342ae094f03cdac369ade75c087d56c742669" />
+
+  <script>
+  import "dart:sky";
+  import "dart:sky.internals" as internals;
+
+  void main() {
+    window.addEventListener("load", (_) {
+      runAfterDisplay(() {
+        internals.notifyTestComplete("");
+      });
+    });
+  }
+  </script>
+</sky>
diff --git a/engine/src/flutter/tests/layout/position-absolute-pixels.sky b/engine/src/flutter/tests/layout/position-absolute-pixels.sky
new file mode 100644
index 00000000000..07b57721965
--- /dev/null
+++ b/engine/src/flutter/tests/layout/position-absolute-pixels.sky
@@ -0,0 +1,62 @@
+<import src="../resources/run-after-display.sky" />
+
+<style>
+  block, paragraph, flex {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 50px;
+    /* Make it a positioning root. */
+    transform: translate3d(0, 0, 0);
+  }
+  block { background: pink; }
+  paragraph {
+    background: orange;
+    display: paragraph;
+  }
+  flex {
+    background: salmon;
+    display: flex;
+  }
+  spacer {
+    height: 30px;
+    width: 30px;
+    border: 5px solid purple;
+    background: papayawhip;
+  }
+  absolute {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: green;
+  }
+</style>
+<block>
+  <spacer />
+  <absolute />
+  <spacer />
+</block>
+
+<paragraph>
+  <spacer />
+  <absolute />
+  <spacer />
+</paragraph>
+
+<flex>
+  <spacer />
+  <absolute />
+  <spacer />
+</flex>
+
+<script>
+import "dart:sky";
+import "dart:sky.internals" as internals;
+
+void main() {
+  window.addEventListener("load", (_) {
+    runAfterDisplay(() {
+      internals.notifyTestComplete("");
+    });
+  });
+}
+</script>
diff --git a/engine/src/flutter/tests/layout/position-absolute.sky b/engine/src/flutter/tests/layout/position-absolute.sky
new file mode 100644
index 00000000000..d67a56e8407
--- /dev/null
+++ b/engine/src/flutter/tests/layout/position-absolute.sky
@@ -0,0 +1,49 @@
+<import src="../resources/dump-as-render-tree.sky" />
+
+<style>
+  block, paragraph, flex {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 50px;
+    /* Make it a positioning root. */
+    transform: translate3d(0, 0, 0);
+  }
+  block { background: pink; }
+  paragraph {
+    background: orange;
+    display: paragraph;
+  }
+  flex {
+    background: salmon;
+    display: flex;
+  }
+  spacer {
+    height: 30px;
+    width: 30px;
+    border: 5px solid purple;
+    background: papayawhip;
+  }
+  absolute {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: green;
+  }
+</style>
+<block>
+  <spacer />
+  <absolute />
+  <spacer />
+</block>
+
+<paragraph>
+  <spacer />
+  <absolute />
+  <spacer />
+</paragraph>
+
+<flex>
+  <spacer />
+  <absolute />
+  <spacer />
+</flex>