--- a/layout/style/test/test_flexbox_order.html
+++ b/layout/style/test/test_flexbox_order.html
@@ -57,17 +57,17 @@ https://bugzilla.mozilla.org/show_bug.cg
     <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
     <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
     <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
     <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
   </div>
 
   <div id="flexContainerParent">
     <!-- The flex container that we'll be testing
-         (its  parent is display:none initially) -->
+         (its parent is display:none initially) -->
     <div id="flexContainer">
       <div id="a"></div>
       <div id="b"></div>
       <div id="c"></div>
     </div>
   </div>
 
 </div>
@@ -83,23 +83,23 @@ https://bugzilla.mozilla.org/show_bug.cg
  * Note: The items in this testcase don't overlap, so this testcase does _not_
  * test paint ordering.  It only tests horizontal ordering in a flex container.
  */
 
 // DATA
 // ----
 
 // This will store snapshots of our reference divs
-var gRefSnapshots = {};
+let gRefSnapshots = {};
 
 // These are the sets of 'order' values that we'll test.
 // The first three values in each array are the 'order' values that we'll
 // assign to elements a, b, and c (respectively).  The final value in each
 // array is the ID of the expected reference rendering.
-var gOrderTestcases = [
+let gOrderTestcases = [
   // The 6 basic permutations:
   [ 1, 2, 3, "abc"],
   [ 1, 3, 2, "acb"],
   [ 2, 1, 3, "bac"],
   [ 2, 3, 1, "cab"],
   [ 3, 1, 2, "bca"],
   [ 3, 2, 1, "cba"],
 
@@ -122,65 +122,67 @@ var gOrderTestcases = [
   [ "3.0", "2.0", "1.0", "abc"],
   [ 3, "2.0", 1, "bca"],
 ];
 
 // FUNCTIONS
 // ---------
 
 function initRefSnapshots() {
-  var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
-  refIds.forEach(function(aRefId) {
-    var elem = document.getElementById(aRefId);
+  let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
+  for (let id of refIds) {
+    let elem = document.getElementById(id);
     elem.style.display = "block";
-    gRefSnapshots[aRefId] = snapshotWindow(window, false);
+    gRefSnapshots[id] = snapshotWindow(window, false);
     elem.style.display = "";
-  });
+  }
 }
 
 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
-  var compareResult = compareSnapshots(aSnap1, aSnap2, true);
-  ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
+  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
+  ok(compareResult[0],
+     "flex container rendering should match expected (" + aMsg +")");
   if (!compareResult[0]) {
     todo(false, "TESTCASE: " + compareResult[1]);
     todo(false, "REFERENCE: "+ compareResult[2]);
   }
 }
 
 function runOrderTestcase(aOrderTestcase) {
   // Sanity-check
   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
 
   document.getElementById("a").style.order = aOrderTestcase[0];
   document.getElementById("b").style.order = aOrderTestcase[1];
   document.getElementById("c").style.order = aOrderTestcase[2];
 
-  var snapshot = snapshotWindow(window, false);
+  let snapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                             aOrderTestcase);
 
   // Clean up
-  document.getElementById("a").style.order = "";
-  document.getElementById("b").style.order = "";
-  document.getElementById("c").style.order = "";
+  for (let id of ["a", "b", "c"]) {
+    document.getElementById(id).style.order = "";
+  }
 }
 
 // Main Function
 function main() {
   initRefSnapshots();
 
   // un-hide the flex container's parent
-  var flexContainerParent = document.getElementById("flexContainerParent");
+  let flexContainerParent = document.getElementById("flexContainerParent");
   flexContainerParent.style.display = "block";
 
   // Initial sanity-check: should be in expected document order
-  var initialSnapshot = snapshotWindow(window, false);
+  let initialSnapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
-                            "initial flex container rendering, no 'order' value yet");
+                            "initial flex container rendering, " +
+                            "no 'order' value yet");
 
   // OK, now we run our tests
   gOrderTestcases.forEach(runOrderTestcase);
 
   // Re-hide the flex container at the end
   flexContainerParent.style.display = "";
 }
 

