--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -1,14 +1,18 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
+const { LocalizationHelper } = require("devtools/client/shared/l10n");
+const STRINGS_URI = "chrome://global/locale/layout_errors.properties";
+const L10N = new LocalizationHelper(STRINGS_URI);
+
 // Test that when an animation is selected, its list of animated properties is
 // displayed below it.
 
 const EXPECTED_PROPERTIES = [
   "background-color",
   "background-position",
   "background-size",
   "border-bottom-left-radius",
@@ -36,16 +40,19 @@ add_task(function* () {
 
   ok(isNodeVisible(propertiesList),
      "The list of properties panel is shown");
   ok(propertiesList.querySelectorAll(".property").length,
      "The list of properties panel actually contains properties");
   ok(hasExpectedProperties(propertiesList),
      "The list of properties panel contains the right properties");
 
+  ok(hasExpectedWarnings(propertiesList),
+     "The list of properties panel contains the right warnings");
+
   info("Click to unselect the animation");
   yield clickOnAnimation(panel, 0, true);
 
   ok(!isNodeVisible(propertiesList),
      "The list of properties panel is hidden again");
 });
 
 function hasExpectedProperties(containerEl) {
@@ -60,8 +67,19 @@ function hasExpectedProperties(container
   for (let i = 0; i < names.length; i++) {
     if (names[i] !== EXPECTED_PROPERTIES[i]) {
       return false;
     }
   }
 
   return true;
 }
+
+function hasExpectedWarnings(containerEl) {
+  let warnings = [...containerEl.querySelectorAll(".warning")];
+  for (let warning of warnings) {
+    if (warning.getAttribute("title") ==
+         L10N.getStr("AnimationWarningTransformWithGeometricProperties")) {
+      return false;
+    }
+  }
+  return true;
+}

--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -20,28 +20,43 @@ add_task(function* () {
   let timeline = panel.animationsTimelineComponent;
 
   info("Select a test node we know has an animation running on the compositor");
   yield selectNodeAndWaitForAnimations(".animated", 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),
+  ok(hasTooltip(animationEl,
+                L10N.getStr("player.allPropertiesOnCompositorTooltip")),
      "The animation element has the right tooltip content");
 
   info("Select a node we know doesn't have an animation on the compositor");
   yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
 
   animationEl = timeline.animationsEl.querySelector(".animation");
   ok(!animationEl.classList.contains("fast-track"),
      "The animation element does not have the fast-track css class");
-  ok(!hasTooltip(animationEl),
+  ok(!hasTooltip(animationEl,
+                 L10N.getStr("player.allPropertiesOnCompositorTooltip")),
+     "The animation element does not have oncompositor tooltip content");
+  ok(!hasTooltip(animationEl,
+                 L10N.getStr("player.somePropertiesOnCompositorTooltip")),
+     "The animation element does not have oncompositor tooltip content");
+
+  info("Select a node we know has animation on the compositor and not on the" +
+       " compositor");
+  yield selectNodeAndWaitForAnimations(".compositor-notall", inspector);
+
+  animationEl = timeline.animationsEl.querySelector(".animation");
+  ok(animationEl.classList.contains("fast-track"),
+     "The animation element has the fast-track css class");
+  ok(hasTooltip(animationEl,
+                L10N.getStr("player.somePropertiesOnCompositorTooltip")),
      "The animation element has the right tooltip content");
 });
 
-function hasTooltip(animationEl) {
+function hasTooltip(animationEl, expected) {
   let el = animationEl.querySelector(".name");
   let tooltip = el.getAttribute("title");
 
-  let expected = L10N.getStr("player.runningOnCompositorTooltip");
   return tooltip.indexOf(expected) !== -1;
 }

--- 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-notall {
+      animation: compositor-notall 2s infinite;
+    }
+
     @keyframes simple-animation {
       100% {
         transform: translateX(300px);
       }
     }
 
     @keyframes other-animation {
       100% {
@@ -94,30 +98,44 @@
       }
     }
 
     @keyframes no-compositor {
       100% {
         margin-right: 600px;
       }
     }
+
+    @keyframes compositor-notall {
+      from {
+        opacity: 0;
+        width: 0px;
+        transform: translate(0px);
+      }
+      to {
+        opacity: 1;
+        width: 100px;
+        transform: translate(100px);
+      }
+    }
   </style>
 </head>
 <body>
   <!-- Comment node -->
   <div class="ball still"></div>
   <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 compositor-notall"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";
 
     var el = document.getElementById("endDelayed");
     let effect = new KeyframeEffect(el, [
       { opacity: 0, offset: 0 },
       { opacity: 1, offset: 1 }