--- a/devtools/client/animationinspector/test/browser.ini
+++ b/devtools/client/animationinspector/test/browser.ini
@@ -29,16 +29,17 @@ support-files =
 [browser_animation_animated_properties_displayed.js]
 [browser_animation_animated_properties_for_delayed_starttime_animations.js]
 [browser_animation_animated_properties_path.js]
 [browser_animation_animated_properties_progress_indicator.js]
 [browser_animation_click_selects_animation.js]
 [browser_animation_controller_exposes_document_currentTime.js]
 [browser_animation_detail_displayed.js]
 skip-if = os == "linux" && !debug # Bug 1234567
+[browser_animation_detail_easings.js]
 [browser_animation_empty_on_invalid_nodes.js]
 [browser_animation_keyframe_markers.js]
 [browser_animation_mutations_with_same_names.js]
 [browser_animation_panel_exists.js]
 [browser_animation_participate_in_inspector_update.js]
 [browser_animation_playerFronts_are_refreshed.js]
 [browser_animation_playerWidgets_appear_on_panel_init.js]
 [browser_animation_playerWidgets_target_nodes.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/animationinspector/test/browser_animation_detail_easings.js
@@ -0,0 +1,116 @@
+/* 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";
+
+requestLongerTimeout(5);
+
+// This is a test for displaying the easing of keyframes.
+// Checks easing text which is displayed as popup and
+// the path which emphasises by mouseover.
+
+const TEST_CASES = {
+  "no-easing": {
+    opacity: {
+      expectedValues: ["linear"],
+    }
+  },
+  "effect-easing": {
+    opacity: {
+      expectedValues: ["linear"],
+    }
+  },
+  "keyframe-easing": {
+    opacity: {
+      expectedValues: ["steps(2)"],
+    }
+  },
+  "both-easing": {
+    opacity: {
+      expectedValues: ["steps(2)"],
+    }
+  },
+  "many-keyframes": {
+    backgroundColor: {
+      selector: "rect",
+      expectedValues: ["steps(2)", "ease-out"],
+      noEmphasisPath: true,
+    },
+    opacity: {
+      expectedValues: ["steps(2)", "ease-in", "linear", "ease-out"],
+    }
+  },
+  "css-animations": {
+    opacity: {
+      expectedValues: ["ease", "ease"],
+    }
+  },
+};
+
+add_task(function* () {
+  yield addTab(URL_ROOT + "doc_multiple_easings.html");
+  const { panel } = yield openAnimationInspector();
+
+  const timelineComponent = panel.animationsTimelineComponent;
+  const timeBlocks = getAnimationTimeBlocks(panel);
+  for (let i = 0; i < timeBlocks.length; i++) {
+    yield clickOnAnimation(panel, i);
+
+    const detailComponent = timelineComponent.details;
+    const detailEl = detailComponent.containerEl;
+    const state = detailComponent.animation.state;
+
+    const testcase = TEST_CASES[state.name];
+    if (!testcase) {
+      continue;
+    }
+
+    for (let testProperty in testcase) {
+      const testIdentity = `"${ testProperty }" of "${ state.name }"`;
+      info(`Test for ${ testIdentity }`);
+
+      const testdata = testcase[testProperty];
+      const selector = testdata.selector ? testdata.selector : `.${testProperty}`;
+      const hintEls = detailEl.querySelectorAll(`${ selector }.hint`);
+      const expectedValues = testdata.expectedValues;
+      is(hintEls.length, expectedValues.length,
+         `Length of hints for ${ testIdentity } should be ${expectedValues.length}`);
+
+      for (let j = 0; j < hintEls.length; j++) {
+        const hintEl = hintEls[j];
+        const expectedValue = expectedValues[j];
+
+        info("Test easing text");
+        const gEl = hintEl.closest("g");
+        ok(gEl, `<g> element for ${ testIdentity } should exists`);
+        const titleEl = gEl.querySelector("title");
+        ok(titleEl, `<title> element for ${ testIdentity } should exists`);
+        is(titleEl.textContent, expectedValue,
+           `textContent of <title> for ${ testIdentity } should be ${ expectedValue }`);
+
+        info("Test emphasis path");
+        // Scroll to show the hintEl since the element may be out of displayed area.
+        hintEl.scrollIntoView(false);
+
+        const win = hintEl.ownerDocument.defaultView;
+        // Mouse out once from hintEl.
+        EventUtils.synthesizeMouse(hintEl, -1, -1, {type: "mouseout"}, win);
+        is(win.getComputedStyle(hintEl).strokeOpacity, 0,
+           `stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
+           `while mouse is out from the element`);
+        // Mouse is over the hintEl.
+        EventUtils.synthesizeMouseAtCenter(hintEl, {type: "mouseover"}, win);
+        if (testdata.noEmphasisPath) {
+          is(win.getComputedStyle(hintEl).strokeOpacity, 0,
+             `stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
+             `even while mouse is over the element`);
+        } else {
+          is(win.getComputedStyle(hintEl).strokeOpacity, 1,
+             `stroke-opacity of hintEl for ${ testIdentity } should be 1 ` +
+             `while mouse is over the element`);
+        }
+      }
+    }
+  }
+});

--- a/devtools/client/animationinspector/test/doc_multiple_easings.html
+++ b/devtools/client/animationinspector/test/doc_multiple_easings.html
@@ -1,20 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <style>
+  @keyframes css-animations {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  #css-animations {
+    animation: css-animations 100s;
+  }
+
   div {
     background-color: lime;
     height: 50px;
   }
   </style>
 </head>
 <body>
+  <div id="css-animations"></div>
   <script>
   "use strict";
   const DURATION = 100 * 1000;
   [
     {
       id: "no-easing",
       frames: { opacity: [1, 0] },
       timing: {
@@ -67,16 +84,55 @@
           marginTop: "100px"
         },
       ],
       timing: {
         easing: "steps(10)",
         duration: DURATION,
       }
     },
+    {
+      id: "many-keyframes",
+      frames: [
+        {
+          offset: 0,
+          easing: "steps(2)",
+          opacity: 1,
+          backgroundColor: "red",
+        },
+        {
+          offset: 0.25,
+          easing: "ease-in",
+          opacity: 0.25,
+        },
+        {
+          offset: 0.3,
+          easing: "ease-out",
+          backgroundColor: "blue",
+        },
+        {
+          offset: 0.5,
+          easing: "linear",
+          opacity: 0.5,
+        },
+        {
+          offset: 0.75,
+          easing: "ease-out",
+          opacity: 0.75,
+        },
+        {
+          offset: 1,
+          opacity: 0,
+          backgroundColor: "lime",
+        },
+      ],
+      timing: {
+        duration: DURATION,
+      }
+    },
   ].forEach(({ id, frames, timing }) => {
     const target = document.createElement("div");
     document.body.appendChild(target);
     const effect = new KeyframeEffect(target, frames, timing);
     const animation = new Animation(effect, document.timeline);
     animation.id = id;
     animation.play();
   });