--- a/layout/style/test/test_flexbox_order_table.html
+++ b/layout/style/test/test_flexbox_order_table.html
@@ -61,17 +61,17 @@ https://bugzilla.mozilla.org/show_bug.cg
     <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
     <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
     <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
     <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
   </div>
 
   <div id="flexContainerParent">
     <!-- The flex container that we'll be testing
-         (its  parent is display:none initially) -->
+         (its parent is display:none initially) -->
     <div id="flexContainer">
       <div id="a"></div>
       <div id="b"></div>
       <div id="c"></div>
     </div>
   </div>
 
 </div>
@@ -87,23 +87,23 @@ https://bugzilla.mozilla.org/show_bug.cg
  * Note: The items in this testcase don't overlap, so this testcase does _not_
  * test paint ordering.  It only tests horizontal ordering in a flex container.
  */
 
 // DATA
 // ----
 
 // This will store snapshots of our reference divs
-var gRefSnapshots = {};
+let gRefSnapshots = {};
 
 // These are the sets of 'order' values that we'll test.
 // The first three values in each array are the 'order' values that we'll
 // assign to elements a, b, and c (respectively).  The final value in each
 // array is the ID of the expected reference rendering.
-var gOrderTestcases = [
+let gOrderTestcases = [
   // The 6 basic permutations:
   [ 1, 2, 3, "abc"],
   [ 1, 3, 2, "acb"],
   [ 2, 1, 3, "bac"],
   [ 2, 3, 1, "cab"],
   [ 3, 1, 2, "bca"],
   [ 3, 2, 1, "cba"],
 
@@ -126,65 +126,67 @@ var gOrderTestcases = [
   [ "3.0", "2.0", "1.0", "abc"],
   [ 3, "2.0", 1, "bca"],
 ];
 
 // FUNCTIONS
 // ---------
 
 function initRefSnapshots() {
-  var refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
-  refIds.forEach(function(aRefId) {
-    var elem = document.getElementById(aRefId);
+  let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
+  for (let id of refIds) {
+    let elem = document.getElementById(id);
     elem.style.display = "block";
-    gRefSnapshots[aRefId] = snapshotWindow(window, false);
+    gRefSnapshots[id] = snapshotWindow(window, false);
     elem.style.display = "";
-  });
+  }
 }
 
 function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
-  var compareResult = compareSnapshots(aSnap1, aSnap2, true);
-  ok(compareResult[0], "flex container rendering should match expected (" + aMsg +")");
+  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
+  ok(compareResult[0],
+     "flex container rendering should match expected (" + aMsg +")");
   if (!compareResult[0]) {
     todo(false, "TESTCASE: " + compareResult[1]);
     todo(false, "REFERENCE: "+ compareResult[2]);
   }
 }
 
 function runOrderTestcase(aOrderTestcase) {
   // Sanity-check
   ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
   is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
 
   document.getElementById("a").style.order = aOrderTestcase[0];
   document.getElementById("b").style.order = aOrderTestcase[1];
   document.getElementById("c").style.order = aOrderTestcase[2];
 
-  var snapshot = snapshotWindow(window, false);
+  let snapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
                             aOrderTestcase);
 
   // Clean up
-  document.getElementById("a").style.order = "";
-  document.getElementById("b").style.order = "";
-  document.getElementById("c").style.order = "";
+  for (let id of ["a", "b", "c"]) {
+    document.getElementById(id).style.order = "";
+  }
 }
 
 // Main Function
 function main() {
   initRefSnapshots();
 
   // un-hide the flex container's parent
-  var flexContainerParent = document.getElementById("flexContainerParent");
+  let flexContainerParent = document.getElementById("flexContainerParent");
   flexContainerParent.style.display = "block";
 
   // Initial sanity-check: should be in expected document order
-  var initialSnapshot = snapshotWindow(window, false);
+  let initialSnapshot = snapshotWindow(window, false);
   complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots["abc"],
-                            "initial flex container rendering, no 'order' value yet");
+                            "initial flex container rendering, " +
+                            "no 'order' value yet");
 
   // OK, now we run our tests
   gOrderTestcases.forEach(runOrderTestcase);
 
   // Re-hide the flex container at the end
   flexContainerParent.style.display = "";
 }