Bug 1652228: In test_flexbox_reflow_counts.html, don't bother pruning (nonexistent) children from 'content' node, and use consistent vars. r=TYLin

Before this patch, the test tries to remove all children from the 'content'
node except for one, as part of cleaning up. This is unnecessary, because none
of the subtests ever add any additional children to the 'content' element.
(It's also problematic because in late beta & release, 'content' is a special
variable name by default.)

While we're at it, this patch also makes us address the other nodes more
consistently, using the explicit variable declarations at the top of the
script section rather than their implicit ID-granted variable names.

Differential Revision: https://phabricator.services.mozilla.com/D83251

layout/style/test/test_flexbox_reflow_counts.html

@@ -91,14 +91,14 @@ function addNChildren(parent, childCount)
   }
 }
 
-// Remove contents of inner block, and remove manual styling:
+// Undoes whatever styling customizations and DOM insertions that a given
+// testcase has done, to prepare for running the next testcase.
 function cleanup()
 {
-  outerFlex.style = midFlex.style = innerBlock.style = "";
+  gOuterFlex.style = gMidFlex.style = gInnerBlock.style = "";
-  removeChildrenExcept(innerBlock);
+  removeChildrenExcept(gInnerBlock);
-  removeChildrenExcept(midFlex, innerBlock);
+  removeChildrenExcept(gMidFlex, gInnerBlock);
-  removeChildrenExcept(outerFlex, midFlex);
+  removeChildrenExcept(gOuterFlex, gMidFlex);
-  removeChildrenExcept(content, outerFlex);
 }
 
 // Each testcase here has a label (used in test output), a function to set up
@@ -107,19 +107,19 @@ let gTestcases = [
  {
     label : "border on flex items",
     addTestStyle : function() {
-      midFlex.style.border = innerBlock.style.border = "3px solid black";
+      gMidFlex.style.border = gInnerBlock.style.border = "3px solid black";
     },
  },
  {
     label : "padding on flex items",
     addTestStyle : function() {
-      midFlex.style.padding = innerBlock.style.padding = "5px";
+      gMidFlex.style.padding = gInnerBlock.style.padding = "5px";
     },
  },
  {
     label : "margin on flex items",
     addTestStyle : function() {
-      midFlex.style.margin = innerBlock.style.margin = "2px";
+      gMidFlex.style.margin = gInnerBlock.style.margin = "2px";
     },
  },
  {
@@ -130,10 +130,10 @@ let gTestcases = [
 
     // Compare 5 bonus flex items vs. 1 bonus flex item:
     addTestStyle : function() {
-      addNChildren(outerFlex, 5);
+      addNChildren(gOuterFlex, 5);
     },
     addReferenceStyle : function() {
-      addNChildren(outerFlex, 1);
+      addNChildren(gOuterFlex, 1);
     },
  },
  {
@@ -141,10 +141,10 @@ let gTestcases = [
     // on the nested flex container rather than the outer one)
     label : "additional flex items in nested flex container",
     addTestStyle : function() {
-      addNChildren(midFlex, 5);
+      addNChildren(gMidFlex, 5);
     },
     addReferenceStyle : function() {
-      addNChildren(midFlex, 1);
+      addNChildren(gMidFlex, 1);
     },
  },
 ];