Bug 1448732 - Part 0: Modify variables and code format for consistency. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 03 Apr 2018 12:25:44 +0900
changeset 411517 6ef7e2cd46f5e5d033f823ad4d604112a5aaf832
parent 411516 5506727613da421f524877e817c1fd1529160ab8
child 411518 64c98c77e0f930c5bca2786670d66b0e7d6cf9bf
push id101686
push useraciure@mozilla.com
push dateTue, 03 Apr 2018 21:59:31 +0000
treeherdermozilla-inbound@8d846598d35d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1448732
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1448732 - Part 0: Modify variables and code format for consistency. r=pbro In this patch, modify the following things: * Modify variable name of test data list to "TEST_DATA" * Modify variable name of testing animation target class name to "targetClass" * Some comments format MozReview-Commit-ID: J33RRcm4chO
devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
devtools/client/inspector/animation/test/browser_animation_animation-list.js
devtools/client/inspector/animation/test/browser_animation_animation-target.js
devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
devtools/client/inspector/animation/test/browser_animation_current-time-label.js
devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
devtools/client/inspector/animation/test/doc_multi_easings.html
devtools/client/inspector/animation/test/doc_multi_keyframes.html
devtools/client/inspector/animation/test/doc_simple_animation.html
--- 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>