Bug 1499569: Rewrite test_flex_items.html to be simpler & easier to extend. r=bradwerth
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 17 Oct 2018 21:42:54 +0000
changeset 490198 f6642653fb17ce9626fdc8afdba6208fcbe0e7fb
parent 490197 7ec4fa5ecac1ce50e8397ff76f64a604ebd6bdaa
child 490199 db122d6af0fa9a7db04d13c7a888f3b38f1eb1f9
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersbradwerth
bugs1499569
milestone64.0a1
Bug 1499569: Rewrite test_flex_items.html to be simpler & easier to extend. r=bradwerth Primary changes: - Rewrap some lines that are too long. - Adjust some failure-messages with s/has/should have/ etc. - Replace 'nearlyEqual' function with the standard mochitest 'isfuzzy()' API (which is like 'is()' with an extra epsilon arg) - Remove dependence on hardcoded element IDs, and simply walk over the flex container's children in order instead (still noting each child node and making sure it matches the node in the flex API). Differential Revision: https://phabricator.services.mozilla.com/D8933
dom/flex/test/chrome/test_flex_items.html
--- a/dom/flex/test/chrome/test_flex_items.html
+++ b/dom/flex/test/chrome/test_flex_items.html
@@ -27,18 +27,16 @@
 
   .crossMinMax { min-height: 40px;
                  max-height: 120px; }
 
   .mainMinMax  { min-width: 120px;
                  max-width: 500px; }
 
   .flexGrow    { flex-grow: 1; }
-
-  #second	     { width: 100px; }
 </style>
 
 <script>
 "use strict";
 
 SimpleTest.waitForExplicitFinish();
 
 const TEXT_NODE = Node.TEXT_NODE;
@@ -82,96 +80,103 @@ function testItemMatchesExpectedValues(i
     is(item.crossMaxSize, values.crossMaxSize, "Item index " + index + " has expected crossMaxSize.");
   } else {
     // As above for mainMaxSize, no-expected-value implies we expect +infinity.
     is(item.crossMaxSize, Number.POSITIVE_INFINITY,
        "Item index " + index + " has expected (default) crossMaxSize.");
   }
 }
 
-function nearlyEqual(a, b) {
-  const ep = 1e-4;
-  let diff = a - b;
-  return (diff < ep && diff > -ep);
-}
-
 function runTests() {
   let container = document.getElementById("wrapper");
   let flex = container.getAsFlexContainer();
   let lines = flex.getLines();
-  is(lines.length, 1, "Container has expected number of lines.");
+  is(lines.length, 1, "Container should have expected number of lines.");
 
   let line = lines[0];
   let containerHeight = container.getBoundingClientRect().height;
-  is(line.crossSize, containerHeight, "Line crossSize equals the height of the container.");
+  is(line.crossSize, containerHeight,
+     "Line crossSize should equal the height of the container.");
 
-  let first = document.getElementById("first");
-  let second = document.getElementById("second");
-  let third = document.getElementById("third");
-  let fourth = document.getElementById("fourth");
-  let fifth = document.getElementById("fifth");
-  let sixth = container.lastChild;
-  is(sixth.nodeType, TEXT_NODE, "Sixth child should be an anonymous text node.");
-
-  // We can't compare baselines precisely, so we'll just confirm that they appear
-  // somewhere within the elements that determine them.
-  let firstRect = first.getBoundingClientRect();
+  // We can't compare baselines precisely, so we'll just confirm that they
+  // appear somewhere within the elements that determine them.
+  // (This assumes the first rect is baseline-aligned.)
+  let firstRect = container.firstElementChild.getBoundingClientRect();
   ok(line.firstBaselineOffset > firstRect.top &&
      line.firstBaselineOffset < firstRect.bottom,
-     "Line firstBaselineOffset lands somewhere within the element that determines it.");
+     "Line firstBaselineOffset should land somewhere within the element " +
+     "that determines it.");
 
