--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@@ -2,52 +2,51 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test following animated property list test.
 // 1. Existence for animated property list.
 // 2. Number of animated property item.
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    target: ".animated",
+    targetClass: "animated",
     expectedNumber: 1,
   },
   {
-    target: ".compositor-notall",
+    targetClass: "compositor-notall",
     expectedNumber: 3,
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking animated property list and items existence at initial");
   ok(!panel.querySelector(".animated-property-list"),
      "The animated-property-list should not be in the DOM at initial");
 
-  for (const testCase of TEST_CASES) {
-    info(`Checking animated-property-list and items existence at ${ testCase.target }`);
-    const animatedNode = await getNodeFront(testCase.target, inspector);
-    await selectNodeAndWaitForAnimations(animatedNode, inspector);
+  for (const { targetClass, expectedNumber } of TEST_DATA) {
+    info(`Checking animated-property-list and items existence at ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
     ok(panel.querySelector(".animated-property-list"),
-       `The animated-property-list should be in the DOM at ${ testCase.target }`);
+      `The animated-property-list should be in the DOM at ${ targetClass }`);
     const itemEls =
       panel.querySelectorAll(".animated-property-list .animated-property-item");
-    is(itemEls.length, testCase.expectedNumber,
-       `The number of animated-property-list should be ${ testCase.expectedNumber } `
-       + `at ${ testCase.target }`);
+    is(itemEls.length, expectedNumber,
+       `The number of animated-property-list should be ${ expectedNumber } ` +
+       `at ${ targetClass }`);
 
     if (itemEls.length < 2) {
       continue;
     }
 
-    info(`Checking the background color for `
-         + `the animated property item at ${ testCase.target }`);
+    info("Checking the background color for " +
+         `the animated property item at ${ targetClass }`);
     const evenColor = panel.ownerGlobal.getComputedStyle(itemEls[0]).backgroundColor;
     const oddColor = panel.ownerGlobal.getComputedStyle(itemEls[1]).backgroundColor;
     isnot(evenColor, oddColor,
-          "Background color of an even animated property item "
-          + "should be different from odd");
+          "Background color of an even animated property item " +
+          "should be different from odd");
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -29,43 +29,47 @@ add_task(async function() {
   info("Checking animated property name component");
   await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
 
   const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name");
   is(animatedPropertyNameEls.length, TEST_DATA.length,
     `Number of animated property name elements should be ${ TEST_DATA.length }`);
 
   for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) {
-    const testData = TEST_DATA[index];
+    const {
+      property,
+      isOnCompositor,
+      isWarning,
+    } = TEST_DATA[index];
 
-    info(`Checking text content for ${ testData.property }`);
+    info(`Checking text content for ${ property }`);
 
     const spanEl = animatedPropertyNameEl.querySelector("span");
     ok(spanEl,
-      `<span> element should be in animated-property-name of ${ testData.property }`);
-    is(spanEl.textContent, testData.property,
-      `textContent should be ${ testData.property }`);
+      `<span> element should be in animated-property-name of ${ property }`);
+    is(spanEl.textContent, property,
+      `textContent should be ${ property }`);
 
-    info(`Checking compositor sign for ${ testData.property }`);
+    info(`Checking compositor sign for ${ property }`);
 
-    if (testData.isOnCompositor) {
+    if (isOnCompositor) {
       ok(animatedPropertyNameEl.classList.contains("compositor"),
         "animatedPropertyNameEl should has .compositor class");
       isnot(getComputedStyle(spanEl, "::before").width, "auto",
         "width of ::before pseud should not be auto");
     } else {
       ok(!animatedPropertyNameEl.classList.contains("compositor"),
         "animatedPropertyNameEl should not have .compositor class");
       is(getComputedStyle(spanEl, "::before").width, "auto",
         "width of ::before pseud should be auto");
     }
 
-    info(`Checking warning for ${ testData.property }`);
+    info(`Checking warning for ${ property }`);
 
-    if (testData.isWarning) {
+    if (isWarning) {
       ok(animatedPropertyNameEl.classList.contains("warning"),
         "animatedPropertyNameEl should has .warning class");
       is(getComputedStyle(spanEl).textDecorationStyle, "dotted",
         "text-decoration-style of spanEl should be 'dotted'");
       is(getComputedStyle(spanEl).textDecorationLine, "underline",
         "text-decoration-line of spanEl should be 'underline'");
     } else {
       ok(!animatedPropertyNameEl.classList.contains("warning"),

--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@@ -1,37 +1,36 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that whether title in header of animations detail.
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    target: ".cssanimation-normal",
+    targetClass: "cssanimation-normal",
     expectedTitle: "cssanimation - CSS Animation",
   },
   {
-    target: ".delay-positive",
+    targetClass: "delay-positive",
     expectedTitle: "test-delay-animation - Script Animation",
   },
   {
-    target: ".easing-step",
+    targetClass: "easing-step",
     expectedTitle: "Script Animation",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking title in each header of animation detail");
 
-  for (const testCase of TEST_CASES) {
-    info(`Checking title at ${ testCase.target }`);
-    const animatedNode = await getNodeFront(testCase.target, inspector);
-    await selectNodeAndWaitForAnimations(animatedNode, inspector);
+  for (const { targetClass, expectedTitle } of TEST_DATA) {
+    info(`Checking title at ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
     const titleEl = panel.querySelector(".animation-detail-title");
-    is(titleEl.textContent, testCase.expectedTitle,
-       `Title of "${ testCase.target }" should be "${ testCase.expectedTitle }"`);
+    is(titleEl.textContent, expectedTitle,
+      `Title of "${ targetClass }" should be "${ expectedTitle }"`);
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animation-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
@@ -7,28 +7,28 @@
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
 
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking animation list and items existence");
   ok(panel.querySelector(".animation-list"),
-     "The animation-list is in the DOM");
+    "The animation-list is in the DOM");
   is(panel.querySelectorAll(".animation-list .animation-item").length,
      animationInspector.state.animations.length,
      "The number of animations displayed matches the number of animations");
 
   info("Checking the background color for the animation list items");
   const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
   const evenColor =
     panel.ownerGlobal.getComputedStyle(animationItemEls[0]).backgroundColor;
   const oddColor =
     panel.ownerGlobal.getComputedStyle(animationItemEls[1]).backgroundColor;
   isnot(evenColor, oddColor,
-        "Background color of an even animation should be different from odd");
+    "Background color of an even animation should be different from odd");
 
   info("Checking list and items existence after select a element which has an animation");
   const animatedNode = await getNodeFront(".animated", inspector);
   await selectNodeAndWaitForAnimations(animatedNode, inspector);
   is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
-     "The number of animations displayed should be 1 for .animated element");
+    "The number of animations displayed should be 1 for .animated element");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animation-target.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
@@ -10,26 +10,25 @@
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking the animation target elements existance");
   const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
   is(animationItemEls.length, animationInspector.state.animations.length,
-     "Number of animation target element should be same to number of animations "
-     + "that displays");
+     "Number of animation target element should be same to number of animations " +
+     "that displays");
 
   for (const animationItemEl of animationItemEls) {
     const animationTargetEl = animationItemEl.querySelector(".animation-target");
     ok(animationTargetEl,
-       "The animation target element should be in each animation item element");
+      "The animation target element should be in each animation item element");
   }
 
   info("Checking the content of animation target");
   await selectNodeAndWaitForAnimations(".animated", inspector);
   const animationTargetEl =
     panel.querySelector(".animation-list .animation-item .animation-target");
   is(animationTargetEl.textContent, "div.ball.animated",
-     "The target element's content is correct");
-  ok(animationTargetEl.querySelector(".objectBox"),
-     "objectBox is in the page exists");
+    "The target element's content is correct");
+  ok(animationTargetEl.querySelector(".objectBox"), "objectBox is in the page exists");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -44,37 +44,37 @@ add_task(async function() {
  *
  * @param {TimeScale} - timeScale
  * @param {Element} - listHeaderEl which is header element
  */
 function assertTimelineTickItems(timeScale, listHeaderEl) {
   const animationTimelineTickListEl =
     listHeaderEl.querySelector(".animation-timeline-tick-list");
   ok(animationTimelineTickListEl,
-     "The animation timeline tick list element should be in header");
+    "The animation timeline tick list element should be in header");
 
   const width = animationTimelineTickListEl.offsetWidth;
   const animationDuration = timeScale.getDuration();
   const minTimeInterval = TIME_GRADUATION_MIN_SPACING * animationDuration / width;
   const interval = findOptimalTimeInterval(minTimeInterval);
   const expectedTickItem = Math.ceil(animationDuration / interval);
 
   const timelineTickItemEls =
     listHeaderEl.querySelectorAll(".animation-timeline-tick-item");
   is(timelineTickItemEls.length, expectedTickItem,
-     "The expected number of timeline ticks were found");
+    "The expected number of timeline ticks were found");
 
   info("Make sure graduations are evenly distributed and show the right times");
   for (const [index, tickEl] of timelineTickItemEls.entries()) {
     const left = parseFloat(tickEl.style.left);
     const expectedPos = index * interval * 100 / animationDuration;
     is(Math.round(left), Math.round(expectedPos),
-       `Graduation ${ index } is positioned correctly`);
+      `Graduation ${ index } is positioned correctly`);
 
     // Note that the distancetoRelativeTime and formatTime functions are tested
     // separately in xpcshell test test_timeScale.js, so we assume that they
     // work here.
     const formattedTime =
       timeScale.formatTime(timeScale.distanceToRelativeTime(expectedPos, width));
     is(tickEl.textContent, formattedTime,
-       `Graduation ${ index } has the right text content`);
+      `Graduation ${ index } has the right text content`);
   }
 }

