Bug 1499569: Rewrite test_flex_items.html to be simpler & easier to extend. r=bradwerth
☠☠ backed out by 99c45aca2d8a ☠ ☠
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 17 Oct 2018 03:14:10 +0000
changeset 500039 daf3e491e6fff54278e1564b7b7c25f115076e1c
parent 500038 7b427b1667424b7d673dafc10629590a840ea688
child 500040 59befcc4a2d6886d0d642710dd4b0ebc25a62082
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbradwerth
bugs1499569
milestone64.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 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
@@ -82,96 +82,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 nearly 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">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>