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 503326 fc6057313da6c8c9f87ed4eb2e86c96f21d18657
parent 503325 04f110532f4974387e48a3272fe219188299b205
child 503327 85963f594697920ec6503c63deb45eb41e2b5ec0
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [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>