1 files changed, 124 insertions, 0 deletions
diff --git a/dom/flex/test/chrome/test_flex_item_rect.html b/dom/flex/test/chrome/test_flex_item_rect.html
new file mode 100644
index 0000000000..c535ea756b
--- /dev/null
+++ b/dom/flex/test/chrome/test_flex_item_rect.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+f {
+  display: flex;
+  background-color: grey;
+  width: 400px;
+  height: 25px;
+  margin-bottom: 5px;
+}
+
+f > * {
+  width: 100px;
+  height: 10px;
+}
+
+b {
+  background-color: gold;
+}
+
+c {
+  background-color: yellow;
+}
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function testItemMatchesExpectedValues(item, values, index) {
+  is(item.frameRect.x, values.x,
+     "Item index " + index + " should have expected frameRect.x.");
+  is(item.frameRect.y, values.y,
+     "Item index " + index + " should have expected frameRect.y.");
+  if (typeof(values.width) != "undefined") {
+    is(item.frameRect.width, values.width,
+       "Item index " + index + " should have expected frameRect.width.");
+  }
+  is(item.frameRect.height, values.height,
+     "Item index " + index + " should have expected frameRect.height.");
+}
+
+function runTests() {
+  /**
+   * The expectedValues array contains one rect for each flex container child of
+   * of the body. The values in this object are compared against the returned flex
+   * API values of the LAST flex item in the first line of the corresponding flex
+   * container.
+   **/
+  const expectedValues = [
+    { x: 0, y: 0, width: 100, height: 10 },
+    { x: 0, y: 0, width: undefined /* not tested */, height: 25 /* stretched to container */ },
+    { x: 0, y: 0, width: 100, height: 10 },
+    { x: 0, y: 0, width: 100, height: 10 },
+    { x: 100, y: 0, width: 100, height: 10 },
+    { x: 10, y: 10, width: 100, height: 10 },
+    { x: 10, y: 10, width: 100, height: 10 },
+    { x: 0, y: 0, width: 200, height: 20 },
+    { x: 0, y: 0, width: 400, height: 25 },
+    { x: 0, y: 0, width: 100, height: 10 },
+    { x: 0, y: 0, width: 100, height: 10 },
+  ];
+
+  let children = document.body.children;
+  is(children.length, expectedValues.length, "Document should have expected number of flex containers.");
+
+  for (let i = 0; i < children.length; ++i) {
+    const flex = children.item(i).getAsFlexContainer();
+    ok(flex, "Document child index " + i + " should be a flex container.");
+    if (flex) {
+      const values = expectedValues[i];
+      const firstLine = flex.getLines()[0];
+      const items = firstLine.getItems();
+      const lastItem = items[items.length - 1];
+      testItemMatchesExpectedValues(lastItem, values, i);
+    }
+  }
+
+  SimpleTest.finish();
+}
+</script>
+</head>
+
+<body onLoad="runTests();">
+  <!-- a single item -->
+  <f><b></b></f>
+
+  <!-- an anonymous box item around a text node -->
+  <f style="font-size: 10px">anonymous</f>
+
+  <!-- a table item -->
+  <f><table></table></f>
+
+  <!-- a display:table-cell item -->
+  <f><b style="display: table-cell"></b></f>
+
+  <!-- an item after a fixed size item -->
+  <f><b></b><c></c></f>
+
+  <!-- a relatively-positioned item -->
+  <f><b style="position: relative; top: 10px; left: 10px"></b></f>
+
+  <!-- a margin-adjusted item -->
+  <f><b style="margin-top: 10px; margin-left: 10px"></b></f>
+
+  <!-- an item sized with inline styles -->
+  <f><b style="width: 200px; height: 20px"></b></f>
+
+  <!-- an item that is flexed/stretched, in both axes -->
+  <f style="align-items: stretch"><b style="flex-grow: 1; height: auto"></b></f>
+
+  <!-- These stylings should have no effect on the frameRect. -->
+  <!-- a transform:scale item -->
+  <f><b style="transform: scale(2.0)"></b></f>
+
+  <!-- a transform:translate item -->
+  <f><b style="transform: translate(10px, 10px)"></b></f>
+</body>
+</html>