--- a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
@@ -45,16 +45,17 @@ function formatStopwatchTime(time) {
   let milliseconds = parseInt(time % 1000, 10);
   let seconds = parseInt((time / 1000) % 60, 10);
   let minutes = parseInt((time / (1000 * 60)), 10);
 
   let pad = (nb, max) => {
     if (nb < max) {
       return new Array((max + "").length - (nb + "").length + 1).join("0") + nb;
     }
+
     return nb;
   };
 
   minutes = pad(minutes, 10);
   seconds = pad(seconds, 10);
   milliseconds = pad(milliseconds, 100);
 
   return `${minutes}:${seconds}.${milliseconds}`;

--- a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
@@ -16,19 +16,19 @@ add_task(async function() {
   await selectNodeAndWaitForAnimations(stillNode, inspector);
 
   ok(panel.querySelector(".animation-error-message"),
      "Element which has animation-error-message class should exist for a still node");
   is(panel.querySelector(".animation-error-message > p").textContent,
      ANIMATION_L10N.getStr("panel.noAnimation"),
      "The correct error message is displayed");
   ok(!panel.querySelector(".animation-list"),
-     "Element which has animations class should not exist for a still node");
+    "Element which has animations class should not exist for a still node");
 
   info("Checking animation list and error message existence for a text node");
   const commentNode = await inspector.walker.previousSibling(stillNode);
   await selectNodeAndWaitForAnimations(commentNode, inspector);
 
   ok(panel.querySelector(".animation-error-message"),
-     "Element which has animation-error-message class should exist for a text node");
+    "Element which has animation-error-message class should exist for a text node");
   ok(!panel.querySelector(".animation-list"),
-     "Element which has animations class should not exist for a text node");
+    "Element which has animations class should not exist for a text node");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
@@ -8,17 +8,17 @@
 // * path segments
 // * fill color by animation type
 // * stop color if the animation type is color
 
 requestLongerTimeout(2);
 
 const TEST_DATA = [
   {
-    targetName: "multi-types",
+    targetClass: "multi-types",
     properties: [
       {
         name: "background-color",
         computedValuePathClass: "color-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 1000, y: 100 },
@@ -82,17 +82,17 @@ const TEST_DATA = [
           { x: 0, y: 0 },
           { x: 500, y: 50 },
           { x: 1000, y: 100 },
         ],
       },
     ],
   },
   {
-    targetName: "multi-types-reverse",
+    targetClass: "multi-types-reverse",
     properties: [
       {
         name: "background-color",
         computedValuePathClass: "color-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 1000, y: 100 },
@@ -156,17 +156,17 @@ const TEST_DATA = [
           { x: 0, y: 100 },
           { x: 500, y: 50 },
           { x: 1000, y: 0 },
         ],
       },
     ],
   },
   {
-    targetName: "middle-keyframe",
+    targetClass: "middle-keyframe",
     properties: [
       {
         name: "background-color",
         computedValuePathClass: "color-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 500, y: 100 },
@@ -244,17 +244,17 @@ const TEST_DATA = [
           { x: 500, y: 100 },
           { x: 750, y: 50 },
           { x: 1000, y: 0 },
         ],
       },
     ],
   },
   {
-    targetName: "steps-keyframe",
+    targetClass: "steps-keyframe",
     properties: [
       {
         name: "background-color",
         computedValuePathClass: "color-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 0, y: 100 },
           { x: 500, y: 100 },
@@ -330,33 +330,33 @@ const TEST_DATA = [
           { x: 500, y: 50 },
           { x: 1000, y: 50 },
           { x: 1000, y: 100 },
         ],
       },
     ],
   },
   {
-    targetName: "steps-effect",
+    targetClass: "steps-effect",
     properties: [
       {
         name: "opacity",
         computedValuePathClass: "distance-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 250, y: 25 },
           { x: 500, y: 50 },
           { x: 750, y: 75 },
           { x: 1000, y: 100 },
         ],
       },
     ],
   },
   {
-    targetName: "frames-keyframe",
+    targetClass: "frames-keyframe",
     properties: [
       {
         name: "opacity",
         computedValuePathClass: "distance-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 199, y: 0 },
           { x: 200, y: 25 },
@@ -367,17 +367,17 @@ const TEST_DATA = [
           { x: 799, y: 75 },
           { x: 800, y: 100 },
           { x: 1000, y: 100 },
         ],
       },
     ],
   },
   {
-    targetName: "narrow-offsets",
+    targetClass: "narrow-offsets",
     properties: [
       {
         name: "opacity",
         computedValuePathClass: "distance-path",
         expectedPathSegments: [
           { x: 0, y: 0 },
           { x: 100, y: 100 },
           { x: 110, y: 100 },
@@ -386,17 +386,17 @@ const TEST_DATA = [
           { x: 129.9, y: 50 },
           { x: 130, y: 0 },
           { x: 1000, y: 100 },
         ],
       },
     ],
   },
   {
-    targetName: "duplicate-offsets",
+    targetClass: "duplicate-offsets",
     properties: [
       {
         name: "opacity",
         computedValuePathClass: "distance-path",
         expectedPathSegments: [
           { x: 0, y: 100 },
           { x: 250, y: 100 },
           { x: 499, y: 100 },
@@ -410,29 +410,29 @@ const TEST_DATA = [
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
 
   const { inspector, panel } = await openAnimationInspector();
 
-  for (const { properties, targetName } of TEST_DATA) {
-    info(`Checking keyframes graph for ${ targetName }`);
-    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+  for (const { properties, targetClass } of TEST_DATA) {
+    info(`Checking keyframes graph for ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const property of properties) {
       const {
         name,
         computedValuePathClass,
         expectedPathSegments,
         expectedStopColors,
       } = property;
 
-      const testTarget = `${ name } in ${ targetName }`;
+      const testTarget = `${ name } in ${ targetClass }`;
       info(`Checking keyframes graph for ${ testTarget }`);
       info(`Checking keyframes graph path existence for ${ testTarget }`);
       const keyframesGraphPathEl = panel.querySelector(`.${ name }`);
       ok(keyframesGraphPathEl,
         `The keyframes graph path element of ${ testTarget } should be existence`);
 
       info(`Checking computed value path existence for ${ testTarget }`);
       const computedValuePathEl =

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -5,17 +5,17 @@
 
 // Test for following easing hint in ComputedValuePath.
 // * element existence
 // * path segments
 // * hint text
 
 const TEST_DATA = [
   {
-    targetName: "no-easing",
+    targetClass: "no-easing",
     properties: [
       {
         name: "opacity",
         expectedHints: [
           {
             hint: "linear",
             path: [
               { x: 0, y: 100 },
@@ -23,17 +23,17 @@ const TEST_DATA = [
               { x: 1000, y: 0 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "effect-easing",
+    targetClass: "effect-easing",
     properties: [
       {
         name: "opacity",
         expectedHints: [
           {
             hint: "linear",
             path: [
               { x: 0, y: 100 },
@@ -41,17 +41,17 @@ const TEST_DATA = [
               { x: 1000, y: 0 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "keyframe-easing",
+    targetClass: "keyframe-easing",
     properties: [
       {
         name: "opacity",
         expectedHints: [
           {
             hint: "steps(2)",
             path: [
               { x: 0, y: 100 },
@@ -61,17 +61,17 @@ const TEST_DATA = [
               { x: 1000, y: 0 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "both-easing",
+    targetClass: "both-easing",
     properties: [
       {
         name: "margin-left",
         expectedHints: [
           {
             hint: "steps(1)",
             path: [
               { x: 0, y: 0 },
@@ -94,17 +94,17 @@ const TEST_DATA = [
               { x: 1000, y: 0 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "narrow-keyframes",
+    targetClass: "narrow-keyframes",
     properties: [
       {
         name: "opacity",
         expectedHints: [
           {
             hint: "linear",
             path: [
               { x: 0, y: 0 },
@@ -125,17 +125,17 @@ const TEST_DATA = [
               { x: 1000, y: 100 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "duplicate-keyframes",
+    targetClass: "duplicate-keyframes",
     properties: [
       {
         name: "opacity",
         expectedHints: [
           {
             hint: "linear",
             path: [
               { x: 0, y: 0 },
@@ -157,17 +157,17 @@ const TEST_DATA = [
               { x: 1000, y: 100 },
             ],
           },
         ],
       },
     ],
   },
   {
-    targetName: "color-keyframes",
+    targetClass: "color-keyframes",
     properties: [
       {
         name: "color",
         expectedHints: [
           {
             hint: "ease-in",
             rect: {
               x: 0,
@@ -189,33 +189,28 @@ const TEST_DATA = [
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_easings.html");
 
   const { inspector, panel } = await openAnimationInspector();
 
-  for (const { properties, targetName } of TEST_DATA) {
-    info(`Checking keyframes graph for ${ targetName }`);
-    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+  for (const { properties, targetClass } of TEST_DATA) {
+    info(`Checking keyframes graph for ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
-    for (const property of properties) {
-      const {
-        name,
-        expectedHints,
-      } = property;
-
-      const testTarget = `${ name } in ${ targetName }`;
+    for (const { name, expectedHints } of properties) {
+      const testTarget = `${ name } in ${ targetClass }`;
       info(`Checking easing hint for ${ testTarget }`);
       info(`Checking easing hint existence for ${ testTarget }`);
       const hintEls = panel.querySelectorAll(`.${ name } .hint`);
       is(hintEls.length, expectedHints.length,
-        `Count of easing hint elements of ${ testTarget } `
-        + `should be ${ expectedHints.length }`);
+        `Count of easing hint elements of ${ testTarget } ` +
+        `should be ${ expectedHints.length }`);
 
       for (let i = 0; i < expectedHints.length; i++) {
         const hintTarget = `hint[${ i }] of ${ testTarget }`;
 
         info(`Checking ${ hintTarget }`);
         const hintEl = hintEls[i];
         const expectedHint = expectedHints[i];
 
@@ -243,22 +238,22 @@ add_task(async function() {
         }
 
         info(`Checking interaction for ${ hintTarget }`);
         interactionEl.scrollIntoView(false);
         const win = hintEl.ownerGlobal;
         // Mouse out once from pathEl.
         EventUtils.synthesizeMouse(interactionEl, -1, -1, { type: "mouseout" }, win);
         is(win.getComputedStyle(interactionEl).strokeOpacity, 0,
-          `stroke-opacity of hintEl for ${ hintTarget } should be 0`
-          + " while mouse is out from the element");
+          `stroke-opacity of hintEl for ${ hintTarget } should be 0` +
+          " while mouse is out from the element");
         // Mouse over the pathEl.
         ok(isStrokeChangedByMouseOver(interactionEl, win),
-          `stroke-opacity of hintEl for ${ hintTarget } should be 1`
-          + " while mouse is over the element");
+          `stroke-opacity of hintEl for ${ hintTarget } should be 1` +
+          " while mouse is over the element");
       }
     }
   }
 });
 
 function isStrokeChangedByMouseOver(pathEl, win) {
   const boundingBox = pathEl.getBoundingClientRect();
   const x = boundingBox.width / 2;

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -5,17 +5,17 @@
 
 // Test for following keyframe marker.
 // * element existence
 // * title
 // * and left style
 
 const TEST_DATA = [
   {
-    targetName: "multi-types",
+    targetClass: "multi-types",
     properties: [
       {
         name: "background-color",
         expectedValues: [
           {
             title: "rgb(255, 0, 0)",
             left: "0%",
           },
@@ -101,17 +101,17 @@ const TEST_DATA = [
             title: "translate(100px)",
             left: "100%",
           }
         ],
       },
     ],
   },
   {
-    targetName: "narrow-offsets",
+    targetClass: "narrow-offsets",
     properties: [
       {
         name: "opacity",
         expectedValues: [
           {
             title: "0",
             left: "0%",
           },
@@ -133,44 +133,39 @@ const TEST_DATA = [
   }
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
 
   const { inspector, panel } = await openAnimationInspector();
 
-  for (const { properties, targetName } of TEST_DATA) {
-    info(`Checking keyframe marker for ${ targetName }`);
-    await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+  for (const { properties, targetClass } of TEST_DATA) {
+    info(`Checking keyframe marker for ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
-    for (const property of properties) {
-      const {
-        name,
-        expectedValues,
-      } = property;
-
-      const testTarget = `${ name } in ${ targetName }`;
+    for (const { name, expectedValues } of properties) {
+      const testTarget = `${ name } in ${ targetClass }`;
       info(`Checking keyframe marker for ${ testTarget }`);
       info(`Checking keyframe marker existence for ${ testTarget }`);
       const markerEls = panel.querySelectorAll(`.${ name } .keyframe-marker-item`);
       is(markerEls.length, expectedValues.length,
-        `Count of keyframe marker elements of ${ testTarget } `
-        + `should be ${ expectedValues.length }`);
+        `Count of keyframe marker elements of ${ testTarget } ` +
+        `should be ${ expectedValues.length }`);
 
       for (let i = 0; i < expectedValues.length; i++) {
         const hintTarget = `.keyframe-marker-item[${ i }] of ${ testTarget }`;
 
         info(`Checking ${ hintTarget }`);
         const markerEl = markerEls[i];
         const expectedValue = expectedValues[i];
 
         info(`Checking title in ${ hintTarget }`);
         is(markerEl.getAttribute("title"), expectedValue.title,
-          `title in ${ hintTarget } should be ${ expectedValue.title }`);
+         `title in ${ hintTarget } should be ${ expectedValue.title }`);
 
         info(`Checking left style in ${ hintTarget }`);
         is(markerEl.style.left, expectedValue.left,
-          `left in ${ hintTarget } should be ${ expectedValue.left }`);
+         `left in ${ hintTarget } should be ${ expectedValue.left }`);
       }
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -6,78 +6,81 @@ http://creativecommons.org/publicdomain/
 // Test for following KeyframesProgressBar:
 // * element existence
 // * progress bar position in multi effect timings
 // * progress bar position after changing playback rate
 // * progress bar position when select another animation
 
 requestLongerTimeout(5);
 
-const POSITION_TESTCASES = [
+const TEST_DATA = [
   {
-    targetClassName: "cssanimation-linear",
+    targetClass: "cssanimation-linear",
     scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
     expectedPositions: [0, 0.25, 0.5, 0.75, 0],
   },
   {
-    targetClassName: "easing-step",
+    targetClass: "easing-step",
     scrubberPositions: [0, 0.49, 0.5, 0.99],
     expectedPositions: [0, 0, 0.5, 0.5],
   },
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
     scrubberPositions: [0, 0.33, 0.5],
     expectedPositions: [0, 0, 0.25],
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     scrubberPositions: [0, 0.49, 0.5, 0.75],
     expectedPositions: [0, 0, 0.5, 0.75],
   },
   {
-    targetClassName: "enddelay-positive",
+    targetClass: "enddelay-positive",
     scrubberPositions: [0, 0.66, 0.67, 0.99],
     expectedPositions: [0, 0.99, 0, 0],
   },
   {
-    targetClassName: "enddelay-negative",
+    targetClass: "enddelay-negative",
     scrubberPositions: [0, 0.49, 0.5, 0.99],
     expectedPositions: [0, 0.49, 0, 0],
   },
   {
-    targetClassName: "direction-reverse-with-iterations-infinity",
+    targetClass: "direction-reverse-with-iterations-infinity",
     scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
     expectedPositions: [1, 0.75, 0.5, 0.25, 1],
   },
   {
-    targetClassName: "fill-both-width-delay-iterationstart",
+    targetClass: "fill-both-width-delay-iterationstart",
     scrubberPositions: [0, 0.33, 0.66, 0.833, 1],
     expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking progress bar position in multi effect timings");
 
-  for (const testcase of POSITION_TESTCASES) {
-    info(`Checking progress bar position for ${ testcase.targetClassName }`);
-    await selectNodeAndWaitForAnimations(`.${ testcase.targetClassName }`, inspector);
+  for (const testdata of TEST_DATA) {
+    const {
+      targetClass,
+      scrubberPositions,
+      expectedPositions,
+    } = testdata;
+
+    info(`Checking progress bar position for ${ targetClass }`);
+    await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     info("Checking progress bar existence");
     const areaEl = panel.querySelector(".keyframes-progress-bar-area");
     ok(areaEl, "progress bar area should exist");
     const barEl = areaEl.querySelector(".keyframes-progress-bar");
     ok(barEl, "progress bar should exist");
 
-    const scrubberPositions = testcase.scrubberPositions;
-    const expectedPositions = testcase.expectedPositions;
-
     for (let i = 0; i < scrubberPositions.length; i++) {
       info(`Scrubber position is ${ scrubberPositions[i] }`);
       await clickOnCurrentTimeScrubberController(animationInspector,
                                                  panel, scrubberPositions[i]);
       assertPosition(barEl, areaEl, expectedPositions[i], animationInspector);
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
@@ -32,21 +32,21 @@ add_task(async function() {
   await selectAnimationInspector(inspector);
   await selectNodeAndWaitForAnimations("head", inspector);
   await inspector.toolbox.selectTool("webconsole");
   await selectNode("div", inspector);
   is(animationInspector.state.animations.length, 0,
     "Should not update after selecting another tool");
   await selectAnimationInspector(inspector);
   is(animationInspector.state.animations.length, 1,
-     "Should update after selecting animation inspector");
+    "Should update after selecting animation inspector");
   await assertCurrentTimeUpdated(animationInspector, panel, true);
   await inspector.toolbox.selectTool("webconsole");
   is(animationInspector.state.animations.length, 1,
-     "Should not update after selecting another tool again");
+    "Should not update after selecting another tool again");
   await assertCurrentTimeUpdated(animationInspector, panel, false);
 });
 
 async function assertCurrentTimeUpdated(animationInspector, panel, shouldRunning) {
   let count = 0;
 
   const listener = () => {
     count++;

--- a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -15,31 +15,31 @@ add_task(async function() {
   info("Checking the mutation for add an animation");
   const originalAnimationCount = animationInspector.state.animations.length;
   await setClassAttribute(animationInspector, ".still", "ball no-compositor");
   is(animationInspector.state.animations.length, originalAnimationCount + 1,
     "Count of animation should be plus one to original count");
 
   info("Checking added animation existence even the animation name is duplicated");
   is(getAnimationNameCount(panel, "no-compositor"), 2,
-   "Count of animation should be plus one to original count");
+    "Count of animation should be plus one to original count");
 
   info("Checking the mutation for remove an animation");
   await setClassAttribute(animationInspector, ".compositor-notall", "ball still");
   is(animationInspector.state.animations.length, originalAnimationCount,
-   "Count of animation should be same to original count since we remove an animation");
+    "Count of animation should be same to original count since we remove an animation");
 
   info("Checking the mutation for modify an animation");
   await selectNodeAndWaitForAnimations(".compositor-all", inspector);
   await setStyle(animationInspector, ".compositor-all", "animationDuration", "100s");
   await setStyle(animationInspector, ".compositor-all", "animationIterationCount", 1);
   const summaryGraphPathEl = getSummaryGraphPathElement(panel, "compositor-all");
   is(summaryGraphPathEl.viewBox.baseVal.width, 100000,
-    "Width of summary graph path should be 100000 " +
-    "after modifing the duration and iteration count");
+     "Width of summary graph path should be 100000 " +
+     "after modifing the duration and iteration count");
   await setStyle(animationInspector, ".compositor-all", "animationDelay", "100s");
   is(summaryGraphPathEl.viewBox.baseVal.width, 200000,
     "Width of summary graph path should be 200000 after modifing the delay");
   ok(summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
     "Delay sign element shoud exist");
 });
 
 function getAnimationNameCount(panel, animationName) {

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
@@ -2,58 +2,53 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following AnimationName component works.
 // * element existance
 // * name text
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "cssanimation-normal",
+    targetClass: "cssanimation-normal",
     expectedLabel: "cssanimation",
   },
   {
-    targetClassName: "cssanimation-linear",
+    targetClass: "cssanimation-linear",
     expectedLabel: "cssanimation",
   },
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
     expectedLabel: "test-delay-animation",
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     expectedLabel: "test-negative-delay-animation",
   },
   {
-    targetClassName: "easing-step",
+    targetClass: "easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedLabel,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedLabel } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking animation name element existance for ${ targetClassName }`);
+    info(`Checking animation name element existance for ${ targetClass }`);
     const animationNameEl = animationItemEl.querySelector(".animation-name");
 
     if (expectedLabel) {
       ok(animationNameEl,
-         "The animation name element should be in animation item element");
+        "The animation name element should be in animation item element");
       is(animationNameEl.textContent, expectedLabel,
-         `The animation name should be ${ expectedLabel }`);
+        `The animation name should be ${ expectedLabel }`);
     } else {
       ok(!animationNameEl,
-         "The animation name element should not be in animation item element");
+        "The animation name element should not be in animation item element");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
@@ -11,38 +11,38 @@ add_task(async function() {
 
   const { inspector, panel } = await openAnimationInspector();
 
   info("Select a test node we know has an animation running on the compositor");
   await selectNodeAndWaitForAnimations(".compositor-all", inspector);
 
   const summaryGraphEl = panel.querySelector(".animation-summary-graph");
   ok(summaryGraphEl.classList.contains("compositor"),
-     "The element has the compositor css class");
+    "The element has the compositor css class");
   ok(hasTooltip(summaryGraphEl,
                 ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
      "The element has the right tooltip content");
 
   info("Select a node we know doesn't have an animation on the compositor");
   await selectNodeAndWaitForAnimations(".no-compositor", inspector);
 
   ok(!summaryGraphEl.classList.contains("compositor"),
-     "The element does not have the compositor css class");
+    "The element does not have the compositor css class");
   ok(!hasTooltip(summaryGraphEl,
                  ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
      "The element does not have oncompositor tooltip content");
   ok(!hasTooltip(summaryGraphEl,
                  ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
      "The element does not have oncompositor tooltip content");
 
   info("Select a node we know has animation on the compositor and not on the compositor");
   await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
 
   ok(summaryGraphEl.classList.contains("compositor"),
-     "The element has the compositor css class");
+    "The element has the compositor css class");
   ok(hasTooltip(summaryGraphEl,
                 ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
      "The element has the right tooltip content");
 });
 
 function hasTooltip(summaryGraphEl, expected) {
   const tooltip = summaryGraphEl.getAttribute("title");
   return tooltip.includes(expected);

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -5,114 +5,114 @@
 
 // Test for following ComputedTimingPath component works.
 // * element existance
 // * iterations: path, count
 // * delay: path
 // * fill: path
 // * endDelay: path
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "cssanimation-normal",
+    targetClass: "cssanimation-normal",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 40.851 },
         { x: 500000, y: 80.24},
         { x: 750000, y: 96.05 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "cssanimation-linear",
+    targetClass: "cssanimation-linear",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
         { x: 500000, y: 0 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 50 },
         { x: 1250000, y: 75 },
         { x: 1500000, y: 100 },
         { x: 1500000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 50 },
         { x: 250000, y: 75 },
         { x: 500000, y: 100 },
         { x: 500000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "easing-step",
+    targetClass: "easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 499999, y: 0 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "enddelay-positive",
+    targetClass: "enddelay-positive",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ]
     ],
     expectedEndDelayPath: [
       { x: 1000000, y: 0 },
       { x: 1500000, y: 0 },
     ],
   },
   {
-    targetClassName: "enddelay-negative",
+    targetClass: "enddelay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 500000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "enddelay-with-fill-forwards",
+    targetClass: "enddelay-with-fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
@@ -127,17 +127,17 @@ const TEST_CASES = [
     expectedForwardsPath: [
       { x: 1500000, y: 0 },
       { x: 1500000, y: 100 },
       { x: 2000000, y: 100 },
       { x: 2000000, y: 0 },
     ],
   },
   {
-    targetClassName: "enddelay-with-iterations-infinity",
+    targetClass: "enddelay-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
@@ -149,17 +149,17 @@ const TEST_CASES = [
         { x: 1750000, y: 75 },
         { x: 2000000, y: 100 },
         { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
-    targetClassName: "direction-alternate-with-iterations-infinity",
+    targetClass: "direction-alternate-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
@@ -171,17 +171,17 @@ const TEST_CASES = [
         { x: 1500000, y: 50 },
         { x: 1750000, y: 25 },
         { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
-    targetClassName: "direction-alternate-reverse-with-iterations-infinity",
+    targetClass: "direction-alternate-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 100 },
         { x: 250000, y: 75 },
         { x: 500000, y: 50 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 0 },
@@ -193,17 +193,17 @@ const TEST_CASES = [
         { x: 1750000, y: 75 },
         { x: 2000000, y: 100 },
         { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
-    targetClassName: "direction-reverse-with-iterations-infinity",
+    targetClass: "direction-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 100 },
         { x: 250000, y: 75 },
         { x: 500000, y: 50 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 0 },
@@ -215,30 +215,30 @@ const TEST_CASES = [
         { x: 1500000, y: 50 },
         { x: 1750000, y: 25 },
         { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
-    targetClassName: "fill-backwards",
+    targetClass: "fill-backwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "fill-backwards-with-delay-iterationstart",
+    targetClass: "fill-backwards-with-delay-iterationstart",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 0, y: 50 },
       { x: 500000, y: 50 },
       { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
@@ -251,17 +251,17 @@ const TEST_CASES = [
         { x: 1000000, y: 0 },
         { x: 1250000, y: 25 },
         { x: 1500000, y: 50 },
         { x: 1500000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "fill-both",
+    targetClass: "fill-both",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
@@ -270,17 +270,17 @@ const TEST_CASES = [
     expectedForwardsPath: [
       { x: 1000000, y: 0 },
       { x: 1000000, y: 100 },
       { x: 2000000, y: 100 },
       { x: 2000000, y: 0 },
     ],
   },
   {
-    targetClassName: "fill-both-width-delay-iterationstart",
+    targetClass: "fill-both-width-delay-iterationstart",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 0, y: 50 },
       { x: 500000, y: 50 },
       { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
@@ -297,17 +297,17 @@ const TEST_CASES = [
       ]
     ],
     expectedForwardsPath: [
       { x: 1500000, y: 0 },
       { x: 1500000, y: 50 },
     ],
   },
   {
-    targetClassName: "fill-forwards",
+    targetClass: "fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
@@ -316,148 +316,148 @@ const TEST_CASES = [
     expectedForwardsPath: [
       { x: 1000000, y: 0 },
       { x: 1000000, y: 100 },
       { x: 2000000, y: 100 },
       { x: 2000000, y: 0 },
     ],
   },
   {
-    targetClassName: "iterationstart",
+    targetClass: "iterationstart",
     expectedIterationPathList: [
       [
         { x: 0, y: 50 },
         { x: 250000, y: 75 },
         { x: 500000, y: 100 },
         { x: 500000, y: 0 },
       ],
       [
         { x: 500000, y: 0 },
         { x: 750000, y: 25 },
         { x: 1000000, y: 50 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "no-compositor",
+    targetClass: "no-compositor",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 750000, y: 75 },
         { x: 1000000, y: 100 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "keyframes-easing-step",
+    targetClass: "keyframes-easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 499999, y: 0 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
         { x: 1000000, y: 0 },
       ]
     ],
   },
   {
-    targetClassName: "narrow-keyframes",
+    targetClass: "narrow-keyframes",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 100000, y: 10 },
         { x: 110000, y: 10 },
         { x: 115000, y: 10 },
         { x: 129999, y: 10 },
         { x: 130000, y: 13 },
         { x: 135000, y: 13.5 },
       ]
     ],
   },
   {
-    targetClassName: "duplicate-offsets",
+    targetClass: "duplicate-offsets",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 250000, y: 25 },
         { x: 500000, y: 50 },
         { x: 999999, y: 50 },
       ]
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
+  for (const testData of TEST_DATA) {
     const {
       expectedDelayPath,
       expectedEndDelayPath,
       expectedForwardsPath,
       expectedIterationPathList,
       isInfinity,
-      targetClassName,
-    } = testCase;
+      targetClass,
+    } = testData;
 
     const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    info(`Checking computed timing path existance for ${ targetClassName }`);
+    info(`Checking computed timing path existance for ${ targetClass }`);
     const computedTimingPathEl =
       animationItemEl.querySelector(".animation-computed-timing-path");
     ok(computedTimingPathEl,
        "The computed timing path element should be in each animation item element");
 
-    info(`Checking delay path for ${ targetClassName }`);
+    info(`Checking delay path for ${ targetClass }`);
     const delayPathEl = computedTimingPathEl.querySelector(".animation-delay-path");
 
     if (expectedDelayPath) {
       ok(delayPathEl, "delay path should be existance");
       assertPathSegments(delayPathEl, true, expectedDelayPath);
     } else {
       ok(!delayPathEl, "delay path should not be existance");
     }
 
-    info(`Checking iteration path list for ${ targetClassName }`);
+    info(`Checking iteration path list for ${ targetClass }`);
     const iterationPathEls =
       computedTimingPathEl.querySelectorAll(".animation-iteration-path");
     is(iterationPathEls.length, expectedIterationPathList.length,
        `Number of iteration path should be ${ expectedIterationPathList.length }`);
 
     for (const [j, iterationPathEl] of iterationPathEls.entries()) {
       assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);
 
-      info(`Checking infinity ${ targetClassName }`);
+      info(`Checking infinity ${ targetClass }`);
       if (isInfinity && j >= 1) {
         ok(iterationPathEl.classList.contains("infinity"),
            "iteration path should have 'infinity' class");
       } else {
         ok(!iterationPathEl.classList.contains("infinity"),
            "iteration path should not have 'infinity' class");
       }
     }
 
-    info(`Checking endDelay path for ${ targetClassName }`);
+    info(`Checking endDelay path for ${ targetClass }`);
     const endDelayPathEl = computedTimingPathEl.querySelector(".animation-enddelay-path");
 
     if (expectedEndDelayPath) {
       ok(endDelayPathEl, "endDelay path should be existance");
       assertPathSegments(endDelayPathEl, true, expectedEndDelayPath);
     } else {
       ok(!endDelayPathEl, "endDelay path should not be existance");
     }
 
-    info(`Checking forwards fill path for ${ targetClassName }`);
+    info(`Checking forwards fill path for ${ targetClass }`);
     const forwardsPathEl =
       computedTimingPathEl.querySelector(".animation-fill-forwards-path");
 
     if (expectedForwardsPath) {
       ok(forwardsPathEl, "forwards path should be existance");
       assertPathSegments(forwardsPathEl, true, expectedForwardsPath);
     } else {
       ok(!forwardsPathEl, "forwards path should not be existance");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
@@ -9,15 +9,15 @@ add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking the path for different time scale");
   await selectNodeAndWaitForAnimations(".animated", inspector);
   const pathStringA = panel.querySelector(".animation-iteration-path").getAttribute("d");
 
   info("Select animation which has different time scale from no-compositor");
-  await selectNodeAndWaitForAnimations("#endDelayed", inspector);
+  await selectNodeAndWaitForAnimations(".end-delay", inspector);
 
   info("Select no-compositor again");
   await selectNodeAndWaitForAnimations(".animated", inspector);
   const pathStringB = panel.querySelector(".animation-iteration-path").getAttribute("d");
   is(pathStringA, pathStringB, "Path string should be same even change the time scale");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@@ -4,84 +4,79 @@
 "use strict";
 
 // Test for following DelaySign component works.
 // * element existance
 // * left position
 // * width
 // * additinal class
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
     expectedResult: {
       left: "25%",
       width: "25%",
     },
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     expectedResult: {
       additionalClass: "negative",
       left: "0%",
       width: "25%",
     },
   },
   {
-    targetClassName: "fill-backwards-with-delay-iterationstart",
+    targetClass: "fill-backwards-with-delay-iterationstart",
     expectedResult: {
       additionalClass: "fill",
       left: "25%",
       width: "25%",
     },
   },
   {
-    targetClassName: "fill-both",
+    targetClass: "fill-both",
   },
   {
-    targetClassName: "fill-both-width-delay-iterationstart",
+    targetClass: "fill-both-width-delay-iterationstart",
     expectedResult: {
       additionalClass: "fill",
       left: "25%",
       width: "25%",
     },
   },
   {
-    targetClassName: "keyframes-easing-step",
+    targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedResult,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedResult } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking delay sign existance for ${ targetClassName }`);
+    info(`Checking delay sign existance for ${ targetClass }`);
     const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
 
     if (expectedResult) {
       ok(delaySignEl, "The delay sign element should be in animation item element");
 
       is(delaySignEl.style.left, expectedResult.left,
-         `Left position should be ${ expectedResult.left }`);
+        `Left position should be ${ expectedResult.left }`);
       is(delaySignEl.style.width, expectedResult.width,
-         `Width should be ${ expectedResult.width }`);
+        `Width should be ${ expectedResult.width }`);
 
       if (expectedResult.additionalClass) {
         ok(delaySignEl.classList.contains(expectedResult.additionalClass),
-           `delay sign element should have ${ expectedResult.additionalClass } class`);
+          `delay sign element should have ${ expectedResult.additionalClass } class`);
       } else {
         ok(!delaySignEl.classList.contains(expectedResult.additionalClass),
            "delay sign element should not have " +
            `${ expectedResult.additionalClass } class`);
       }
     } else {
       ok(!delaySignEl, "The delay sign element should not be in animation item element");
     }

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@@ -2,59 +2,54 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following EffectTimingPath component works.
 // * element existance
 // * path
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "cssanimation-linear",
+    targetClass: "cssanimation-linear",
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
   },
   {
-    targetClassName: "easing-step",
+    targetClass: "easing-step",
     expectedPath: [
       { x: 0, y: 0 },
       { x: 499999, y: 0 },
       { x: 500000, y: 50 },
       { x: 999999, y: 50 },
       { x: 1000000, y: 0 },
     ],
   },
   {
-    targetClassName: "keyframes-easing-step",
+    targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedPath,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedPath } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking effect timing path existance for ${ targetClassName }`);
+    info(`Checking effect timing path existance for ${ targetClass }`);
     const effectTimingPathEl =
       animationItemEl.querySelector(".animation-effect-timing-path");
 
     if (expectedPath) {
       ok(effectTimingPathEl,
-         "The effect timing path element should be in animation item element");
+        "The effect timing path element should be in animation item element");
       const pathEl = effectTimingPathEl.querySelector(".animation-iteration-path");
       assertPathSegments(pathEl, false, expectedPath);
     } else {
       ok(!effectTimingPathEl,
-         "The effect timing path element should not be in animation item element");
+        "The effect timing path element should not be in animation item element");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@@ -4,79 +4,74 @@
 "use strict";
 
 // Test for following EndDelaySign component works.
 // * element existance
 // * left position
 // * width
 // * additinal class
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "enddelay-positive",
+    targetClass: "enddelay-positive",
     expectedResult: {
       left: "75%",
       width: "25%",
     },
   },
   {
-    targetClassName: "enddelay-negative",
+    targetClass: "enddelay-negative",
     expectedResult: {
       additionalClass: "negative",
       left: "50%",
       width: "25%",
     },
   },
   {
-    targetClassName: "enddelay-with-fill-forwards",
+    targetClass: "enddelay-with-fill-forwards",
     expectedResult: {
       additionalClass: "fill",
       left: "75%",
       width: "25%",
     },
   },
   {
-    targetClassName: "enddelay-with-iterations-infinity",
+    targetClass: "enddelay-with-iterations-infinity",
   },
   {
-    targetClassName: "keyframes-easing-step",
+    targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedResult,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedResult } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking endDelay sign existance for ${ targetClassName }`);
+    info(`Checking endDelay sign existance for ${ targetClass }`);
     const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");
 
     if (expectedResult) {
       ok(endDelaySignEl, "The endDelay sign element should be in animation item element");
 
       is(endDelaySignEl.style.left, expectedResult.left,
-         `Left position should be ${ expectedResult.left }`);
+        `Left position should be ${ expectedResult.left }`);
       is(endDelaySignEl.style.width, expectedResult.width,
-         `Width should be ${ expectedResult.width }`);
+        `Width should be ${ expectedResult.width }`);
 
       if (expectedResult.additionalClass) {
         ok(endDelaySignEl.classList.contains(expectedResult.additionalClass),
-           `endDelay sign element should have ${ expectedResult.additionalClass } class`);
+          `endDelay sign element should have ${ expectedResult.additionalClass } class`);
       } else {
         ok(!endDelaySignEl.classList.contains(expectedResult.additionalClass),
            "endDelay sign element should not have " +
            `${ expectedResult.additionalClass } class`);
       }
     } else {
       ok(!endDelaySignEl,
-         "The endDelay sign element should not be in animation item element");
+        "The endDelay sign element should not be in animation item element");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@@ -2,52 +2,47 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following NegativeDelayPath component works.
 // * element existance
 // * path
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     expectedPath: [
       { x: -500000, y: 0 },
       { x: -250000, y: 25 },
       { x: 0, y: 50 },
       { x: 0, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedPath,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedPath } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking negative delay path existence for ${ targetClassName }`);
+    info(`Checking negative delay path existence for ${ targetClass }`);
     const negativeDelayPathEl =
       animationItemEl.querySelector(".animation-negative-delay-path");
 
     if (expectedPath) {
       ok(negativeDelayPathEl,
-         "The negative delay path element should be in animation item element");
+        "The negative delay path element should be in animation item element");
       const pathEl = negativeDelayPathEl.querySelector("path");
       assertPathSegments(pathEl, true, expectedPath);
     } else {
       ok(!negativeDelayPathEl,
-         "The negative delay path element should not be in animation item element");
+        "The negative delay path element should not be in animation item element");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@@ -2,53 +2,48 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for following NegativeEndDelayPath component works.
 // * element existance
 // * path
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "enddelay-positive",
+    targetClass: "enddelay-positive",
   },
   {
-    targetClassName: "enddelay-negative",
+    targetClass: "enddelay-negative",
     expectedPath: [
       { x: 500000, y: 0 },
       { x: 500000, y: 50 },
       { x: 750000, y: 75 },
       { x: 1000000, y: 100 },
       { x: 1000000, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedPath,
-      targetClassName,
-    } = testCase;
+  for (const { targetClass, expectedPath } of TEST_DATA) {
+    const animationItemEl =
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
 
-    const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
-    info(`Checking negative endDelay path existance for ${ targetClassName }`);
+    info(`Checking negative endDelay path existance for ${ targetClass }`);
     const negativeEndDelayPathEl =
       animationItemEl.querySelector(".animation-negative-end-delay-path");
 
     if (expectedPath) {
       ok(negativeEndDelayPathEl,
-         "The negative endDelay path element should be in animation item element");
+        "The negative endDelay path element should be in animation item element");
       const pathEl = negativeEndDelayPathEl.querySelector("path");
       assertPathSegments(pathEl, true, expectedPath);
     } else {
       ok(!negativeEndDelayPathEl,
-         "The negative endDelay path element should not be in animation item element");
+        "The negative endDelay path element should not be in animation item element");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -1,202 +1,197 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test for existance and content of tooltip on summary graph element.
 
-const TEST_CASES = [
+const TEST_DATA = [
   {
-    targetClassName: "cssanimation-normal",
+    targetClass: "cssanimation-normal",
     expectedResult: {
       nameAndType: "cssanimation - CSS Animation",
       duration: "1,000s",
     },
   },
   {
-    targetClassName: "cssanimation-linear",
+    targetClass: "cssanimation-linear",
     expectedResult: {
       nameAndType: "cssanimation - CSS Animation",
       duration: "1,000s",
       animationTimingFunction: "linear",
     },
   },
   {
-    targetClassName: "delay-positive",
+    targetClass: "delay-positive",
     expectedResult: {
       nameAndType: "test-delay-animation - Script Animation",
       delay: "500s",
       duration: "1,000s",
     },
   },
   {
-    targetClassName: "delay-negative",
+    targetClass: "delay-negative",
     expectedResult: {
       nameAndType: "test-negative-delay-animation - Script Animation",
       delay: "-500s",
       duration: "1,000s",
     },
   },
   {
-    targetClassName: "easing-step",
+    targetClass: "easing-step",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       easing: "steps(2)",
     },
   },
   {
-    targetClassName: "enddelay-positive",
+    targetClass: "enddelay-positive",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       endDelay: "500s",
     },
   },
   {
-    targetClassName: "enddelay-negative",
+    targetClass: "enddelay-negative",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       endDelay: "-500s",
     },
   },
   {
-    targetClassName: "enddelay-with-fill-forwards",
+    targetClass: "enddelay-with-fill-forwards",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       endDelay: "500s",
       fill: "forwards",
     },
   },
   {
-    targetClassName: "enddelay-with-iterations-infinity",
+    targetClass: "enddelay-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       endDelay: "500s",
       iterations: "\u221E",
     },
   },
   {
-    targetClassName: "direction-alternate-with-iterations-infinity",
+    targetClass: "direction-alternate-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       direction: "alternate",
       iterations: "\u221E",
     },
   },
   {
-    targetClassName: "direction-alternate-reverse-with-iterations-infinity",
+    targetClass: "direction-alternate-reverse-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       direction: "alternate-reverse",
       iterations: "\u221E",
     },
   },
   {
-    targetClassName: "direction-reverse-with-iterations-infinity",
+    targetClass: "direction-reverse-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       direction: "reverse",
       iterations: "\u221E",
     },
   },
   {
-    targetClassName: "fill-backwards",
+    targetClass: "fill-backwards",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       fill: "backwards",
     },
   },
   {
-    targetClassName: "fill-backwards-with-delay-iterationstart",
+    targetClass: "fill-backwards-with-delay-iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
       delay: "500s",
       duration: "1,000s",
       fill: "backwards",
       iterationStart: "0.5",
     },
   },
   {
-    targetClassName: "fill-both",
+    targetClass: "fill-both",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       fill: "both",
     },
   },
   {
-    targetClassName: "fill-both-width-delay-iterationstart",
+    targetClass: "fill-both-width-delay-iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
       delay: "500s",
       duration: "1,000s",
       fill: "both",
       iterationStart: "0.5",
     },
   },
   {
-    targetClassName: "fill-forwards",
+    targetClass: "fill-forwards",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       fill: "forwards",
     },
   },
   {
-    targetClassName: "iterationstart",
+    targetClass: "iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
       iterationStart: "0.5",
     },
   },
   {
-    targetClassName: "no-compositor",
+    targetClass: "no-compositor",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
     },
   },
   {
-    targetClassName: "keyframes-easing-step",
+    targetClass: "keyframes-easing-step",
     expectedResult: {
       nameAndType: "Script Animation",
       duration: "1,000s",
     },
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();
 
-  for (const testCase of TEST_CASES) {
-    const {
-      expectedResult,
-      targetClassName,
-    } = testCase;
-
+  for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
-      findAnimationItemElementsByTargetClassName(panel, targetClassName);
+      findAnimationItemElementsByTargetClassName(panel, targetClass);
     const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
 
-    info(`Checking tooltip for ${ targetClassName }`);
+    info(`Checking tooltip for ${ targetClass }`);
     ok(summaryGraphEl.hasAttribute("title"),
-       "Summary graph should have 'title' attribute");
+      "Summary graph should have 'title' attribute");
 
     const tooltip = summaryGraphEl.getAttribute("title");
     const {
       animationTimingFunction,
       delay,
       easing,
       endDelay,
       direction,
@@ -209,17 +204,17 @@ add_task(async function() {
 
     ok(tooltip.startsWith(nameAndType), "Tooltip should start with name and type");
 
     if (animationTimingFunction) {
       const expected = `Animation timing function: ${ animationTimingFunction }`;
       ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
     } else {
       ok(!tooltip.includes("Animation timing function:"),
-         "Tooltip should not include animation timing function");
+        "Tooltip should not include animation timing function");
     }
 
     if (delay) {
       const expected = `Delay: ${ delay }`;
       ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
     } else {
       ok(!tooltip.includes("Delay:"), "Tooltip should not include delay");
     }
@@ -266,12 +261,12 @@ add_task(async function() {
       ok(!tooltip.includes("Repeats:"), "Tooltip should not include iterations");
     }
 
     if (iterationStart) {
       const expected = `Iteration start: ${ iterationStart }`;
       ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
     } else {
       ok(!tooltip.includes("Iteration start:"),
-         "Tooltip should not include iterationStart");
+        "Tooltip should not include iterationStart");
     }
   }
 });

--- a/devtools/client/inspector/animation/test/doc_multi_easings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -10,17 +10,17 @@
     </style>
   </head>
   <body>
     <script>
     "use strict";
 
     function createAnimation(name, keyframes, effectEasing) {
       const div = document.createElement("div");
-      div.id = name;
+      div.classList.add(name);
       document.body.appendChild(div);
 
       const effect = {
         duration: 100000,
         fill: "forwards"
       };
 
       if (effectEasing) {

--- a/devtools/client/inspector/animation/test/doc_multi_keyframes.html
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -10,17 +10,17 @@
     </style>
   </head>
   <body>
     <script>
     "use strict";
 
     function createAnimation(name, keyframes, effectEasing) {
       const div = document.createElement("div");
-      div.id = name;
+      div.classList.add(name);
       document.body.appendChild(div);
 
       const effect = {
         duration: 100000,
         fill: "forwards"
       };
 
       if (effectEasing) {

--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -149,26 +149,26 @@
   <div class="ball animated"></div>
   <div class="ball multi"></div>
   <div class="ball delayed"></div>
   <div class="ball multi-finite"></div>
   <div class="ball short"></div>
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
   <div class="ball no-compositor"></div>
-  <div class="ball" id="endDelayed"></div>
+  <div class="ball end-delay"></div>
   <div class="ball compositor-all"></div>
   <div class="ball compositor-notall"></div>
   <div class="ball longhand"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";
 
-    var el = document.getElementById("endDelayed");
-    let effect = new KeyframeEffect(el, [
+    const el = document.querySelector(".end-delay");
+    const effect = new KeyframeEffect(el, [
       { opacity: 0, offset: 0 },
       { opacity: 1, offset: 1 }
     ], { duration: 1000000, endDelay: 500000, fill: "none" });
-    let animation = new Animation(effect, document.timeline);
+    const animation = new Animation(effect, document.timeline);
     animation.play();
   </script>
 </body>
 </html>