--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -10,17 +10,17 @@ requestLongerTimeout(2);
 // compositor, they get a special icon and information in the tooltip.
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   info("Select a test node we know has an animation running on the compositor");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".compositor-all", inspector);
 
   let animationEl = timeline.animationsEl.querySelector(".animation");
   ok(animationEl.classList.contains("fast-track"),
      "The animation element has the fast-track css class");
   ok(hasTooltip(animationEl,
                 ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
      "The animation element has the right tooltip content");
 

--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -77,16 +77,20 @@
     .no-compositor {
       top: 0;
       right: 10px;
       background: gold;
 
       animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
     }
 
+    .compositor-all {
+      animation: compositor-all 2s infinite;
+    }
+
     .compositor-notall {
       animation: compositor-notall 2s infinite;
     }
 
     @keyframes simple-animation {
       100% {
         transform: translateX(300px);
       }
@@ -99,16 +103,20 @@
     }
 
     @keyframes no-compositor {
       100% {
         margin-right: 600px;
       }
     }
 
+    @keyframes compositor-all {
+      to { opacity: 0.5 }
+    }
+
     @keyframes compositor-notall {
       from {
         opacity: 0;
         width: 0px;
         transform: translate(0px);
       }
       to {
         opacity: 1;
@@ -125,16 +133,17 @@
   <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 compositor-all"></div>
   <div class="ball compositor-notall"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";
 
     var el = document.getElementById("endDelayed");
     let effect = new KeyframeEffect(el, [
       { opacity: 0, offset: 0 },