-  // For last baseline, it's measured from the bottom, so we have to compare against
-  // the element bounds subtracted from the container height.
-  let secondRect = second.getBoundingClientRect();
-  ok(line.lastBaselineOffset > containerHeight - secondRect.bottom &&
-     line.lastBaselineOffset < containerHeight - secondRect.top,
-     "Line lastBaselineOffset lands somewhere within the element that determines it.");
-
-  let items = line.getItems();
-  is(items.length, 6, "Line has expected number of items.");
+  // For last baseline, it's measured from the bottom, so we have to compare
+  // against the element bounds subtracted from the container height.
+  // We use the first node which uses last-baseline ("lb") alignment to
+  // provide the rect:
+  let lbElem = document.querySelector(".lastbase");
+  let lbElemBoundingRect = lbElem.getBoundingClientRect();
+  ok(line.lastBaselineOffset > containerHeight - lbElemBoundingRect.bottom &&
+     line.lastBaselineOffset < containerHeight - lbElemBoundingRect.top,
+     "Line lastBaselineOffset should land somewhere within the element" +
+     "that determines it.");
 
   let expectedValues = [
-    { node: first,
-      crossMinSize: 0 },
-    { node: second,
-      mainBaseSize: secondRect.width,
+    { crossMinSize: 0 },
+    { mainBaseSize: lbElemBoundingRect.width,
       mainDeltaSize: 0 },
-    { node: third,
-      crossMinSize: 40,
+    { crossMinSize: 40,
       crossMaxSize: 120,
       mainDeltaSize: 0 },
-    { node: fourth,
-      mainMinSize: 120,
+    { mainMinSize: 120,
       mainMaxSize: 500,
       mainDeltaSize: 0 },
-    { node: fifth,
-      mainDeltaSize: 0 },
-    { node: sixth },
+    { mainDeltaSize: 0 },
+    { /* final item is anonymous flex item */ },
   ];
 
+  let items = line.getItems();
+  is(items.length, expectedValues.length,
+     "Line should have expected number of items.");
+  is(items.length, container.children.length + 1,
+     "Line should have as many items as the flex container has child elems, " +
+     "plus 1 for anonymous flex item");
+
   for (let i = 0; i < items.length; ++i) {
     let item = items[i];
     let values = expectedValues[i];
+    // set the expected node to the node we're currently iterating over,
+    // except for:
+    // - the display:contents element (whose item is its first child)
+    // - the final item (which is an anonymous flex item around text)
+    if (i < container.children.length) {
+      let curElem = container.children[i];
+      values.node = (curElem.style.display == "contents"
+                     ? curElem.firstElementChild
+                     : curElem);
+    } else {
+      is(container.lastChild.nodeType, TEXT_NODE,
+         "container's last child should be a text node");
+      values.node = container.lastChild;
+    }
     testItemMatchesExpectedValues(item, values, i);
   }
 
-  // Check that the delta size of the first item is nearly equal to the actual size minus the base size.
-  ok(nearlyEqual(items[0].mainDeltaSize, firstRect.width - items[0].mainBaseSize),
-     "flex-grow item has expected mainDeltaSize.");
+  // Check that the delta size of the first item is (roughly) equal to the
+  // actual size minus the base size.
+  isfuzzy(items[0].mainDeltaSize, firstRect.width - items[0].mainBaseSize, 1e-4,
+          "flex-grow item should have expected mainDeltaSize.");
 
   SimpleTest.finish();
 }
 </script>
 </head>
 
 <body onLoad="runTests();">
   <div id="wrapper" class="container">
-    <div id="first" class="lime base flexGrow">one line (first)</div>
-    <div id="second" class="yellow lastbase">one line (last)</div>
-    <div id="third" class="orange offset lastbase crossMinMax">two<br/>lines and offset (last)</div>
-    <div id="fourth" class="pink offset base mainMinMax">offset (first)</div>
+    <div class="lime base flexGrow">one line (first)</div>
+    <div class="yellow lastbase" style="width: 100px">one line (last)</div>
+    <div class="orange offset lastbase crossMinMax">two<br/>lines and offset (last)</div>
+    <div class="pink offset base mainMinMax">offset (first)</div>
     <div style="display:contents">
-      <div id="fifth" class="white">replaced</div>
+      <div class="white">replaced</div>
     </div>
     anonymous text node
   </div>
 </body>
 </html>