diff --git a/.eslintignore b/.eslintignore
index 8fde0188f071..02e51ca7655a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,11 +11,6 @@
 # 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/**
diff --git a/.eslintrc.js b/.eslintrc.js
index 36ba19caf35c..509e7d9b5125 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -259,5 +259,83 @@ module.exports = {
       "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",
+    }
   }]
 };
diff --git a/layout/base/tests/transformed_scrolling_repaints_3_window.html b/layout/base/tests/transformed_scrolling_repaints_3_window.html
index e946a9f2b0a7..1b345a25d082 100644
--- a/layout/base/tests/transformed_scrolling_repaints_3_window.html
+++ b/layout/base/tests/transformed_scrolling_repaints_3_window.html
@@ -14,7 +14,6 @@
 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() {
diff --git a/layout/forms/test/test_bug536567_perwindowpb.html b/layout/forms/test/test_bug536567_perwindowpb.html
index c4ea329b8dd0..dc2088e20c29 100644
--- a/layout/forms/test/test_bug536567_perwindowpb.html
+++ b/layout/forms/test/test_bug536567_perwindowpb.html
@@ -30,12 +30,12 @@ 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);
@@ -119,7 +119,7 @@ function runTest() {
 }
 
 function endTest() {
-  for(var i = 0; i < dirs.length - 1; i++) {
+  for(let i = 0; i < dirs.length - 1; i++) {
     dirs[i].remove(true);
   }
 
@@ -168,7 +168,7 @@ function testOnWindow(aIsPrivate, aCallback) {
 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);
diff --git a/layout/forms/test/test_bug903715.html b/layout/forms/test/test_bug903715.html
index 9b9db48b75cf..b887b2cd0144 100644
--- a/layout/forms/test/test_bug903715.html
+++ b/layout/forms/test/test_bug903715.html
@@ -59,7 +59,7 @@ function runTests()
   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
diff --git a/layout/generic/test/plugin_clipping_lib.js b/layout/generic/test/plugin_clipping_lib.js
index 287c1574eadc..ee6deedb9187 100644
--- a/layout/generic/test/plugin_clipping_lib.js
+++ b/layout/generic/test/plugin_clipping_lib.js
@@ -114,17 +114,17 @@ function checkClipRegionWithDoc(doc, offsetX, offsetY, id, rects, checkBounds) {
       "': 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);
 }
 
diff --git a/layout/generic/test/test_bug1499961.html b/layout/generic/test/test_bug1499961.html
index a2f4c0ba1f1c..12b217f39e1f 100644
--- a/layout/generic/test/test_bug1499961.html
+++ b/layout/generic/test/test_bug1499961.html
@@ -29,6 +29,7 @@ limitations under the License.
 <p id="display"></p>
 <pre id="test">
 <script type="application/javascript">
+  /* eslint-disable no-shadow */
   var tests = [];
   var curDescribeMsg = '';
   var curItMsg = '';
diff --git a/layout/generic/test/test_bug507902.html b/layout/generic/test/test_bug507902.html
index 3cb5527392e8..2394ad8567bb 100644
--- a/layout/generic/test/test_bug507902.html
+++ b/layout/generic/test/test_bug507902.html
@@ -5,7 +5,7 @@ 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>
@@ -60,7 +60,7 @@ 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"));
@@ -81,7 +81,7 @@ for (var i in canvasNames) {
   // 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();
@@ -327,7 +327,7 @@ function resetImage() {
 // 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);
@@ -359,7 +359,7 @@ function disableBorderAndPad() {
 
 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)
diff --git a/layout/style/test/test_acid3_test46.html b/layout/style/test/test_acid3_test46.html
index 8845feddf4f2..4ec50cfddcea 100644
--- a/layout/style/test/test_acid3_test46.html
+++ b/layout/style/test/test_acid3_test46.html
@@ -23,7 +23,7 @@ extracted from the test framework there and put into Mochitest.
 <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">
@@ -78,14 +78,14 @@ function runTest() {
   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
@@ -138,4 +138,3 @@ function runTest() {
 </p>
 </body>
 </html>
-
diff --git a/layout/style/test/test_align_justify_computed_values.html b/layout/style/test/test_align_justify_computed_values.html
index 13b775b812e3..aa13762cb7b8 100644
--- a/layout/style/test/test_align_justify_computed_values.html
+++ b/layout/style/test/test_align_justify_computed_values.html
@@ -27,7 +27,6 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=696253
 <pre id="test">
 <script type="application/javascript">
 "use strict";
-
 /*
  * Utility function for getting computed style of "align-self":
  */
@@ -156,27 +155,27 @@ function main() {
   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) {
@@ -227,32 +226,32 @@ function main() {
   // 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) {
@@ -324,26 +323,26 @@ function main() {
   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) {
@@ -387,28 +386,28 @@ function main() {
   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";
@@ -416,9 +415,9 @@ function main() {
   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) {
diff --git a/layout/style/test/test_animations_event_order.html b/layout/style/test/test_animations_event_order.html
index 912221b8a0f0..7caee2bdcb41 100644
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -34,6 +34,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1183461
 <script type="application/javascript">
 'use strict';
 
+/* eslint-disable no-shadow */
+
 // Take over the refresh driver right from the start.
 advance_clock(0);
 
diff --git a/layout/style/test/test_animations_omta_start.html b/layout/style/test/test_animations_omta_start.html
index 9348665a7ea9..92423bf67dbb 100644
--- a/layout/style/test/test_animations_omta_start.html
+++ b/layout/style/test/test_animations_omta_start.html
@@ -162,7 +162,7 @@ function testTransitionTakingOver() {
       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);
diff --git a/layout/style/test/test_bug73586.html b/layout/style/test/test_bug73586.html
index 57507bb1d8ab..2aa2e215e531 100644
--- a/layout/style/test/test_bug73586.html
+++ b/layout/style/test/test_bug73586.html
@@ -18,7 +18,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=73586
 <div id="display"></div>
 
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
@@ -51,8 +51,6 @@ function check_children(p, check_cb) {
     }
 }
 
-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
@@ -189,4 +187,3 @@ run_series(function(child, elt, elts, node, nodes) {
 </pre>
 </body>
 </html>
-
diff --git a/layout/style/test/test_bug98997.html b/layout/style/test/test_bug98997.html
index ebbbca9e5347..5dc325f9eff3 100644
--- a/layout/style/test/test_bug98997.html
+++ b/layout/style/test/test_bug98997.html
@@ -54,7 +54,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=98997
 </div>
 
 <div id="content" style="display: none">
-  
+
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
@@ -102,7 +102,7 @@ for (i = 0; i < cnodes.length; ++i) {
 }
 
 for (i in divs) {
-  var div = divs[i];
+  let div = divs[i];
   if (div.className.match(/makeemptytext/))
     div.insertBefore(document.createTextNode(""), div.firstChild);
 }
@@ -120,20 +120,20 @@ function bg(div) {
 }
 
 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");
 }
diff --git a/layout/style/test/test_font_loading_api.html b/layout/style/test/test_font_loading_api.html
index dbfbe1b1d3a7..1e03ae8f3031 100644
--- a/layout/style/test/test_font_loading_api.html
+++ b/layout/style/test/test_font_loading_api.html
@@ -128,7 +128,6 @@ function is_pending(aPromise, aDescription, aTestID) {
 }
 
 function fetchAsArrayBuffer(aURL) {
-  var xhr;
   return new Promise(function(aResolve, aReject) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", aURL);
@@ -1818,10 +1817,9 @@ function runTest() {
     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);
@@ -1830,10 +1828,10 @@ function runTest() {
     });
 
     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 + ")");
       }
     });
 
diff --git a/layout/style/test/test_inherit_storage.html b/layout/style/test/test_inherit_storage.html
index c0b1fd99337c..2c0bba46e412 100644
--- a/layout/style/test/test_inherit_storage.html
+++ b/layout/style/test/test_inherit_storage.html
@@ -87,11 +87,11 @@ function test_property(property)
         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);
     }
diff --git a/layout/style/test/test_initial_storage.html b/layout/style/test/test_initial_storage.html
index 3628bf77a210..5b76678a84ed 100644
--- a/layout/style/test/test_initial_storage.html
+++ b/layout/style/test/test_initial_storage.html
@@ -101,11 +101,11 @@ function test_property(property)
         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);
     }
diff --git a/layout/style/test/test_media_queries.html b/layout/style/test/test_media_queries.html
index 70b37ac4dbea..f7cf8cff70c7 100644
--- a/layout/style/test/test_media_queries.html
+++ b/layout/style/test/test_media_queries.html
@@ -137,7 +137,7 @@ function run() {
     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");
@@ -145,9 +145,9 @@ function run() {
     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");
     }
 
@@ -170,10 +170,10 @@ function run() {
       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");
       }
     });
@@ -927,5 +927,3 @@ function handle_iframe_onload(event)
 </pre>
 </body>
 </html>
-
-
diff --git a/layout/style/test/test_media_query_list.html b/layout/style/test/test_media_query_list.html
index f72c92e157a4..ea8ea1c14cd8 100644
--- a/layout/style/test/test_media_query_list.html
+++ b/layout/style/test/test_media_query_list.html
@@ -266,20 +266,20 @@ function run() {
 
   /* 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 */
diff --git a/layout/style/test/test_namespace_rule.html b/layout/style/test/test_namespace_rule.html
index 70da896dd5fb..6e8ba52c90f7 100644
--- a/layout/style/test/test_namespace_rule.html
+++ b/layout/style/test/test_namespace_rule.html
@@ -13,7 +13,6 @@
 SimpleTest.waitForExplicitFinish();
 
 var HTML_NS = "http://www.w3.org/1999/xhtml";
-var style_text;
 
 function run() {
     var wrappedFrame = SpecialPowers.wrap($("iframe"));
@@ -25,12 +24,12 @@ function run() {
         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;
 
     /*
@@ -225,7 +224,7 @@ function run() {
       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");',
@@ -323,7 +322,7 @@ function run() {
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
@@ -331,7 +330,7 @@ function run() {
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
@@ -339,7 +338,7 @@ function run() {
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
@@ -347,7 +346,7 @@ function run() {
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
@@ -355,7 +354,7 @@ function run() {
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
@@ -363,7 +362,7 @@ function run() {
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
@@ -371,7 +370,7 @@ function run() {
       '<test xmlns="testing"/>',
       function (doc) { return doc.getElementsByTagName("test");},
       function (doc) { return []; }
-    );      
+    );
 
     test_selector_in_html(
       '@namespace x url("test");',
@@ -379,7 +378,7 @@ function run() {
       '<test xmlns="test"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
@@ -387,7 +386,7 @@ function run() {
       '<test xmlns="testing" foo="bar"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
@@ -395,7 +394,7 @@ function run() {
       '<test xmlns="test" foo="bar"/>',
       function (doc) { return []; },
       function (doc) { return doc.getElementsByTagName("test");}
-    );      
+    );
 
     test_selector_in_html(
       '@namespace url("test");',
diff --git a/layout/style/test/test_of_type_selectors.xhtml b/layout/style/test/test_of_type_selectors.xhtml
index 8561a817d2c7..edf2e6ee975c 100644
--- a/layout/style/test/test_of_type_selectors.xhtml
+++ b/layout/style/test/test_of_type_selectors.xhtml
@@ -44,7 +44,7 @@ function run() {
     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);
@@ -56,7 +56,7 @@ function run() {
     {
         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),
@@ -95,4 +95,3 @@ run();
 </pre>
 </body>
 </html>
-
diff --git a/layout/style/test/test_parse_rule.html b/layout/style/test/test_parse_rule.html
index 71806955f66b..0fb1cc80ed55 100644
--- a/layout/style/test/test_parse_rule.html
+++ b/layout/style/test/test_parse_rule.html
@@ -238,11 +238,11 @@ var doTests = function() {
   }
   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>");
diff --git a/layout/style/test/test_rules_out_of_sheets.html b/layout/style/test/test_rules_out_of_sheets.html
index 9f6f7adfe790..2ca53d31b768 100644
--- a/layout/style/test/test_rules_out_of_sheets.html
+++ b/layout/style/test/test_rules_out_of_sheets.html
@@ -12,7 +12,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=634373
 <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">
@@ -90,9 +90,9 @@ try {
 } 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 = "";
diff --git a/layout/style/test/test_selectors.html b/layout/style/test/test_selectors.html
index 23fbf9006b73..9546e4e54fe3 100644
--- a/layout/style/test/test_selectors.html
+++ b/layout/style/test/test_selectors.html
@@ -75,13 +75,13 @@ function runTests() {
             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);
         }
@@ -93,14 +93,14 @@ function runTests() {
         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);
@@ -150,21 +150,21 @@ function runTests() {
             // 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);
diff --git a/layout/style/test/test_supports_rules.html b/layout/style/test/test_supports_rules.html
index f81aac5c0829..a6033a85c493 100644
--- a/layout/style/test/test_supports_rules.html
+++ b/layout/style/test/test_supports_rules.html
@@ -44,18 +44,18 @@ function runTest() {
 
   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);
diff --git a/layout/style/test/test_transitions.html b/layout/style/test/test_transitions.html
index a6beca0e7cdc..a25195f3790c 100644
--- a/layout/style/test/test_transitions.html
+++ b/layout/style/test/test_transitions.html
@@ -125,7 +125,7 @@ var div = document.getElementById("display");
 // 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";
@@ -138,9 +138,9 @@ 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";
@@ -155,16 +155,16 @@ for (var tf in timingFunctions) {
 // 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 {
@@ -183,10 +183,10 @@ for (var restyleParent of [true, false]) {
 // 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;
@@ -199,10 +199,10 @@ for (var d = -4; d <= 4; ++d) {
 // 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;
@@ -216,8 +216,8 @@ for (var d = -4; d <= 4; ++d) {
 // 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;
@@ -260,8 +260,8 @@ var descendant_tests = [
       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);
@@ -296,13 +296,13 @@ var number_tests = [
   { 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" },
@@ -314,11 +314,11 @@ var number_tests = [
              "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);
@@ -332,7 +332,7 @@ for (var i in number_tests) {
 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";
@@ -350,7 +350,7 @@ var display_tests = [ from_none_test, to_none_test, always_none_test ];
 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};
@@ -370,38 +370,38 @@ 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";
@@ -409,8 +409,8 @@ 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";
@@ -526,7 +526,7 @@ function check_ref_range()
     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);
 }
 
@@ -553,7 +553,7 @@ 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];
 
@@ -571,9 +571,9 @@ function check_interrupt_tests()
 
 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,
@@ -582,14 +582,14 @@ function check_delay_test(time)
 }
 
 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 ];
@@ -605,7 +605,7 @@ function check_delay_zero_test(time)
 }
 
 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);
 }
 
@@ -626,7 +626,7 @@ 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);
@@ -642,12 +642,12 @@ function check_descendant_tests() {
     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;
@@ -721,10 +721,10 @@ function check_descendant_tests() {
 
 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,
@@ -741,8 +741,8 @@ 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.
@@ -761,9 +761,9 @@ 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,
diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
index 5b53e7ed0b80..1ff166450886 100644
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -41,6 +41,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=435441
 <pre id="test">
 <script type="application/javascript">
 
+/* eslint no-shadow: ["error", {"allow": ["prop", "div"]}] */
+
 /** Test for Bug 435441 **/
 
 SimpleTest.requestLongerTimeout(2);
@@ -1183,7 +1185,7 @@ function sample_array(array, count) {
     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;
@@ -1233,15 +1235,15 @@ for (prop in gCSSProperties) {
 
     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 +
@@ -1911,7 +1913,7 @@ function filter_function_list_equals(computedValStr, expectedList)
     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]
@@ -1985,7 +1987,7 @@ function test_path_function(prop) {
 }
 
 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, "");
@@ -2897,7 +2899,7 @@ function test_background_position_size_common(prop, doesPropTakeListValues,
 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;
@@ -2909,7 +2911,7 @@ function test_transform_transition(prop) {
     }
   }
 
-  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, "");
@@ -2929,10 +2931,10 @@ function test_transform_transition(prop) {
       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;
         }
diff --git a/layout/style/test/test_value_cloning.html b/layout/style/test/test_value_cloning.html
index 3cbfbc91101e..ceaa9d3c66fa 100644
--- a/layout/style/test/test_value_cloning.html
+++ b/layout/style/test/test_value_cloning.html
@@ -21,7 +21,7 @@ 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] });
@@ -36,10 +36,10 @@ for (var prop in gCSSProperties) {
   } 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] });
   }
 }
@@ -52,10 +52,10 @@ 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) {
@@ -83,7 +83,7 @@ function doTest()
     "<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) {
@@ -112,7 +112,7 @@ function iframe_loaded(event)
   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];
 
@@ -148,7 +148,7 @@ function iframe_loaded(event)
   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];
 
diff --git a/layout/style/test/test_value_storage.html b/layout/style/test/test_value_storage.html
index 17a4f1497cc7..fc11aa11ff49 100644
--- a/layout/style/test/test_value_storage.html
+++ b/layout/style/test/test_value_storage.html
@@ -130,11 +130,11 @@ 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);
   }
@@ -198,13 +198,13 @@ function test_property(property)
     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 + ";";
       }
diff --git a/layout/xul/test/browser_bug706743.js b/layout/xul/test/browser_bug706743.js
index 056008bb5ecb..2d72260e8ac3 100644
--- a/layout/xul/test/browser_bug706743.js
+++ b/layout/xul/test/browser_bug706743.js
@@ -43,6 +43,7 @@ add_task(async function() {
   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);
@@ -78,7 +79,3 @@ add_task(async function() {
 
   gBrowser.removeCurrentTab();
 });
-
-
-
-