Bug 1554224 - Enable some ESLint rules for more of layout/. r=dholbert
authorMark Banner <standard8@mozilla.com>
Wed, 29 May 2019 10:50:49 +0000
changeset 538874 9dcf4317c50c7efde43107afbcdd93dd85cea14f
parent 538873 10822a2ce5ae48fcc5a994de3e8df5888e41d29a
child 538875 03dde2acc06fba16a488031a9646a02d3f7e8b1f
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1554224
milestone69.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 1554224 - Enable some ESLint rules for more of layout/. r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D32496
.eslintignore
.eslintrc.js
layout/base/tests/transformed_scrolling_repaints_3_window.html
layout/forms/test/test_bug536567_perwindowpb.html
layout/forms/test/test_bug903715.html
layout/generic/test/plugin_clipping_lib.js
layout/generic/test/test_bug1499961.html
layout/generic/test/test_bug507902.html
layout/style/test/test_acid3_test46.html
layout/style/test/test_align_justify_computed_values.html
layout/style/test/test_animations_event_order.html
layout/style/test/test_animations_omta_start.html
layout/style/test/test_bug73586.html
layout/style/test/test_bug98997.html
layout/style/test/test_font_loading_api.html
layout/style/test/test_inherit_storage.html
layout/style/test/test_initial_storage.html
layout/style/test/test_media_queries.html
layout/style/test/test_media_query_list.html
layout/style/test/test_namespace_rule.html
layout/style/test/test_of_type_selectors.xhtml
layout/style/test/test_parse_rule.html
layout/style/test/test_rules_out_of_sheets.html
layout/style/test/test_selectors.html
layout/style/test/test_supports_rules.html
layout/style/test/test_transitions.html
layout/style/test/test_transitions_per_property.html
layout/style/test/test_value_cloning.html
layout/style/test/test_value_storage.html
layout/xul/test/browser_bug706743.js
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,21 +6,16 @@
 **/crashtests/**
 # Also ignore reftest - specially crafted to produce expected output.
 **/reftest/**
 **/reftests/**
 
 # Exclude expected objdirs.
 obj*/**
 
