Bug 1448732 - Part 1: Remove extra animated elements before open animation inspector. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 03 Apr 2018 12:26:10 +0900
changeset 411518 64c98c77e0f930c5bca2786670d66b0e7d6cf9bf
parent 411517 6ef7e2cd46f5e5d033f823ad4d604112a5aaf832
child 411519 d51d434ff1a9a4e4e857caad671fba9c98d485c0
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 1: Remove extra animated elements before open animation inspector. r=pbro MozReview-Commit-ID: Ds7fNJKDYc7
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.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_current-time-scrubber.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_auto-stop.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_frame_script.js
devtools/client/inspector/animation/test/head.js
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -1,13 +1,14 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
   doc_custom_playback_rate.html
+  doc_frame_script.js
   doc_multi_easings.html
   doc_multi_keyframes.html
   doc_multi_timings.html
   doc_simple_animation.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/frame-script-utils.js
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@@ -15,16 +15,17 @@ const TEST_DATA = [
   {
     targetClass: "compositor-notall",
     expectedNumber: 3,
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   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 { targetClass, expectedNumber } of TEST_DATA) {
     info(`Checking animated-property-list and items existence at ${ targetClass }`);
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
@@ -18,20 +18,20 @@ const TEST_DATA = [
   { property: "background-size", isUnchanged: true },
   { property: "padding-bottom", isUnchanged: true },
   { property: "padding-right", isUnchanged: true },
   { property: "padding-top", isUnchanged: true },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".longhand"]);
+  const { panel } = await openAnimationInspector();
 
   info("Checking unchanged animated property item");
-  await selectNodeAndWaitForAnimations(".longhand", inspector);
   const itemEls = panel.querySelectorAll(".animated-property-item");
   is(itemEls.length, TEST_DATA.length,
     `Count of animated property item should be ${ TEST_DATA.length }`);
 
   for (let i = 0; i < TEST_DATA.length; i++) {
     const { property, isUnchanged } = TEST_DATA[i];
     const itemEl = itemEls[i];
 
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -19,21 +19,20 @@ const TEST_DATA = [
   },
   {
     property: "width",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".compositor-notall"]);
+  const { panel } = await openAnimationInspector();
 
   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 {
       property,
       isOnCompositor,
--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that whether close button in header of animation detail works.
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
   const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking close button in header of animation detail");
   await clickOnAnimation(animationInspector, panel, 0);
   const detailEl = panel.querySelector("#animation-container .controlled");
   const win = panel.ownerGlobal;
   isnot(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be visibled before clicking close button");
--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@@ -17,16 +17,17 @@ const TEST_DATA = [
   {
     targetClass: "easing-step",
     expectedTitle: "Script Animation",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking title in each header of animation detail");
 
   for (const { targetClass, expectedTitle } of TEST_DATA) {
     info(`Checking title at ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
     const titleEl = panel.querySelector(".animation-detail-title");
--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
@@ -3,17 +3,17 @@
 
 "use strict";
 
 // Test that whether animations detail could be displayed if there is selected animation.
 
 requestLongerTimeout(2);
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking animation detail visibility if animation was unselected");
   const detailEl = panel.querySelector("#animation-container .controlled");
   ok(detailEl, "The detail pane should be in the DOM");
   const win = panel.ownerGlobal;
   is(win.getComputedStyle(detailEl).display, "none", "detailEl should be unvisibled");
 
@@ -22,12 +22,12 @@ add_task(async function() {
   isnot(win.getComputedStyle(detailEl).display, "none", "detailEl should be visibled");
 
   info("Checking animation detail visibility when choose node which has animations");
   await selectNodeAndWaitForAnimations("html", inspector);
   is(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be unvisibled after choose html node");
 
   info("Checking animation detail visibility when choose node which has an animation");
-  await selectNodeAndWaitForAnimations(".cssanimation-normal", inspector);
+  await selectNodeAndWaitForAnimations("div", inspector);
   isnot(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be visibled after choose .cssanimation-normal node");
 });
--- a/devtools/client/inspector/animation/test/browser_animation_animation-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that whether animations ui could be displayed
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept([".animated", ".long"]);
   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");
   is(panel.querySelectorAll(".animation-list .animation-item").length,
      animationInspector.state.animations.length,
      "The number of animations displayed matches the number of animations");
@@ -22,13 +22,12 @@ add_task(async function() {
   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");
 
   info("Checking list and items existence after select a element which has an animation");
-  const animatedNode = await getNodeFront(".animated", inspector);
-  await selectNodeAndWaitForAnimations(animatedNode, inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);
   is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
     "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
@@ -5,16 +5,17 @@
 
 // Test for following AnimationTarget component works.
 // * element existance
 // * number of elements
 // * content of element
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
   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");
 
--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -13,16 +13,17 @@ const { findOptimalTimeInterval } =
   require("devtools/client/inspector/animation/utils/utils");
 
 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
 // AnimationTimeTickList component.
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
   const timeScale = new TimeScale(animationInspector.state.animations);
 
   info("Checking animation list header element existence");
   const listContainerEl = panel.querySelector(".animation-list-container");
   const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
   ok(listHeaderEl, "The header element should be in animation list container element");
 
--- a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
@@ -4,24 +4,24 @@
 "use strict";
 
 // Test for following CurrentTimeLabel component:
 // * element existence
 // * label content at plural timing
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-  const { animationInspector, inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".keyframes-easing-step"]);
+  const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking current time label existence");
   const labelEl = panel.querySelector(".current-time-label");
   ok(labelEl, "current time label should exist");
 
   info("Checking current time label content");
-  await selectNodeAndWaitForAnimations(".keyframes-easing-step", inspector);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
   assertLabelContent(labelEl, animationInspector.state.animations[0].state.currentTime);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.2);
   assertLabelContent(labelEl, animationInspector.state.animations[0].state.currentTime);
 
   info("Checking current time label content during running");
   // Resume
   await clickOnPauseResumeButton(animationInspector, panel);
--- a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
@@ -6,28 +6,28 @@
 // Test for following CurrentTimeScrubber and CurrentTimeScrubberController components:
 // * element existence
 // * scrubber position validity
 // * make animations currentTime to change by click on the controller
 // * mouse drag on the scrubber
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { animationInspector, inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking scrubber controller existence");
   const controllerEl = panel.querySelector(".current-time-scrubber-controller");
   ok(controllerEl, "scrubber controller should exist");
 
   info("Checking scrubber existence");
   const scrubberEl = controllerEl.querySelector(".current-time-scrubber");
   ok(scrubberEl, "scrubber should exist");
 
   info("Checking scrubber changes current time of animation and the position");
-  await selectNodeAndWaitForAnimations(".long", inspector);
   const duration = animationInspector.state.timeScale.getDuration();
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
   assertAnimationsCurrentTime(animationInspector, 0);
   assertPosition(scrubberEl, controllerEl, 0, animationInspector);
 
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
   assertAnimationsCurrentTime(animationInspector, duration);
   assertPosition(scrubberEl, controllerEl, duration, animationInspector);
--- 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
@@ -3,17 +3,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel shows no animation data for invalid or not animated nodes
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept([".animated", ".long", ".still"]);
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking animation list and error message existence for a still node");
   const stillNode = await getNodeFront(".still", inspector);
   await selectNodeAndWaitForAnimations(stillNode, inspector);
 
   ok(panel.querySelector(".animation-error-message"),
      "Element which has animation-error-message class should exist for a still 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
@@ -407,17 +407,16 @@ const TEST_DATA = [
         ],
       },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
-
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframes graph for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const property of properties) {
       const {
--- 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
@@ -186,17 +186,17 @@ const TEST_DATA = [
         ],
       },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_easings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframes graph for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const { name, expectedHints } of properties) {
       const testTarget = `${ name } in ${ targetClass }`;
--- 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
@@ -130,17 +130,17 @@ const TEST_DATA = [
         ],
       },
     ],
   }
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframe marker for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const { name, expectedValues } of properties) {
       const testTarget = `${ name } in ${ targetClass }`;
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -51,16 +51,17 @@ const TEST_DATA = [
     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");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking progress bar position in multi effect timings");
 
   for (const testdata of TEST_DATA) {
     const {
       targetClass,
       scrubberPositions,
--- a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
@@ -7,16 +7,17 @@
 // after end of animation duration except iterations infinity.
 // Test followings:
 // * state of animations and UI components after end of animation duration
 // * state of animations and UI components after end of animation duration
 //   but iteration count is infinity
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".compositor-all", ".long"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking state after end of animation duration");
   await selectNodeAndWaitForAnimations(".long", inspector);
   const pixelsData = getDurationAndRate(animationInspector, panel, 5);
   await clickOnCurrentTimeScrubberController(animationInspector,
                                              panel, 1 - pixelsData.rate);
   await clickOnPauseResumeButton(animationInspector, panel);
--- a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -5,16 +5,18 @@
 
 // Test for following mutations:
 // * add animation
 // * remove animation
 // * modify animation
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept(
+    [".compositor-all", ".compositor-notall", ".no-compositor", ".still"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   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");
 
--- 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
@@ -26,17 +26,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedLabel } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking animation name element existance for ${ targetClass }`);
     const animationNameEl = animationItemEl.querySelector(".animation-name");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
@@ -3,17 +3,18 @@
 
 "use strict";
 
 // Test that when animations displayed in the timeline are running on the
 // compositor, they get a special icon and information in the tooltip.
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept(
+    [".compositor-all", ".compositor-notall", ".no-compositor"]);
   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");
--- 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
@@ -386,17 +386,16 @@ const TEST_DATA = [
         { x: 999999, y: 50 },
       ]
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
   const { panel } = await openAnimationInspector();
 
   for (const testData of TEST_DATA) {
     const {
       expectedDelayPath,
       expectedEndDelayPath,
       expectedForwardsPath,
       expectedIterationPathList,
--- 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
@@ -2,16 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test the Computed Timing Path component for different time scales.
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".end-delay"]);
   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(".end-delay", inspector);
--- 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
@@ -46,17 +46,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking delay sign existance for ${ targetClass }`);
     const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
--- 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
@@ -26,17 +26,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking effect timing path existance for ${ targetClass }`);
     const effectTimingPathEl =
--- 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
@@ -32,23 +32,23 @@ const TEST_DATA = [
       left: "75%",
       width: "25%",
     },
   },
   {
     targetClass: "enddelay-with-iterations-infinity",
   },
   {
-    targetClass: "keyframes-easing-step",
+    targetClass: "delay-negative",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking endDelay sign existance for ${ targetClass }`);
     const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");
--- 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
@@ -19,17 +19,17 @@ const TEST_DATA = [
       { x: 0, y: 50 },
       { x: 0, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking negative delay path existence for ${ targetClass }`);
     const negativeDelayPathEl =
--- 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
@@ -20,17 +20,17 @@ const TEST_DATA = [
       { x: 1000000, y: 100 },
       { x: 1000000, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking negative endDelay path existance for ${ targetClass }`);
     const negativeEndDelayPathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -171,17 +171,17 @@ const TEST_DATA = [
       nameAndType: "Script Animation",
       duration: "1,000s",
     },
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
     const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
 
     info(`Checking tooltip for ${ targetClass }`);
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_frame_script.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals addMessageListener, sendAsyncMessage */
+
+"use strict";
+
+// A helper frame-script for animation inspector.
+
+addMessageListener("Test:RemoveAnimatedElementsExcept", function(msg) {
+  const { selectors } = msg.data;
+
+  for (const animation of content.document.getAnimations()) {
+    if (isRemovableElement(animation, selectors)) {
+      animation.effect.target.remove();
+    }
+  }
+
+  sendAsyncMessage("Test:RemoveAnimatedElementsExcept");
+});
+
+function isRemovableElement(animation, selectors) {
+  for (const selector of selectors) {
+    if (animation.effect.target.matches(selector)) {
+      return false;
+    }
+  }
+
+  return true;
+}
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -80,16 +80,26 @@ addTab = async function(url) {
   const browser = tab.linkedBrowser;
   info("Loading the helper frame script " + FRAME_SCRIPT_URL);
   browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
   loadFrameScriptUtils(browser);
   return tab;
 };
 
 /**
+ * Remove animated elements from document except given selectors.
+ *
+ * @param {Array} selectors
+ * @return {Promise}
+ */
+const removeAnimatedElementsExcept = async function(selectors) {
+  return executeInContent("Test:RemoveAnimatedElementsExcept", { selectors });
+};
+
+/**
  * Click on an animation in the timeline to select it.
  *
  * @param {AnimationInspector} animationInspector.
  * @param {AnimationsPanel} panel
  *        The panel instance.
  * @param {Number} index
  *        The index of the animation to click on.
  */