Bug 1506687 Part 2: Add a test of FlexItemValues frameRect property. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Sat, 17 Nov 2018 00:58:26 +0000
changeset 446890 fc6057313da6c8c9f87ed4eb2e86c96f21d18657
parent 446889 04f110532f4974387e48a3272fe219188299b205
child 446891 85963f594697920ec6503c63deb45eb41e2b5ec0
push id35052
push userapavel@mozilla.com
push dateSat, 17 Nov 2018 11:25:40 +0000
treeherdermozilla-central@efc1da42132b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1506687
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1506687 Part 2: Add a test of FlexItemValues frameRect property. r=dholbert Depends on D12182 Differential Revision: https://phabricator.services.mozilla.com/D12183
dom/flex/test/chrome.ini
dom/flex/test/chrome/test_flex_item_rect.html
--- a/dom/flex/test/chrome.ini
+++ b/dom/flex/test/chrome.ini
@@ -1,4 +1,5 @@
 [chrome/test_flex_axis_directions.html]
+[chrome/test_flex_item_clamp.html]
+[chrome/test_flex_item_rect.html]
 [chrome/test_flex_items.html]
-[chrome/test_flex_item_clamp.html]
 [chrome/test_flex_lines.html]
new file mode 100644
--- /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 type="text/javascript" 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>