-# We ignore all these directories by default, until we get them enabled.
-# If you are enabling a directory, please add directory specific exclusions
-# below.
-layout/**
-
 # We currently have no js files in these directories, so we ignore them by
 # default to aid ESLint's performance.
 build/**
 config/**
 db/**
 embedding/**
 gradle/**
 hal/**
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -254,10 +254,88 @@ module.exports = {
       "rest-spread-spacing": "off",
       "semi": "off",
       "space-before-blocks": "off",
       "space-before-function-paren": "off",
       "space-infix-ops": "off",
       "space-unary-ops": "off",
       "spaced-comment": "off",
     }
+  }, {
+    "files": [
+      "layout/**",
+    ],
+    "rules": {
+      "object-shorthand": "off",
+      "mozilla/avoid-removeChild": "off",
+      "mozilla/consistent-if-bracing": "off",
+      "mozilla/reject-importGlobalProperties": "off",
+      "mozilla/no-arbitrary-setTimeout": "off",
+      "mozilla/no-define-cc-etc": "off",
+      "mozilla/no-useless-parameters": "off",
+      "mozilla/no-useless-run-test": "off",
+      "mozilla/use-chromeutils-generateqi": "off",
+      "mozilla/use-chromeutils-import": "off",
+      "mozilla/use-default-preference-values": "off",
+      "mozilla/use-includes-instead-of-indexOf": "off",
+      "mozilla/use-services": "off",
+      "mozilla/use-ownerGlobal": "off",
+      "complexity": "off",
+      "consistent-return": "off",
+      "dot-notation": "off",
+      "no-array-constructor": "off",
+      "no-caller": "off",
+      "no-cond-assign": "off",
+      "no-extra-boolean-cast": "off",
+      "no-eval": "off",
+      "no-else-return": "off",
+      "no-func-assign": "off",
+      "no-global-assign": "off",
+      "no-implied-eval": "off",
+      "no-lonely-if": "off",
+      "no-nested-ternary": "off",
+      "no-new-wrappers": "off",
+      "no-redeclare": "off",
+      "no-restricted-globals": "off",
+      "no-return-await": "off",
+      "no-sequences": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-undef": "off",
+      "no-unreachable": "off",
+      "no-unsanitized/method": "off",
+      "no-unsanitized/property": "off",
+      "no-unsafe-negation": "off",
+      "no-unused-vars": "off",
+      "no-useless-return": "off",
+
+      // Not enabling the rules below for now pending prettier roll-out.
+      "arrow-spacing": "off",
+      "block-spacing": "off",
+      "brace-style": "off",
+      "comma-dangle": "off",
+      "comma-spacing": "off",
+      "comma-style": "off",
+      "eol-last": "off",
+      "func-call-spacing": "off",
+      "generator-star-spacing": "off",
+      "linebreak-style": "off",
+      "key-spacing": "off",
+      "keyword-spacing": "off",
+      "no-extra-semi": "off",
+      "no-tabs": "off",
+      "no-mixed-spaces-and-tabs": "off",
+      "no-multi-spaces": "off",
+      "no-trailing-spaces": "off",
+      "no-unexpected-multiline": "off",
+      "no-whitespace-before-property": "off",
+      "padded-blocks": "off",
+      "quotes": "off",
+      "rest-spread-spacing": "off",
+      "semi": "off",
+      "space-before-blocks": "off",
+      "space-before-function-paren": "off",
+      "space-infix-ops": "off",
+      "space-unary-ops": "off",
+      "spaced-comment": "off",
+    }
   }]
 };
--- a/layout/base/tests/transformed_scrolling_repaints_3_window.html
+++ b/layout/base/tests/transformed_scrolling_repaints_3_window.html
@@ -9,17 +9,16 @@
 <iframe id="t" style="-moz-transform: scale(0.48979); -moz-transform-origin:top left; width:500px; height:600px;"
         src="transformed_scrolling_repaints_3_window_frame.html">
 </iframe>
 <pre id="test">
 <script type="application/javascript">
 var SimpleTest = window.opener.SimpleTest;
 var SpecialPowers = window.opener.SpecialPowers;
 var is = window.opener.is;
-var t, e, utils, iterations;
 var smoothScrollPref = "general.smoothScroll";
 
 function startTest() {
   SpecialPowers.pushPrefEnv({"set":[[smoothScrollPref, false]]}, runTest);
 }
 
 async function runTest() {
   let t = document.getElementById("t");
--- a/layout/forms/test/test_bug536567_perwindowpb.html
+++ b/layout/forms/test/test_bug536567_perwindowpb.html
@@ -25,22 +25,22 @@ MockFilePicker.init(window);
 
 var tmpDir = Services.dirsvc.get("TmpD", Ci.nsIFile);
 var homeDir = Services.dirsvc.get("Desk", Ci.nsIFile);
 
 function newDir() {
   var dir = tmpDir.clone();
   dir.append("testdir" + Math.floor(Math.random() * 10000));
   dir.QueryInterface(Ci.nsIFile);
-  dir.createUnique(Ci.nsIFile.DIRECTORY_TYPE, 0700);
+  dir.createUnique(Ci.nsIFile.DIRECTORY_TYPE, 0o700);
   return dir;
 }
 
 var dirs = [];
-for(var i = 0; i < 6; i++) {
+for(let i = 0; i < 6; i++) {
   dirs.push(newDir());
 }
 dirs.push(homeDir);
 var domains = ['http://mochi.test:8888', 'http://example.org:80', 'http://example.com:80'];
 /*
  * These tests take 3 args each:
  * - which domain to load
  * - the filePicker displayDirectory we expect to be set
@@ -114,17 +114,17 @@ function runTest() {
     var file = dirs[test[2]].clone();
     file.append("file.file");
     MockFilePicker.setFiles([file]);
     content.setAttribute('src', domains[test[0]] + '/chrome/layout/forms/test/bug536567_subframe.html');
   }
 }
 
 function endTest() {
-  for(var i = 0; i < dirs.length - 1; i++) {
+  for(let i = 0; i < dirs.length - 1; i++) {
     dirs[i].remove(true);
   }
 
   normalWindow.close();
   privateWindow.close();
   MockFilePicker.cleanup();
   SimpleTest.finish();
 }
@@ -163,17 +163,17 @@ function testOnWindow(aIsPrivate, aCallb
       });
     }, 0);
   });
 }
 
 MockFilePicker.showCallback = function(filepicker) {
   var test = tests[testIndex];
   var returned = -1;
-  for (var i = 0; i < dirs.length; i++) {
+  for (let i = 0; i < dirs.length; i++) {
      var dir = MockFilePicker.displayDirectory
                  ? MockFilePicker.displayDirectory
                  : Services.dirsvc.get(MockFilePicker.displaySpecialDirectory, Ci.nsIFile);
     if (dirs[i].path == dir.path) {
       returned = i;
       break;
     }
   }
--- a/layout/forms/test/test_bug903715.html
+++ b/layout/forms/test/test_bug903715.html
@@ -54,17 +54,17 @@ function runTests()
     input.select();
   });
 
   select.focus();
 
   select.addEventListener("popupshowing", function (aEvent) {
     setTimeout(function () {
       synthesizeKey("KEY_ArrowDown");
-      select.addEventListener("popuphiding", function (aEvent) {
+      select.addEventListener("popuphiding", function (aEventInner) {
         setTimeout(function () {
           // Enter key should cause closing the dropdown of the select element
           // and keypress event shouldn't be fired on the input element because
           // which shouldn't cause sumbmitting the form contents.
           ok(true, "Test passes if there is no error");
           SimpleTest.finish();
         }, 100);
       });
--- a/layout/generic/test/plugin_clipping_lib.js
+++ b/layout/generic/test/plugin_clipping_lib.js
@@ -109,27 +109,27 @@ function checkClipRegionWithDoc(doc, off
       p.getClipRegionRectEdge(i, 3) - pY
     ];
   }
 
   ok(equalRegions(clipRects, rects), "Matching regions for '" + id +
       "': expected " + dumpRegion(rects) + ", got " + dumpRegion(clipRects));
 }
 
-checkClipRegion = function checkClipRegion(id, rects) {
+checkClipRegion = function(id, rects) {
   checkClipRegionWithDoc(document, 0, 0, id, rects, true);
 }
 
-checkClipRegionForFrame = function checkClipRegionForFrame(fid, id, rects) {
+checkClipRegionForFrame = function(fid, id, rects) {
   var f = document.getElementById(fid);
   var bounds = f.getBoundingClientRect();
   checkClipRegionWithDoc(f.contentDocument, bounds.left, bounds.top, id, rects, true);
 }
 
-checkClipRegionNoBounds = function checkClipRegionNoBounds(id, rects) {
+checkClipRegionNoBounds = function(id, rects) {
   checkClipRegionWithDoc(document, 0, 0, id, rects, false);
 }
 
 function loaded() {
   var h1 = document.getElementById("h1");
   var h2 = document.getElementById("h2");
   var hwidth = h2.screenX - h1.screenX;
   if (hwidth != 100) {
--- a/layout/generic/test/test_bug1499961.html
+++ b/layout/generic/test/test_bug1499961.html
@@ -24,16 +24,17 @@ limitations under the License.
   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body onload="onLoad()">
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499961">Mozilla Bug 1499961</a>
 <p id="display"></p>
 <pre id="test">
 <script type="application/javascript">
+  /* eslint-disable no-shadow */
   var tests = [];
   var curDescribeMsg = '';
   var curItMsg = '';
 
   function beforeEach_fn() { };
   function afterEach_fn() { };
 
   function before(fn) {
--- a/layout/generic/test/test_bug507902.html
+++ b/layout/generic/test/test_bug507902.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=507902
 -->
 <head>
   <title>Test for Bug 507902</title>
-  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=507902">Mozilla Bug 507902</a>
 
 <iframe id="testFrameElem"></iframe>
 
 <pre id="test">
@@ -55,17 +55,17 @@ divContainer.appendChild(testImageElem);
 var pingImage = new Image();
 
 // Set up the canvases
 var canvases = {};
 var canvasNames = [ "brokenIconTest",  "brokenIconReference",
                     "loadingIconTest", "loadingIconReference",
                     "loadedTest",      "loadedReference" ];
 var windowElem = document.documentElement;
-for (var i in canvasNames) {
+for (let i in canvasNames) {
   var can = document.createElement("canvas");
   can.setAttribute("width", windowElem.getAttribute("width"));
   can.setAttribute("height", windowElem.getAttribute("height"));
   canvases[canvasNames[i]] = can;
 
   // When the image frame has no idea how to size itself, it sizes itself
   // to dimensions capable of displaying the alt feedback icons. However, if
   // the image has been loaded before, something (I don't know what) seems to
@@ -76,17 +76,17 @@ for (var i in canvasNames) {
   // icon for the test image will appear with a border that stretches further
   // right and down, because that URL previously displayed an image with larger
   // dimensions. This causes the verify stage to fail. To allow for
   // successful test refreshes (only useful for people, not automated tests),
   // we add a clipping region so that we see the left and top borders, along
   // with the image, but not the bottom and right borders.
 
   if ((i > 1) && (i < 4)) {
-    var ctx = can.getContext("2d");
+    let ctx = can.getContext("2d");
     ctx.beginPath();
     ctx.rect(0,0, 30, 30);
     ctx.clip();
    }
 
 }
 
 // Stage 1 - Load the reference image for the broken icon
@@ -322,17 +322,17 @@ function resetImage() {
   divContainer.appendChild(testImageElem);
 }
 
 //
 // Makes the canvases visible. Called before the tests finish. This is useful for
 // debugging.
 //
 function makeCanvasesVisible() {
-  for (var i = 0; i < canvasNames.length - 1; i += 2) {
+  for (let i = 0; i < canvasNames.length - 1; i += 2) {
     var title = document.createElement("h3");
     title.innerHTML = canvasNames[i] + ", " + canvasNames[i+1] + ":";
     document.body.appendChild(title);
     var myDiv = document.createElement("div");
     myDiv.appendChild(canvases[canvasNames[i]]);
     myDiv.appendChild(canvases[canvasNames[i+1]]);
     document.body.appendChild(myDiv);
   }
@@ -354,17 +354,17 @@ function disableBorderAndPad() {
 }
 
 //
 // Helper canvas methods. This is mostly copped directly from the reftest framework
 //
 
 function drawWindowToCanvas(canvasName) {
   var win = testFrameElem.contentWindow;
-  var ctx = canvases[canvasName].getContext("2d");
+  let ctx = canvases[canvasName].getContext("2d");
   // drawWindow always draws one canvas pixel for each CSS pixel in the source
   // window, so scale the drawing to show the zoom (making each canvas pixel be one
   // device pixel instead)
   ctx.drawWindow(win, win.scrollX, win.scrollY,
                  Math.ceil(canvases[canvasName].width),
                  Math.ceil(canvases[canvasName].height),
                  "rgb(255,255,255)");
 }
--- a/layout/style/test/test_acid3_test46.html
+++ b/layout/style/test/test_acid3_test46.html
@@ -18,17 +18,17 @@ extracted from the test framework there 
   <style type="text/css">
   iframe#selectors { width: 0; height: 0; }
   </style>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 156716 **/
 SimpleTest.waitForExplicitFinish();
 function runTest() {
 
@@ -73,24 +73,24 @@ function runTest() {
   style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches
   style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }'));
   style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }'));
   style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }'));
   style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches
   doc.getElementsByTagName('head')[0].appendChild(style);
   var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y1', 'y2', 'y3', 'y4'];
   for (var i in names) {
-	var p = doc.createElement('p');
+	let p = doc.createElement('p');
 	p.id = names[i];
 	doc.body.appendChild(p);
   }
   var count = 0;
   var check = function (c, e) {
 	count += 1;
-	var p = doc.getElementById(c);
+	let p = doc.getElementById(c);
 	is(doc.defaultView.getComputedStyle(p).textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")");
   }
   check('a', true); // 1
   check('b', false);
   check('c', true);
   check('d', false);
   check('e', false);
   check('f', false); // true in old spec; commented out in real Acid3
@@ -133,9 +133,8 @@ function runTest() {
 }
 </script>
 </pre>
 <p id="display">
   <iframe src="empty.html" id="selectors" onload="runTest()"></iframe>
 </p>
 </body>
 </html>
-
--- a/layout/style/test/test_align_justify_computed_values.html
+++ b/layout/style/test/test_align_justify_computed_values.html
@@ -22,17 +22,16 @@ https://bugzilla.mozilla.org/show_bug.cg
   <div id="gridContainer"><a></a><b></b></div>
   <div id="flexContainerGrid"><a style="diplay:grid"></a><b style="diplay:grid"></b></div>
   <div id="gridContainerFlex"><a style="diplay:flex"></a><b style="diplay:flex"></b></div>
 </div>
 <div id="absChild"></div>
 <pre id="test">
 <script type="application/javascript">
 "use strict";
-
 /*
  * Utility function for getting computed style of "align-self":
  */
 function getComputedAlignSelf(elem) {
   return window.getComputedStyle(elem).alignSelf;
 }
 function getComputedAlignItems(elem) {
   return window.getComputedStyle(elem).alignItems;
@@ -151,37 +150,37 @@ function main() {
 
   var body = document.getElementsByTagName("body")[0];
   is(body.parentNode, document.documentElement,
      "expecting body element's parent to be the root node");
 
   testGeneralNode(body);
   testNodeThatHasParent(body);
 
-  // 
+  //
   // align-items/self tests:
   //
   //// Block tests
-  var elem = document.body;
+  var element = document.body;
   var child = document.getElementById("display");
-  var abs = document.getElementById("absChild");
-  is(getComputedAlignItems(elem), 'normal', "default align-items value for block container");
+  var absChild = document.getElementById("absChild");
+  is(getComputedAlignItems(element), 'normal', "default align-items value for block container");
   is(getComputedAlignSelf(child), 'auto', "default align-self value for block child");
-  is(getComputedAlignSelf(abs), 'auto', "default align-self value for block container abs.pos. child");
-  elem.style.alignItems = "end";
+  is(getComputedAlignSelf(absChild), 'auto', "default align-self value for block container abs.pos. child");
+  element.style.alignItems = "end";
   is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
-  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
-  elem.style.alignItems = "left";
-  is(getComputedAlignItems(elem), 'end', "align-items:left is an invalid declaration");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
+  element.style.alignItems = "left";
+  is(getComputedAlignItems(element), 'end', "align-items:left is an invalid declaration");
   is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child");
-  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
-  elem.style.alignItems = "right";
-  is(getComputedAlignItems(elem), 'end', "align-items:right is an invalid declaration");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
+  element.style.alignItems = "right";
+  is(getComputedAlignItems(element), 'end', "align-items:right is an invalid declaration");
   is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
-  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
 
   //// Flexbox tests
   function testFlexAlignItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container");
     is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item");
     is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child");
@@ -222,42 +221,42 @@ function main() {
   }
   testGridAlignItemsSelf(document.getElementById("gridContainer"));
   testGridAlignItemsSelf(document.getElementById("gridContainerFlex"));
 
   //
   // justify-items/self tests:
   //
   //// Block tests
-  var elem = document.body;
-  var child = document.getElementById("display");
-  var abs = document.getElementById("absChild");
-  is(getComputedJustifyItems(elem), 'normal', "default justify-items value for block container");
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedJustifyItems(element), 'normal', "default justify-items value for block container");
   is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child");
-  is(getComputedJustifySelf(abs), 'auto', "default justify-self value for block container abs.pos. child");
-  elem.style.justifyItems = "end";
+  is(getComputedJustifySelf(absChild), 'auto', "default justify-self value for block container abs.pos. child");
+  element.style.justifyItems = "end";
   is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
-  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
-  elem.style.justifyItems = "left";
-  is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself on a block");
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "left";
+  is(getComputedJustifyItems(element), 'left', "justify-items:left computes to itself on a block");
   is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
-  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
-  elem.style.justifyItems = "right";
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "right";
   is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
-  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
-  elem.style.justifyItems = "safe right";
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "safe right";
   is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
-  elem.style.justifyItems = "";
+  element.style.justifyItems = "";
   child.style.justifySelf = "left";
   is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child");
   child.style.justifySelf = "right";
   is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child");
   child.style.justifySelf = "";
-  abs.style.justifySelf = "right";
-  is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on block container abs.pos. child");
+  absChild.style.justifySelf = "right";
+  is(getComputedJustifySelf(absChild), 'right', "justify-self:right computes to right on block container abs.pos. child");
 
   //// Flexbox tests
   function testFlexJustifyItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container");
     is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item");
     is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child");
@@ -319,36 +318,36 @@ function main() {
     is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on grid container abs.pos. child");
     abs.style.justifySelf = "";
     elem.style.justifyItems = "";
     item.style.justifySelf = "";
   }
   testGridJustifyItemsSelf(document.getElementById("gridContainer"));
   testGridJustifyItemsSelf(document.getElementById("gridContainerFlex"));
 
-  // 
+  //
   // align-content tests:
   //
   //// Block tests
-  var elem = document.body;
-  var child = document.getElementById("display");
-  var abs = document.getElementById("absChild");
-  is(getComputedAlignContent(elem), 'normal', "default align-content value for block container");
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedAlignContent(element), 'normal', "default align-content value for block container");
   is(getComputedAlignContent(child), 'normal', "default align-content value for block child");
-  is(getComputedAlignContent(abs), 'normal', "default align-content value for block container abs.pos. child");
-  elem.style.alignContent = "end";
+  is(getComputedAlignContent(absChild), 'normal', "default align-content value for block container abs.pos. child");
+  element.style.alignContent = "end";
   is(getComputedAlignContent(child), 'normal', "default align-content isn't affected by parent align-content value for in-flow child");
-  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
-  elem.style.alignContent = "left";
-  is(getComputedAlignContent(elem), 'end', "align-content:left isn't a valid declaration");
-  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
-  elem.style.alignContent = "right";
-  is(getComputedAlignContent(elem), 'end', "align-content:right isn't a valid declaration");
-  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
-  elem.style.alignContent = "";
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "left";
+  is(getComputedAlignContent(element), 'end', "align-content:left isn't a valid declaration");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "right";
+  is(getComputedAlignContent(element), 'end', "align-content:right isn't a valid declaration");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "";
 
   //// Flexbox tests
   function testFlexAlignContent(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedAlignContent(elem), 'normal', "default align-content value for flex container");
     is(getComputedAlignContent(item), 'normal', "default align-content value for flex item");
     is(getComputedAlignContent(abs), 'normal', "default align-content value for flex container abs.pos. child");
@@ -382,48 +381,48 @@ function main() {
     abs.style.alignContent = "";
     elem.style.alignContent = "";
     item.style.alignContent = "";
   }
   testGridAlignContent(document.getElementById("gridContainer"));
   testGridAlignContent(document.getElementById("gridContainerFlex"));
 
 
-  // 
+  //
   // justify-content tests:
   //
   //// Block tests
-  var elem = document.body;
-  var child = document.getElementById("display");
-  var abs = document.getElementById("absChild");
-  is(getComputedJustifyContent(elem), 'normal', "default justify-content value for block container");
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedJustifyContent(element), 'normal', "default justify-content value for block container");
   is(getComputedJustifyContent(child), 'normal', "default justify-content value for block child");
-  is(getComputedJustifyContent(abs), 'normal', "default justify-content value for block container abs.pos. child");
-  elem.style.justifyContent = "end";
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "end";
   is(getComputedJustifyContent(child), 'normal', "default justify-content isn't affected by parent justify-content value for in-flow child");
-  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
-  elem.style.justifyContent = "left";
-  is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on block child");
-  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
-  elem.style.justifyContent = "right";
-  is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on block child");
-  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
-  elem.style.justifyContent = "safe right";
-  is(getComputedJustifyContent(elem), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right'");
-  elem.style.justifyContent = "";
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "left";
+  is(getComputedJustifyContent(element), 'left', "justify-content:left computes to left on block child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "right";
+  is(getComputedJustifyContent(element), 'right', "justify-content:right computes to right on block child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "safe right";
+  is(getComputedJustifyContent(element), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right'");
+  element.style.justifyContent = "";
   child.style.justifyContent = "left";
   is(getComputedJustifyContent(child), 'left', "justify-content:left computes to left on block child");
   child.style.justifyContent = "right";
   is(getComputedJustifyContent(child), 'right', "justify-content:right computes to right on block child");
   child.style.justifyContent = "safe left";
   is(getComputedJustifyContent(child), 'safe left', "justify-content:safe left computes to 'safe left' on block child");
   child.style.justifyContent = "";
-  abs.style.justifyContent = "right";
-  is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on block container abs.pos. child");
-  abs.style.justifyContent = "";
+  absChild.style.justifyContent = "right";
+  is(getComputedJustifyContent(absChild), 'right', "justify-content:right computes to right on block container abs.pos. child");
+  absChild.style.justifyContent = "";
 
   //// Flexbox tests
   function testFlexJustifyContent(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedJustifyContent(elem), 'normal', "default justify-content value for flex container");
     is(getComputedJustifyContent(item), 'normal', "default justify-content value for flex item");
     is(getComputedJustifyContent(abs), 'normal', "default justify-content value for flex container abs.pos. child");
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -29,16 +29,18 @@ https://bugzilla.mozilla.org/show_bug.cg
 <a target="_blank"
   href="https://bugzilla.mozilla.org/show_bug.cgi?id=1183461">Mozilla Bug
   1183461</a>
 <div id="display"></div>
 <pre id="test">
 <script type="application/javascript">
 'use strict';
 
+/* eslint-disable no-shadow */
+
 // Take over the refresh driver right from the start.
 advance_clock(0);
 
 // Common test scaffolding
 
 var gEventsReceived = [];
 var gDisplay = document.getElementById('display');
 
--- a/layout/style/test/test_animations_omta_start.html
+++ b/layout/style/test/test_animations_omta_start.html
@@ -157,17 +157,17 @@ function testTransitionTakingOver() {
 
       // Trigger to start the transition, without this the transition will
       // be pending in advanceTimeAndRefresh(0) so the transition will not
       // be sent to the compositor until we call advanceTimeAndRefresh with
       // a positive time value.
       getComputedStyle(child).opacity;
       gUtils.advanceTimeAndRefresh(0);
       waitForAllPaints(function() {
-        var opacity = gUtils.getOMTAStyle(child, "opacity");
+        opacity = gUtils.getOMTAStyle(child, "opacity");
         is(opacity, "0.4",
            "transition that interrupted animation is correct");
         gUtils.advanceTimeAndRefresh(5000);
         waitForAllPaints(function() {
           opacity = gUtils.getOMTAStyle(child, "opacity");
           is(opacity, "0.7",
              "transition that interrupted animation is correct");
           is(childCS.opacity, "0.7",
--- a/layout/style/test/test_bug73586.html
+++ b/layout/style/test/test_bug73586.html
@@ -13,17 +13,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 
   </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=73586">Mozilla Bug 73586</a>
 <div id="display"></div>
 
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 73586 **/
 
 const GREEN = "rgb(0, 128, 0)";
 const LIME = "rgb(0, 255, 0)";
@@ -46,18 +46,16 @@ function check_children(p, check_cb) {
         child = p.childNodes[i];
         if (child.nodeType != Node.ELEMENT_NODE)
             continue;
         check_cb(child, elt, elts, i, len);
         ++elt;
     }
 }
 
-var display = document.getElementById("display");
-
 function run_series(check_cb) {
     var display = document.getElementById("display");
     // Use a new parent node every time since the optimizations cause
     // bits to be set (permanently) on the parent.
     var p = document.createElement("p");
     display.appendChild(p);
     p.innerHTML = "x<span></span><span></span>";
 
@@ -184,9 +182,8 @@ run_series(function(child, elt, elts, no
            "child " + node + " should " + (matches ? "" : "NOT ") +
            " match " + styleText.data);
     });
 
 </script>
 </pre>
 </body>
 </html>
-
--- a/layout/style/test/test_bug98997.html
+++ b/layout/style/test/test_bug98997.html
@@ -49,17 +49,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 <div class="test from makeemptytext" onclick="testChangeData(this, 'x')"><!-- comment --></div>
 <div class="test from makeemptytext" onclick="testAppendData(this, 'x')"></div>
 <div class="test from makeemptytext" onclick="testAppendData(this, 'x')"><!-- comment --></div>
 <div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"></div>
 <div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"><!-- comment --></div>
 </div>
 
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 98997 **/
 
 function testInsertBefore(elt, text) {
   elt.insertBefore(document.createTextNode(text), elt.firstChild);
@@ -97,17 +97,17 @@ var cnodes = document.getElementById("di
 var divs = [];
 var i;
 for (i = 0; i < cnodes.length; ++i) {
   if (cnodes[i].nodeName == "DIV")
     divs.push(cnodes[i]);
 }
 
 for (i in divs) {
-  var div = divs[i];
+  let div = divs[i];
   if (div.className.match(/makeemptytext/))
     div.insertBefore(document.createTextNode(""), div.firstChild);
 }
 
 const ORANGE = "rgb(255, 165, 0)";
 const MAROON = "rgb(128, 0, 0)";
 const GREEN = "rgb(0, 128, 0)";
 const NAVY = "rgb(0, 0, 128)";
@@ -115,30 +115,30 @@ const NAVY = "rgb(0, 0, 128)";
 function color(div) {
   return getComputedStyle(div, "").color;
 }
 function bg(div) {
   return getComputedStyle(div, "").backgroundColor;
 }
 
 for (i in divs) {
-  var div = divs[i];
+  let div = divs[i];
   is(bg(div), ORANGE, "should be orange");
   is(color(div), MAROON, "should be maroon");
 }
 
 for (i in divs) {
-  var div = divs[i];
+  let div = divs[i];
   var e = document.createEvent("MouseEvents");
   e.initEvent("click", true, true);
   div.dispatchEvent(e);
 }
 
 for (i in divs) {
-  var div = divs[i];
+  let div = divs[i];
   is(bg(div), GREEN, "should be green");
   is(color(div), NAVY, "should be navy");
 }
 
 </script>
 </pre>
 </body>
 </html>
--- a/layout/style/test/test_font_loading_api.html
+++ b/layout/style/test/test_font_loading_api.html
@@ -123,17 +123,16 @@ function is_pending(aPromise, aDescripti
         ok(true, aDescription + " should be pending " + aTestID);
         aResolve();
       }
     });
   });
 }
 
 function fetchAsArrayBuffer(aURL) {
-  var xhr;
   return new Promise(function(aResolve, aReject) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", aURL);
     xhr.responseType = "arraybuffer";
     xhr.onreadystatechange = function(evt) {
       if (xhr.readyState == 4) {
         if (xhr.status >= 200 && xhr.status <= 299) {
           aResolve(xhr.response);
@@ -1813,32 +1812,31 @@ function runTest() {
 
     all = Array.from(vdocument.fonts);
     all[0]._description = "CSS-connected in vdocument";
     is(all.length, 1, "vdocument.fonts should contain one FontFace (TEST 48)");
 
     expected.vdocument.push(all[0]);
 
     // Create a FontFace in each window and add it to each document's FontFaceSet.
-    var i = 0;
     var faces = [];
-    sourceWindows.forEach(function({ win, what: whatWin }) {
-      var f = new win.FontFace("test" + ++i, "url(x)");
+    sourceWindows.forEach(function({ win, what: whatWin }, index) {
+      var f = new win.FontFace("test" + index, "url(x)");
       sourceDocuments.forEach(function({ doc, what: whatDoc }) {
         doc.fonts.add(f);
         expected[whatDoc].push(f);
         f._description = whatWin + "/" + whatDoc;
       });
     });
 
     sourceDocuments.forEach(function({ doc, what }) {
-      var all = Array.from(doc.fonts);
-      is(expected[what].length, all.length, "expected FontFaceSet size (TEST 48) (" + what + ")");
-      for (var i = 0; i < expected[what].length; i++) {
-        is(expected[what][i], all[i], "expected FontFace (" + expected[what][i]._description + ") at index " + i + " (TEST 48) (" + what + ")");
+      let allFonts = Array.from(doc.fonts);
+      is(expected[what].length, allFonts.length, "expected FontFaceSet size (TEST 48) (" + what + ")");
+      for (let i = 0; i < expected[what].length; i++) {
+        is(expected[what][i], allFonts[i], "expected FontFace (" + expected[what][i]._description + ") at index " + i + " (TEST 48) (" + what + ")");
       }
     });
 
     vstyle.textContent = "";
     style.textContent = "";
 
     sourceDocuments.forEach(function({ doc }) { doc.fonts.clear(); });
 
--- a/layout/style/test/test_inherit_storage.html
+++ b/layout/style/test/test_inherit_storage.html
@@ -82,21 +82,21 @@ function test_property(property)
          "consistency between decl.getPropertyValue('" + sproperty + "') and decl." + sinfo.domProp);
     }
     check_final(property);
     if ("subproperties" in info)
       for (var idx in info.subproperties)
         check_final(info.subproperties[idx]);
 
     // can all properties be removed from the style?
-    function test_remove_all_properties(property, value) {
+    function test_remove_all_properties(propName, value) {
       var i, p = [];
       for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
       for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
-      var errstr = "when setting property " + property + " to " + value;
+      var errstr = "when setting property " + propName + " to " + value;
       is(gDeclaration.length, 0, "unremovable properties " + errstr);
       is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
     }
 
     // sanity check shorthands to make sure disabled props aren't exposed
     if (info.type != CSS_TYPE_LONGHAND) {
       gDeclaration.setProperty(property, keyword, "");
       test_remove_all_properties(property, keyword);
--- a/layout/style/test/test_initial_storage.html
+++ b/layout/style/test/test_initial_storage.html
@@ -96,21 +96,21 @@ function test_property(property)
       check_consistency(sproperty, val, "final");
     }
     check_final(property);
     if ("subproperties" in info)
       for (var idx in info.subproperties)
         check_final(info.subproperties[idx]);
 
     // can all properties be removed from the style?
-    function test_remove_all_properties(property, value) {
+    function test_remove_all_properties(propName, value) {
       var i, p = [];
       for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
       for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
-      var errstr = "when setting property " + property + " to " + value;
+      var errstr = "when setting property " + propName + " to " + value;
       is(gDeclaration.length, 0, "unremovable properties " + errstr);
       is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
     }
 
     // sanity check shorthands to make sure disabled props aren't exposed
     if (info.type != CSS_TYPE_LONGHAND) {
       gDeclaration.setProperty(property, keyword, "");
       test_remove_all_properties(property, keyword);
--- a/layout/style/test/test_media_queries.html
+++ b/layout/style/test/test_media_queries.html
@@ -132,27 +132,27 @@ function run() {
     should_apply("(" + equal_name + ": " + real_dpr + ")");
     should_not_apply("(" + equal_name + ": " + high_dpr + ")");
     should_not_apply("(" + equal_name + ": " + low_dpr + ")");
     should_apply("(" + equal_name + ")");
     expression_should_not_be_parseable(min_name);
     expression_should_not_be_parseable(max_name);
   }
 
-  function test_serialization(q, test_application, should_apply) {
+  function test_serialization(q, test_application, expected_to_apply) {
     style.setAttribute("media", q);
     var ser1 = style.sheet.media.mediaText;
     isnot(ser1, "", "serialization of '" + q + "' should not be empty");
     style.setAttribute("media", ser1);
     var ser2 = style.sheet.media.mediaText;
     is(ser2, ser1, "parse+serialize of '" + q + "' should be idempotent");
     if (test_application) {
-      var applies = body_cs.getPropertyValue("text-decoration") == "underline";
-      is(applies, should_apply,
-         "Media query '" + q + "' should " + (should_apply ? "" : "NOT ") +
+      let applies = body_cs.getPropertyValue("text-decoration") == "underline";
+      is(applies, expected_to_apply,
+         "Media query '" + q + "' should " + (expected_to_apply ? "" : "NOT ") +
          "apply after serialize + reparse");
     }
 
     // Test cloning
     var sheet = "@media " + q + " { body { text-decoration: underline } }"
     var sheeturl = "data:text/css," + escape(sheet);
     var link = "<link rel='stylesheet' href='" + sheeturl + "'>";
     var htmldoc = "<!DOCTYPE HTML>" + link + link  + "<body>";
@@ -165,20 +165,20 @@ function run() {
       clonedsheet.insertRule("#nonexistent { color: purple}", 1);
       // remove the uncloned sheet
       links[0].remove();
 
       var ser3 = clonedsheet.cssRules[0].media.mediaText;
       is(ser3, ser1, "cloning query '" + q + "' should not change " +
                      "serialization");
       if (test_application) {
-        var applies = clonewin.getComputedStyle(clonedoc.body).
+        let applies = clonewin.getComputedStyle(clonedoc.body).
                         textDecoration == "underline";
-        is(applies, should_apply,
-           "Media query '" + q + "' should " + (should_apply ? "" : "NOT ") +
+        is(applies, expected_to_apply,
+           "Media query '" + q + "' should " + (should_apply1 ? "" : "NOT ") +
            "apply after cloning");
       }
     });
   }
 
   // The no-type syntax doesn't mix with the not and only keywords.
   query_should_be_parseable("(orientation)");
   query_should_be_parseable("not (orientation)");
@@ -922,10 +922,8 @@ function handle_iframe_onload(event)
   item.testfunc();
   handle_posted_items();
 }
 
 </script>
 </pre>
 </body>
 </html>
-
-
--- a/layout/style/test/test_media_query_list.html
+++ b/layout/style/test/test_media_query_list.html
@@ -261,30 +261,30 @@ function run() {
     is(received_mql[0], mql,
        "notification order (removal tests)");
     is(received_mql[1], mql,
        "notification order (removal tests)");
   })();
 
   /* Bug 753777: test that things work in a freshly-created iframe */
   (function() {
-    var iframe = document.createElement("iframe");
-    document.body.appendChild(iframe);
+    let newIframe = document.createElement("iframe");
+    document.body.appendChild(newIframe);
 
-    is(iframe.contentWindow.matchMedia("all").matches, true,
+    is(newIframe.contentWindow.matchMedia("all").matches, true,
        "matchMedia should work in newly-created iframe");
     // FIXME(emilio): All browsers fail this test right now. Probably should
     // pass, see https://github.com/w3c/csswg-drafts/issues/3101, bug 1458816,
     // and bug 1011468.
-    todo_is(iframe.contentWindow.matchMedia("(min-width: 1px)").matches, true,
+    todo_is(newIframe.contentWindow.matchMedia("(min-width: 1px)").matches, true,
             "(min-width: 1px) should match in newly-created iframe");
-    todo_is(iframe.contentWindow.matchMedia("(max-width: 1px)").matches, false,
+    todo_is(newIframe.contentWindow.matchMedia("(max-width: 1px)").matches, false,
             "(max-width: 1px) should not match in newly-created iframe");
 
-    document.body.removeChild(iframe);
+    document.body.removeChild(newIframe);
   })();
 
   /* Bug 716751: listeners lost due to GC */
   var gc_received = [];
   (function() {
     var received = [];
     var listener1 = function(event) {
       gc_received.push(1);
--- a/layout/style/test/test_namespace_rule.html
+++ b/layout/style/test/test_namespace_rule.html
@@ -8,34 +8,33 @@
 <body onload="run()">
 <p id="display"><iframe id="iframe" src="data:application/xhtml+xml,<html%20xmlns='http://www.w3.org/1999/xhtml'><head/><body/></html>"></iframe></p>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 SimpleTest.waitForExplicitFinish();
 
 var HTML_NS = "http://www.w3.org/1999/xhtml";
-var style_text;
 
 function run() {
     var wrappedFrame = SpecialPowers.wrap($("iframe"));
     var ifwin = wrappedFrame.contentWindow;
     var ifdoc = wrappedFrame.contentDocument;
     var ifbody = ifdoc.getElementsByTagName("body")[0];
 
     function setup_style_text() {
         var style_elem = ifdoc.createElement("style");
         style_elem.setAttribute("type", "text/css");
         ifdoc.getElementsByTagName("head")[0].appendChild(style_elem);
-        var style_text = ifdoc.createCDATASection("");
+        let style_text = ifdoc.createCDATASection("");
         style_elem.appendChild(style_text);
         return style_text;
     }
 
-    style_text = setup_style_text();
+    let style_text = setup_style_text();
     var gCounter = 0;
 
     /*
      * namespaceRules: the @namespace rules to use
      * selector: the selector to test
      * body_contents: what to set the body's innerHTML to
      * match_fn: a function that, given the document object into which
      *   body_contents has been inserted, produces an array of nodes that
@@ -220,17 +219,17 @@ function run() {
     // 1 test from http://tc.labs.opera.com/css/namespaces/syntax-002.xml
     test_selector_in_html(
       '@NAmespac\\65  x "http://www.w3.org/1999/xhtml";',
       'x|test',
       '<test/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
     );
-    
+
     // 3 tests from http://tc.labs.opera.com/css/namespaces/syntax-003.xml
     test_selector_in_html(
       '@namespace url("test");',
       '*|test',
       '<test xmlns="test"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
     );
@@ -318,89 +317,89 @@ function run() {
 
     // And now some :not() tests
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not(test)',
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not(test)',
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
       '*|*:not(x|test)',
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
       '*|*:not(x|test)',
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not(*)',
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not(*)',
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
       '*|*:not(x|*)',
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
       '*|*:not(x|*)',
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not([foo])',
       '<test xmlns="testing" foo="bar"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*:not([foo])',
       '<test xmlns="test" foo="bar"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
       '*|*[foo]',
       '<test foo="bar"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
     );
--- a/layout/style/test/test_of_type_selectors.xhtml
+++ b/layout/style/test/test_of_type_selectors.xhtml
@@ -39,29 +39,29 @@ function setup_style_text() {
 }
 
 function run() {
     var styleText = setup_style_text();
 
     var elements = [];
 
     var div = document.getElementById("content");
-    for (var i = 0; i < div.childNodes.length; ++i) {
+    for (let i = 0; i < div.childNodes.length; ++i) {
         var child = div.childNodes[i];
         if (child.nodeType == Node.ELEMENT_NODE)
             elements.push(child);
     }
 
     var counter = 0;
 
     function test_selector(selector, match_indices, notmatch_indices)
     {
         var zi = ++counter;
         styleText.data = selector + " { z-index: " + zi + " }";
-        var i;
+        let i;
         for (i in match_indices) {
             var e = elements[match_indices[i]];
             is(getComputedStyle(e, "").zIndex, String(zi),
                "element " + match_indices[i] + " matched " + selector);
         }
         for (i in notmatch_indices) {
             var e = elements[notmatch_indices[i]];
             is(getComputedStyle(e, "").zIndex, "auto",
@@ -90,9 +90,8 @@ function run() {
 
 run();
 
 ]]>
 </script>
 </pre>
 </body>
 </html>
-
--- a/layout/style/test/test_parse_rule.html
+++ b/layout/style/test/test_parse_rule.html
@@ -233,21 +233,21 @@ var doTests = function() {
     curSubTest = 0;
   }
   if (!(curTest < testset.length)) {
     SimpleTest.finish();
     return;
   }
   if (curSubTest == 0) {
     styleElement.textContent = "";
-    var base = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
+    let computedBase = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
     styleElement.textContent = testset[curTest].base;
     canonical = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
     styleElement.textContent = "";
-    isnot(base, canonical, "Sanity check for rule: " + testset[curTest].base);
+    isnot(computedBase, canonical, "Sanity check for rule: " + testset[curTest].base);
   }
   frame.contentDocument.open();
   frame.contentDocument.write("<html lang=en><style>" + testset[curTest].tests[curSubTest] + "</style><div id=a class='a b c' title='zxcv weeqweqeweasd&#13;&#10;a'></div>");
   frame.contentWindow.onload = function(){setTimeout(doTests, 0);};
   frame.contentDocument.close();
 };
 
 // Running a debug build on the Android emulator is slooow and collecting
--- a/layout/style/test/test_rules_out_of_sheets.html
+++ b/layout/style/test/test_rules_out_of_sheets.html
@@ -7,17 +7,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <title>Test for Bug 634373</title>
   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=634373">Mozilla Bug 634373</a>
 <p id="display"></p>
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for Bug 634373 **/
 
 function make_rule_and_remove_sheet(text, getter) {
   var style = document.createElement("style");
@@ -85,19 +85,19 @@ try {
 rule = make_rule_and_remove_sheet("@media screen { p { color: blue } }",
                                    get_only_child);
 rule.style.color = "";
 try {
   rule.style.color = "fuchsia";
 } catch(ex) {}
 
 rule = make_rule_and_remove_sheet("@media screen { p { color: blue } }",
-                                  function(rule) {
+                                  function(ruleInner) {
                                     return keep_rule_alive_by_matching(
-                                             get_only_child(rule));
+                                             get_only_child(ruleInner));
                                   });
 try {
   rule.style.color = "";
 } catch(ex) {}
 try {
   rule.style.color = "fuchsia";
 } catch(ex) {}
 
--- a/layout/style/test/test_selectors.html
+++ b/layout/style/test/test_selectors.html
@@ -70,42 +70,42 @@ function runTests() {
         }
 
         var should_match = match_fn(ifdoc);
         var should_not_match = notmatch_fn(ifdoc);
         if (should_match.length + should_not_match.length == 0) {
             ok(false, "nothing to check");
         }
 
-        for (var i = 0; i < should_match.length; ++i) {
-            var e = should_match[i];
+        for (let i = 0; i < should_match.length; ++i) {
+            let e = should_match[i];
             is(ifwin.getComputedStyle(e).zIndex, String(zi),
                "element in " + body_contents + " matched " + selector);
         }
-        for (var i = 0; i < should_not_match.length; ++i) {
-            var e = should_not_match[i];
+        for (let i = 0; i < should_not_match.length; ++i) {
+            let e = should_not_match[i];
             is(ifwin.getComputedStyle(e).zIndex, "auto",
                "element in " + body_contents + " did not match " + selector);
         }
 
         // Now, since we're here, may as well make sure serialization
         // works correctly.  It need not produce the exact same text,
         // but it should produce a selector that matches the same
         // elements.
         zi = ++gCounter;
         var ser1 = style_text.parentNode.sheet.cssRules[idx].selectorText;
         style_text.data = namespaces + ser1 + "{ z-index: " + zi + " }";
-        for (var i = 0; i < should_match.length; ++i) {
-            var e = should_match[i];
+        for (let i = 0; i < should_match.length; ++i) {
+            let e = should_match[i];
             is(ifwin.getComputedStyle(e).zIndex, String(zi),
                "element in " + body_contents + " matched " + ser1 +
                " which is the reserialization of " + selector);
         }
-        for (var i = 0; i < should_not_match.length; ++i) {
-            var e = should_not_match[i];
+        for (let i = 0; i < should_not_match.length; ++i) {
+            let e = should_not_match[i];
             is(ifwin.getComputedStyle(e).zIndex, "auto",
                "element in " + body_contents + " did not match " + ser1 +
                " which is the reserialization of " + selector);
         }
 
         // But when we serialize the serialized result, we should get
         // the same text.
         isnot(style_text.parentNode.sheet.cssRules[idx], undefined,
@@ -145,31 +145,31 @@ function runTests() {
             }
 
             var links = clonedoc.getElementsByTagName("link");
             // cause a clone
             links[1].sheet.insertRule("#nonexistent { color: purple}", idx + 1);
             // remove the uncloned sheet
             links[0].remove();
 
-            var should_match = match_fn(clonedoc);
-            var should_not_match = notmatch_fn(clonedoc);
+            var should_match1 = match_fn(clonedoc);
+            var should_not_match1 = notmatch_fn(clonedoc);
 
-            if (should_match.length + should_not_match.length == 0) {
+            if (should_match1.length + should_not_match1.length == 0) {
                 ok(false, "nothing to check");
             }
 
-            for (var i = 0; i < should_match.length; ++i) {
-                var e = should_match[i];
+            for (let i = 0; i < should_match1.length; ++i) {
+                let e = should_match1[i];
                 is(clonewin.getComputedStyle(e).zIndex, String(zi),
                    "element in " + body_contents + " matched clone of " +
                    selector);
             }
-            for (var i = 0; i < should_not_match.length; ++i) {
-                var e = should_not_match[i];
+            for (let i = 0; i < should_not_match1.length; ++i) {
+                let e = should_not_match1[i];
                 is(clonewin.getComputedStyle(e).zIndex, "auto",
                    "element in " + body_contents + " did not match clone of " +
                    selector);
             }
 
             var ser3 = links[0].sheet.cssRules[idx].selectorText;
             is(ser3, ser1,
                "selector " + selector + " serializes correctly after cloning");
--- a/layout/style/test/test_supports_rules.html
+++ b/layout/style/test/test_supports_rules.html
@@ -39,28 +39,28 @@ function runTest() {
   is(condition(sheet.cssRules[0].cssText), "(color: green)");
   is(condition(sheet.cssRules[1].cssText), "(color: green)");
   is(condition(sheet.cssRules[2].cssText), "((color: green))");
   is(condition(sheet.cssRules[3].cssText), "(color: green) and (color: blue)");
   is(condition(sheet.cssRules[4].cssText), "( Font:  20px serif ! Important)");
 
   var cs1 = getComputedStyle(document.getElementById("display1"), "");
   var cs2 = getComputedStyle(document.getElementById("display2"), "");
-  function check_balanced_condition(condition, expected_match) {
+  function check_balanced_condition(condition_inner, expected_match) {
     style.textContent = "#display1, #display2 { text-decoration: overline }\n" +
-                        "@supports " + condition + "{\n" +
+                        "@supports " + condition_inner + "{\n" +
                         "  #display1 { text-decoration: line-through }\n" +
                         "}\n" +
                         "#display2 { text-decoration: underline }\n";
     is(cs1.textDecoration,
        expected_match ? "line-through" : "overline",
-       "@supports condition \"" + condition + "\" should " +
+       "@supports condition \"" + condition_inner + "\" should " +
        (expected_match ? "" : "NOT ") + "match");
     is(cs2.textDecoration, "underline",
-       "@supports condition \"" + condition + "\" should be balanced");
+       "@supports condition \"" + condition_inner + "\" should be balanced");
   }
 
   check_balanced_condition("not (color: green)", false);
   check_balanced_condition("not (colour: green)", true);
   check_balanced_condition("not(color: green)", false);
   check_balanced_condition("not(colour: green)", false);
   check_balanced_condition("not/* */(color: green)", false);
   check_balanced_condition("not/* */(colour: green)", true);
--- a/layout/style/test/test_transitions.html
+++ b/layout/style/test/test_transitions.html
@@ -120,56 +120,56 @@ var div = document.getElementById("displ
 
 // Set up all the elements on which we are going to initiate transitions.
 
 // We have two reference elements to check the expected timing range.
 // They both have 16s linear transitions from 0 to 1000px.
 // This means they move through 62.5 pixels per second.
 const REF_PX_PER_SEC = 62.5;
 function make_reference_p() {
-    var p = document.createElement("p");
+    let p = document.createElement("p");
     p.appendChild(document.createTextNode("reference"));
     p.style.textIndent = "0px";
     p.style.transition = "16s text-indent linear";
     div.appendChild(p);
     return p;
 }
 var earlyref = make_reference_p();
 var earlyrefcs = getComputedStyle(earlyref, "");
 
 // Test all timing functions using a set of 8-second transitions, which
 // we check at times 0, 2s, 4s, 6s, and 8s.
 var tftests = [];
-for (var tf in timingFunctions) {
-    var p = document.createElement("p");
-    var t = document.createTextNode("transition-timing-function: " + tf);
+for (let tf in timingFunctions) {
+    let p = document.createElement("p");
+    let t = document.createTextNode("transition-timing-function: " + tf);
     p.appendChild(t);
     p.style.textIndent = "0px";
     p.style.transition = "8s text-indent linear";
     p.style.transitionTimingFunction = tf;
     div.appendChild(p);
     is(getComputedStyle(p, "").textIndent, "0px",
        "should be zero before changing value");
     tftests.push([ p, tf ]);
 }
 
 // Check that the timing function continues even when we restyle in the
 // middle.
 var interrupt_tests = [];
 for (var restyleParent of [true, false]) {
-    for (var itime = 2; itime < 8; itime += 2) {
-        var p = document.createElement("p");
-        var t = document.createTextNode("interrupt on " +
+    for (let itime = 2; itime < 8; itime += 2) {
+        let p = document.createElement("p");
+        let t = document.createTextNode("interrupt on " +
                                         (restyleParent ? "parent" : "node itself") +
                                         " at " + itime + "s");
         p.appendChild(t);
         p.style.textIndent = "0px";
         p.style.transition = "8s text-indent cubic-bezier(0, 1, 1, 0)";
         if (restyleParent) {
-          var d = document.createElement("div");
+          let d = document.createElement("div");
           d.appendChild(p);
           div.appendChild(d);
         } else {
           div.appendChild(p);
         }
         is(getComputedStyle(p, "").textIndent, "0px",
            "should be zero before changing value");
         setTimeout("interrupt_tests[" + interrupt_tests.length + "]" +
@@ -178,51 +178,51 @@ for (var restyleParent of [true, false])
                    "check_interrupt_tests()", itime*1000);
         interrupt_tests.push([ p, itime ]);
     }
 }
 
 // Test transition-delay values of -4s through 4s on a 4s transition
 // with 'ease-out' timing function.
 var delay_tests = {};
-for (var d = -4; d <= 4; ++d) {
-    var p = document.createElement("p");
-    var delay = d + "s";
-    var t = document.createTextNode("transition-delay: " + delay);
+for (let d = -4; d <= 4; ++d) {
+    let p = document.createElement("p");
+    let delay = d + "s";
+    let t = document.createTextNode("transition-delay: " + delay);
     p.appendChild(t);
     p.style.marginLeft = "0px";
     p.style.transition = "4s margin-left ease-out " + delay;
     div.appendChild(p);
     is(getComputedStyle(p, "").marginLeft, "0px",
        "should be zero before changing value");
     delay_tests[d] = p;
 }
 
 // Test transition-delay values of -4s through 4s on a 4s transition
 // with duration of zero.
 var delay_zero_tests = {};
-for (var d = -4; d <= 4; ++d) {
-    var p = document.createElement("p");
-    var delay = d + "s";
-    var t = document.createTextNode("transition-delay: " + delay);
+for (let d = -4; d <= 4; ++d) {
+    let p = document.createElement("p");
+    let delay = d + "s";
+    let t = document.createTextNode("transition-delay: " + delay);
     p.appendChild(t);
     p.style.marginLeft = "0px";
     p.style.transition = "0s margin-left linear " + delay;
     div.appendChild(p);
     is(getComputedStyle(p, "").marginLeft, "0px",
        "should be zero before changing value");
     delay_zero_tests[d] = p;
 }
 
 // Test that changing the value on an already-running transition to the
 // value it currently happens to have resets the transition.
 function make_reset_test(transition, description)
 {
-    var p = document.createElement("p");
-    var t = document.createTextNode(description);
+    let p = document.createElement("p");
+    let t = document.createTextNode(description);
     p.appendChild(t);
     p.style.marginLeft = "0px";
     p.style.transition = transition;
     div.appendChild(p);
     is(getComputedStyle(p, "").marginLeft, "0px",
        "should be zero before changing value");
     return p;
 }
@@ -255,18 +255,18 @@ var descendant_tests = [
       child_transition: "4s all" },
     // examples with positive and negative delay
     { parent_transition: "4s text-indent 1s",
       child_transition: "8s text-indent" },
     { parent_transition: "4s text-indent -1s",
       child_transition: "8s text-indent" }
 ];
 
-for (var i in descendant_tests) {
-    var test = descendant_tests[i];
+for (let i in descendant_tests) {
+    let test = descendant_tests[i];
     test.parentNode = document.createElement("div");
     test.childNode = document.createElement("p");
     test.parentNode.appendChild(test.childNode);
     test.childNode.appendChild(document.createTextNode(
         "parent with \"" + test.parent_transition + "\" and " +
         "child with \"" + test.child_transition + "\""));
     test.parentNode.style.transition = test.parent_transition;
     test.childNode.style.transition = test.child_transition;
@@ -291,53 +291,53 @@ for (var i in descendant_tests) {
 // delay (0).
 // This is because we're implementing the proposal in
 // http://lists.w3.org/Archives/Public/www-style/2009Aug/0109.html
 var number_tests = [
   { style: "transition: 4s margin, 8s margin-left" },
   { style: "transition: 4s margin-left, 8s margin" },
   { style: "transition-property: margin-left; " +
              "transition-duration: 8s, 2s" },
-  { style: "transition-property: margin-left, margin-left; " + 
+  { style: "transition-property: margin-left, margin-left; " +
              "transition-duration: 2s, 8s" },
   { style: "transition-property: margin-left, margin-left, margin-left; " +
              "transition-duration: 8s, 2s" },
   { style: "transition-property: margin-left; " +
              "transition-duration: 8s, 16s" },
-  { style: "transition-property: margin-left, margin-left; " + 
+  { style: "transition-property: margin-left, margin-left; " +
              "transition-duration: 16s, 8s" },
   { style: "transition-property: margin-left, margin-left, margin-left; " +
              "transition-duration: 8s, 16s" },
   { style: "transition-property: text-indent,word-spacing,margin-left; " +
              "transition-duration: 8s; " +
              "transition-delay: 0, 8s" },
   { style: "transition-property: text-indent,word-spacing,margin-left; " +
              "transition-duration: 8s, 16s; " +
              "transition-delay: 8s, 8s, 0, 8s, 8s, 8s" },
 ];
 
-for (var i in number_tests) {
-    var test = number_tests[i];
-    var p = document.createElement("p");
+for (let i in number_tests) {
+    let test = number_tests[i];
+    let p = document.createElement("p");
     p.setAttribute("style", test.style);
-    var t = document.createTextNode(test.style);
+    let t = document.createTextNode(test.style);
     p.appendChild(t);
     p.style.marginLeft = "100px";
     div.appendChild(p);
     is(getComputedStyle(p, "").marginLeft, "100px",
        "should be 100px before changing value");
     test.node = p;
 }
 
 // Test transitions that are also from-display:none, to-display:none, and
 // display:none throughout.
 var from_none_test, to_none_test, always_none_test;
 function make_display_test(initially_none, text)
 {
-    var p = document.createElement("p");
+    let p = document.createElement("p");
     p.appendChild(document.createTextNode(text));
     p.style.textIndent = "0px";
     p.style.transition = "8s text-indent ease-in-out";
     if (initially_none)
         p.style.display = "none";
     div.appendChild(p);
     return p;
 }
@@ -345,17 +345,17 @@ from_none_test   = make_display_test(tru
 to_none_test     = make_display_test(false, "transition to display:none");
 always_none_test = make_display_test(true,  "transition always display:none");
 var display_tests = [ from_none_test, to_none_test, always_none_test ];
 
 // Test transitions on pseudo-elements
 var before_test, after_test;
 function make_pseudo_elem_test(pseudo)
 {
-    var p = document.createElement("p");
+    let p = document.createElement("p");
     p.className = pseudo;
     div.appendChild(p);
     return {"pseudo": pseudo, element: p};
 }
 before_test = make_pseudo_elem_test("before");
 after_test = make_pseudo_elem_test("after");
 var pseudo_element_tests = [ before_test, after_test ];
 
@@ -365,57 +365,57 @@ var lateref = make_reference_p();
 var laterefcs = getComputedStyle(lateref, "");
 
 // flush style changes
 var x = getComputedStyle(div, "").width;
 
 // Start our timer as close as possible to when we start the first
 // transition.
 // Do not use setInterval because once it gets off in time, it stays off.
-for (var i = 1; i <= 8; ++i) {
+for (let i = 1; i <= 8; ++i) {
     setTimeout(process_future_calls, i * 1000, i);
 }
 gStartTime1 = Date.now(); // set before any transitions have started
 
 // Start all the transitions.
 earlyref.style.textIndent = "1000px";
-for (var test in tftests) {
-    var p = tftests[test][0];
+for (let test in tftests) {
+    let p = tftests[test][0];
     p.style.textIndent = "100px";
 }
-for (var test in interrupt_tests) {
-    var p = interrupt_tests[test][0];
+for (let test in interrupt_tests) {
+    let p = interrupt_tests[test][0];
     p.style.textIndent = "100px";
 }
-for (var d in delay_tests) {
-    var p = delay_tests[d];
+for (let d in delay_tests) {
+    let p = delay_tests[d];
     p.style.marginLeft = "100px";
 }
-for (var d in delay_zero_tests) {
-    var p = delay_zero_tests[d];
+for (let d in delay_zero_tests) {
+    let p = delay_zero_tests[d];
     p.style.marginLeft = "100px";
 }
 reset_test.style.marginLeft = "100px";
 reset_test_reference.style.marginLeft = "100px";
-for (var i in descendant_tests) {
-    var test = descendant_tests[i];
+for (let i in descendant_tests) {
+    let test = descendant_tests[i];
     test.parentNode.style.textIndent = "150px";
     test.parentNode.style.letterSpacing = "5px";
 }
-for (var i in number_tests) {
-    var test = number_tests[i];
+for (let i in number_tests) {
+    let test = number_tests[i];
     test.node.style.marginLeft = "50px";
 }
 from_none_test.style.textIndent = "100px";
 from_none_test.style.display = "";
 to_none_test.style.textIndent = "100px";
 to_none_test.style.display = "none";
 always_none_test.style.textIndent = "100px";
-for (var i in pseudo_element_tests) {
-    var test = pseudo_element_tests[i];
+for (let i in pseudo_element_tests) {
+    let test = pseudo_element_tests[i];
     test.element.classList.add("started");
 }
 lateref.style.textIndent = "1000px";
 
 // flush style changes
 x = getComputedStyle(div, "").width;
 
 gStartTime2 = Date.now(); // set after all transitions have started
@@ -521,17 +521,17 @@ function check_ref_range()
            expected_range[1].toFixed(6) + "px at time between " +
            expected_range[0]/REF_PX_PER_SEC + "s and " +
            expected_range[1]/REF_PX_PER_SEC + "s.");
     }
     check("early reference", px_to_num(earlyrefcs.textIndent));
     check("late reference", px_to_num(laterefcs.textIndent));
 }
 
-for (var i = 1; i <= 8; ++i) {
+for (let i = 1; i <= 8; ++i) {
     add_future_call(i, check_ref_range);
 }
 
 function check_tf_test()
 {
     for (var test in tftests) {
         var p = tftests[test][0];
         var tf = tftests[test][1];
@@ -548,17 +548,17 @@ function check_tf_test()
 check_tf_test();
 add_future_call(2, check_tf_test);
 add_future_call(4, check_tf_test);
 add_future_call(6, check_tf_test);
 add_future_call(8, check_tf_test);
 
 function check_interrupt_tests()
 {
-    for (var test in interrupt_tests) {
+    for (let test in interrupt_tests) {
         var p = interrupt_tests[test][0];
         var itime = interrupt_tests[test][1];
 
         check_transition_value(timingFunctions["cubic-bezier(0, 1, 1, 0)"],
                                0, 8, 0, 100,
                                getComputedStyle(p, "").textIndent,
                                "interrupt " +
                                (p.parentNode == div ? "" : "on parent ") +
@@ -566,51 +566,51 @@ function check_interrupt_tests()
     }
 }
 
 // check_interrupt_tests is called from check_tf_test and from
 // where we reset the interrupts
 
 function check_delay_test(time)
 {
-    var tf = timingFunctions["ease-out"];
-    for (var d in delay_tests) {
-        var p = delay_tests[d];
+    let tf = timingFunctions["ease-out"];
+    for (let d in delay_tests) {
+        let p = delay_tests[d];
 
         check_transition_value(tf, Number(d), Number(d) + 4, 0, 100,
                                getComputedStyle(p, "").marginLeft,
                                "delay test for delay " + d + "s");
     }
 }
 
 check_delay_test(0);
-for (var i = 1; i <= 8; ++i) {
+for (let i = 1; i <= 8; ++i) {
     add_future_call(i, check_delay_test);
 }
 
 function check_delay_zero_test(time)
 {
-    for (var d in delay_zero_tests) {
-        var p = delay_zero_tests[d];
+    for (let d in delay_zero_tests) {
+        let p = delay_zero_tests[d];
 
         time_range = [ px_to_num(earlyrefcs.textIndent) / REF_PX_PER_SEC,
                        px_to_num(laterefcs.textIndent) / REF_PX_PER_SEC ];
         var m = getComputedStyle(p, "").marginLeft;
         var desc = "delay_zero test for delay " + d + "s";
         if (time_range[0] < d && time_range[1] < d) {
             is(m, "0px", desc);
         } else if ((time_range[0] > d && time_range[1] > d) ||
                    (d == 0 && time == 0)) {
             is(m, "100px", desc);
         }
     }
 }
 
 check_delay_zero_test(0);
-for (var i = 1; i <= 8; ++i) {
+for (let i = 1; i <= 8; ++i) {
     add_future_call(i, check_delay_zero_test);
 }
 
 function reset_reset_test(time)
 {
     reset_test.style.marginLeft = "0px";
 }
 function check_reset_test(time)
@@ -621,38 +621,38 @@ function check_reset_test(time)
 check_reset_test(0);
 // reset the reset test right now so we don't have to worry about clock skew
 // To make sure that this is valid, check that a pretty-much-identical test is
 // already transitioning.
 is(getComputedStyle(reset_test_reference, "").marginLeft, "75px",
    "reset test reference value");
 reset_reset_test();
 check_reset_test(0);
-for (var i = 1; i <= 8; ++i) {
+for (let i = 1; i <= 8; ++i) {
     (function(j) {
         add_future_call(j, function() { check_reset_test(j); });
     })(i);
 }
 
 check_descendant_tests();
 add_future_call(2, check_descendant_tests);
 add_future_call(6, check_descendant_tests);
 
 function check_descendant_tests() {
     // text-indent: transition from 50px to 150px
     // letter-spacing: transition from 10px to 5px
     var values = {};
     values["text-indent"] = [ 50, 150 ];
     values["letter-spacing"] = [ 10, 5 ];
-    var tf = timingFunctions["ease"];
+    let tf = timingFunctions["ease"];
 
     var time = px_to_num(earlyrefcs.textIndent) / REF_PX_PER_SEC;
 
-    for (var i in descendant_tests) {
-        var test = descendant_tests[i];
+    for (let i in descendant_tests) {
+        let test = descendant_tests[i];
 
         /* ti=text-indent, ls=letter-spacing */
         var child_ti_duration = 0;
         var child_ls_duration = 0;
         var child_ti_delay = 0;
         var child_ls_delay = 0;
 
         if (test.parent_transition != "") {
@@ -716,38 +716,38 @@ function check_descendant_tests() {
                                    test.childCS.getPropertyValue(prop),
                                    `descendant test #${Number(i)+1}, property ${prop}`);
         }
     }
 }
 
 function check_number_tests()
 {
-    var tf = timingFunctions["ease"];
-    for (var d in number_tests) {
-        var test = number_tests[d];
-        var p = test.node;
+    let tf = timingFunctions["ease"];
+    for (let d in number_tests) {
+        let test = number_tests[d];
+        let p = test.node;
 
         check_transition_value(tf, 0, 8, 100, 50,
                                getComputedStyle(p, "").marginLeft,
                                "number of transitions test for style " +
                                  test.style);
     }
 }
 
 check_number_tests(0);
 add_future_call(2, check_number_tests);
 add_future_call(4, check_number_tests);
 add_future_call(6, check_number_tests);
 add_future_call(8, check_number_tests);
 
 function check_display_tests(time)
 {
-    for (var i in display_tests) {
-        var p = display_tests[i];
+    for (let i in display_tests) {
+        let p = display_tests[i];
 
         // There is no transition if the old or new style is display:none, so
         // the computed value is always the end value.
         var computedValue = getComputedStyle(p, "").textIndent;
         is(computedValue, "100px",
            "display test for test with " + p.childNodes[0].data +
            ": computed value " + computedValue + " should be 100px.");
     }
@@ -756,19 +756,19 @@ function check_display_tests(time)
 check_display_tests(0);
 add_future_call(2, function() { check_display_tests(2); });
 add_future_call(4, function() { check_display_tests(4); });
 add_future_call(6, function() { check_display_tests(6); });
 add_future_call(8, function() { check_display_tests(8); });
 
 function check_pseudo_element_tests(time)
 {
-    var tf = timingFunctions["ease-in-out"];
-    for (var i in pseudo_element_tests) {
-        var test = pseudo_element_tests[i];
+    let tf = timingFunctions["ease-in-out"];
+    for (let i in pseudo_element_tests) {
+        let test = pseudo_element_tests[i];
 
         check_transition_value(tf, 0, 8, 0, 100,
                                getComputedStyle(test.element, "").width,
                                "::"+test.pseudo+" test");
         check_transition_value(tf, 0, 8, 0, 100,
                                getComputedStyle(test.element,
                                                 "::"+test.pseudo).textIndent,
                                "::"+test.pseudo+" indent test");
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -36,16 +36,18 @@ https://bugzilla.mozilla.org/show_bug.cg
 
 <div id="transformTest" style="height:100px; width:200px; background-color:blue;">
 </div>
 
 </div>
 <pre id="test">
 <script type="application/javascript">
 
+/* eslint no-shadow: ["error", {"allow": ["prop", "div"]}] */
+
 /** Test for Bug 435441 **/
 
 SimpleTest.requestLongerTimeout(2);
 SimpleTest.waitForExplicitFinish();
 
 function has_num(str)
 {
     return !!String(str).match(/^([\d.]+)/);
@@ -1178,17 +1180,17 @@ function sample_array(array, count) {
     ok(false, "unexpected count");
     return [];
   }
   var ratio = array.length / count;
   if (ratio <= 1) {
     return array;
   }
   var result = new Array(count);
-  for (var i = 0; i < count; ++i) {
+  for (let i = 0; i < count; ++i) {
     result[i] = array[Math.floor(i * ratio)];
   }
   return result;
 }
 
 // Test that transitions don't do anything (i.e., aren't supported) on
 // the properties not in our test list above (and not transition
 // properties themselves).
@@ -1228,25 +1230,25 @@ for (prop in gCSSProperties) {
       all_values = [].concat(info.initial_values.slice(0,2),
                              sample_array(info.initial_values.slice(2), 6),
                              info.other_values.slice(0, 10),
                              sample_array(info.other_values.slice(10), 40));
     }
 
     var all_computed = [];
     for (var idx in all_values) {
-      var val = all_values[idx];
+      let val = all_values[idx];
       div.style.setProperty(prop, val, "");
       all_computed.push(cs.getPropertyValue(prop));
     }
     div.style.removeProperty(prop);
 
     div.style.setProperty("transition", prop + " 20s linear", "");
-    for (var i = 0; i < all_values.length; ++i) {
-      for (var j = i + 1; j < all_values.length; ++j) {
+    for (let i = 0; i < all_values.length; ++i) {
+      for (let j = i + 1; j < all_values.length; ++j) {
         div.style.setProperty(prop, all_values[i], "");
         is(cs.getPropertyValue(prop), all_computed[i],
            "transitions not supported for property " + prop +
            " value " + all_values[i]);
         div.style.setProperty(prop, all_values[j], "");
         is(cs.getPropertyValue(prop), all_computed[j],
            "transitions not supported for property " + prop +
            " value " + all_values[j]);
@@ -1906,17 +1908,17 @@ function filter_function_list_equals(com
   }
 
   // Odd items are the function name, even items the function value.
   if (!matches.length || matches.length % 2 ||
       expectedList.length != matches.length) {
     ok(false, "computed style of 'filter' isn't in the format we expect");
     return false;
   }
-  for (var i = 0; i < matches.length; i += 2) {
+  for (let i = 0; i < matches.length; i += 2) {
     var functionName = matches[i];
     var functionValue = matches[i+1];
     var expected = expectedList[i+1]
     var tolerance = 0;
     // Check if we have the expected function.
     if (functionName != expectedList[i]) {
       return false;
     }
@@ -1980,17 +1982,17 @@ function test_path_function(prop) {
     const actual = cs.getPropertyValue(prop);
     ok(test_path_function_equals(actual, test.expected),
        prop + " property is " + actual + " expected values of " +
        test.expected[0] + "(" + test.expected[1] + ")");
   }
 }
 
 function test_filter_transition(prop) {
-  for (var i in filterTests) {
+  for (let i in filterTests) {
     var test = filterTests[i];
     div.style.setProperty("transition-property", "none", "");
     div.style.setProperty(prop, test.start, "");
     cs.getPropertyValue(prop);
     div.style.setProperty("transition-property", prop, "");
     div.style.setProperty(prop, test.end, "");
     var actual = cs.getPropertyValue(prop);
     ok(filter_function_list_equals(actual, test.expected),
@@ -2892,29 +2894,29 @@ function test_background_position_size_c
                            "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)");
     }
   }
 }
 
 function test_transform_transition(prop) {
   is(prop, "transform", "Unexpected transform property!  Test needs to be fixed");
   var matrix_re = /^matrix\(([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*)\)$/;
-  for (var i in transformTests) {
+  for (let i in transformTests) {
     var test = transformTests[i];
     if (!("expected" in test)) {
       var v = test.expected_uncomputed;
       if (v.match(matrix_re) && !test.force_compute) {
         test.expected = v;
       } else {
         test.expected = computeMatrix(v);
       }
     }
   }
 
-  for (var i in transformTests) {
+  for (let i in transformTests) {
     var test = transformTests[i];
     div.style.setProperty("transition-property", "none", "");
     div.style.setProperty(prop, test.start, "");
     cs.getPropertyValue(prop);
     div.style.setProperty("transition-property", prop, "");
     div.style.setProperty(prop, test.end, "");
     var actual = cs.getPropertyValue(prop);
     if (!test.round_error_ok || actual == test.expected) {
@@ -2924,20 +2926,20 @@ function test_transform_transition(prop)
          "interpolation of transitions: " + test.start + " to " + test.end);
     } else {
       function s(mat) {
         return mat.match(matrix_re).slice(1,7);
       }
       var pass = true;
       var actual_split = s(actual);
       var expected_split = s(test.expected);
-      for (var i = 0; i < 6; ++i) {
+      for (let j = 0; j < 6; ++j) {
         // Allow differences of 1 at the sixth decimal place, and allow
         // a drop extra for floating point error from the subtraction.
-        if (Math.abs(Number(actual_split[i]) - Number(expected_split[i])) >
+        if (Math.abs(Number(actual_split[j]) - Number(expected_split[j])) >
               0.0000011) {
           pass = false;
         }
       }
       ok(pass,
          "interpolation of transitions: " + test.start + " to " + test.end +
          ": " + actual + " should approximately equal " + test.expected);
     }
--- a/layout/style/test/test_value_cloning.html
+++ b/layout/style/test/test_value_cloning.html
@@ -16,51 +16,51 @@ https://bugzilla.mozilla.org/show_bug.cg
 
 /** Test for cloning of CSS property values (including 'inherit', 'initial' and 'unset') **/
 var test_queue = [];
 var iframe = document.getElementById("iframe");
 
 SimpleTest.waitForExplicitFinish();
 
 for (var prop in gCSSProperties) {
-  var info = gCSSProperties[prop];
+  let info = gCSSProperties[prop];
 
   test_queue.push({ prop: prop, value: "inherit",
                     inherited_value: info.initial_values[0] });
   test_queue.push({ prop: prop, value: "inherit",
                     inherited_value: info.other_values[0] });
   test_queue.push({ prop: prop, value: "initial" });
   if (info.inherited) {
     test_queue.push({ prop: prop, value: "unset",
                       inherited_value: info.initial_values[0] });
     test_queue.push({ prop: prop, value: "unset",
                       inherited_value: info.other_values[0] });
   } else {
     test_queue.push({ prop: prop, value: "unset" });
   }
-  for (var idx in info.initial_values) {
+  for (let idx in info.initial_values) {
     test_queue.push({ prop: prop, value: info.initial_values[idx] });
   }
-  for (var idx in info.other_values) {
+  for (let idx in info.other_values) {
     test_queue.push({ prop: prop, value: info.other_values[idx] });
   }
 }
 
 test_queue.reverse();
 
 doTest();
 
 function doTest()
 {
   var sheet_data = "";
 
-  for (var idx = 0; idx < test_queue.length; ++idx) {
+  for (let idx = 0; idx < test_queue.length; ++idx) {
     var current_item = test_queue[idx];
 
-    var info = gCSSProperties[current_item.prop];
+    let info = gCSSProperties[current_item.prop];
 
     sheet_data += "#parent"+idx+", #test"+idx+" { ";
     for (var prereq in info.prereqs) {
       sheet_data += prereq + ": " + info.prereqs[prereq] + ";";
     }
     sheet_data += " }";
 
     sheet_data += "#parent"+idx+" { ";
@@ -78,17 +78,17 @@ function doTest()
 
   var doc_data =
     "<!DOCTYPE HTML>\n" +
     "<link rel='stylesheet' type='text/css' href='" + sheet_url + "'>\n" +
     "<link rel='stylesheet' type='text/css' href='" + sheet_url + "'>\n" +
     "<body>\n";
 
 
-  for (var idx = 0; idx < test_queue.length; ++idx) {
+  for (let idx = 0; idx < test_queue.length; ++idx) {
     var current_item = test_queue[idx];
 
     if ("inherited_value" in current_item) {
       doc_data += "<span id='parent"+idx+"'>";
     }
     doc_data += "<span id='test"+idx+"'></span>";
     if ("inherited_value" in current_item) {
       doc_data += "</span>";
@@ -107,17 +107,17 @@ function iframe_loaded(event)
 
   var start_ser = [];
   var start_compute = [];
   var test_cs = [];
   var wrappedFrame = SpecialPowers.wrap(iframe);
   var ifdoc = wrappedFrame.contentDocument;
   var ifwin = wrappedFrame.contentWindow;
 
-  for (var idx = 0; idx < test_queue.length; ++idx) {
+  for (let idx = 0; idx < test_queue.length; ++idx) {
     var current_item = test_queue[idx];
     var info = gCSSProperties[current_item.prop];
 
     var test = ifdoc.getElementById("test" + idx);
     var cur_cs = ifwin.getComputedStyle(test);
     test_cs.push(cur_cs);
     var cur_ser = ifdoc.styleSheets[0].cssRules[3*idx+2].style.getPropertyValue(current_item.prop);
     if (cur_ser == "") {
@@ -143,17 +143,17 @@ function iframe_loaded(event)
   var firstlink = ifdoc.getElementsByTagName("link")[0];
   firstlink.remove();
 
   // Force a flush
   ifdoc.body.style.display="none";
   var ow = ifdoc.body.offsetWidth;
   ifdoc.body.style.display="";
 
-  for (var idx = 0; idx < test_queue.length; ++idx) {
+  for (let idx = 0; idx < test_queue.length; ++idx) {
     var current_item = test_queue[idx];
     var info = gCSSProperties[current_item.prop];
 
     var end_ser =
       ifdoc.styleSheets[0].cssRules[3*idx+3].style.getPropertyValue(current_item.prop);
     is(end_ser, start_ser[idx],
        "serialization should match when cloning " +
        current_item.prop + ": " + current_item.value);
--- a/layout/style/test/test_value_storage.html
+++ b/layout/style/test/test_value_storage.html
@@ -125,21 +125,21 @@ function are_properties_aliased(propA, p
   return propA == propB;
 }
 
 function test_property(property)
 {
   var info = gCSSProperties[property];
 
   // can all properties be removed from the style?
-  function test_remove_all_properties(property, value) {
+  function test_remove_all_properties(propName, value) {
     var i, p = [];
     for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
     for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
-    var errstr = "when setting property " + property + " to " + value;
+    var errstr = "when setting property " + propName + " to " + value;
     is(gDeclaration.length, 0, "unremovable properties " + errstr);
     is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
   }
 
   function test_other_shorthands_empty(value, subprop) {
     if (!(subprop in gPropertyShorthands)) return;
     var shorthands = gPropertyShorthands[subprop];
     for (idx in shorthands) {
@@ -193,23 +193,23 @@ function test_property(property)
         }
       }
 
     // We don't care particularly about the whitespace or the placement of
     // semicolons, but for simplicity we'll test the current behavior.
     var expected_serialization = "";
     if (step1val != "") {
       if ("alias_for" in info) {
-        let value = info.legacy_mapping && info.legacy_mapping[step1val]
+        let newValue = info.legacy_mapping && info.legacy_mapping[step1val]
           ? info.legacy_mapping[step1val] : step1val;
         // FIXME(emilio): This is a bit unfortunate:
         // https://github.com/w3c/csswg-drafts/issues/3332
         if (info.type == CSS_TYPE_LEGACY_SHORTHAND && value_has_variable_reference)
-          value = "";
-        expected_serialization = info.alias_for + colon + value + ";";
+          newValue = "";
+        expected_serialization = info.alias_for + colon + newValue + ";";
       } else {
         expected_serialization = property + colon + step1val + ";";
       }
     }
     is(step1ser, expected_serialization,
        "serialization should match property value");
 
     gDeclaration.removeProperty(property);
--- a/layout/xul/test/browser_bug706743.js
+++ b/layout/xul/test/browser_bug706743.js
@@ -38,16 +38,17 @@ add_task(async function() {
   }
   addEventListener("popupshown", tooltipNotExpected, true);
 
   let dragService = Cc["@mozilla.org/widget/dragservice;1"].
                       getService(Ci.nsIDragService);
   dragService.startDragSession();
   await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mousemove" }, browser);
 
+  // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
   await new Promise(resolve => setTimeout(resolve, 100));
   removeEventListener("popupshown", tooltipNotExpected, true);
   dragService.endDragSession(true);
 
   await BrowserTestUtils.synthesizeMouse("#target", -5, -5, { type: "mousemove" }, browser);
 
   // If tooltip listener used a flag for managing D&D state, we would need
   // to test if the tooltip is shown after drag.
@@ -73,12 +74,8 @@ add_task(async function() {
 
   await BrowserTestUtils.synthesizeMouse("#target", 5, 15, { type: "mouseup" }, browser);
   await BrowserTestUtils.synthesizeMouse("#target", -5, 15, { type: "mousemove" }, browser);
 
   ok(true, "tooltips appear properly");
 
   gBrowser.removeCurrentTab();
 });
-
-
-
-