From afb89c13609bdc8abc0c5d5df652eec47efb06bd Mon Sep 17 00:00:00 2001
From: Daisuke Akatsuka <dakatsuka@mozilla.com>
Date: Fri, 22 Dec 2017 00:49:18 +0900
Subject: [PATCH] Bug 1426194 - Part 2: Add test. r=pbro

MozReview-Commit-ID: 9A0hRjiYGTE

--HG--
extra : rebase_source : 95a5310a5755f951baeabf62ddc8f9c7eb3abe9d
---
 ...wser_animation_animated_properties_path.js | 14 +++++++++++
 ...ation_summarygraph_for_multiple_easings.js | 11 ++++++++
 .../test/doc_multiple_easings.html            | 25 +++++++++++++++++++
 .../test/doc_multiple_property_types.html     | 20 +++++++++++++++
 4 files changed, 70 insertions(+)

diff --git a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
index 3a6474cd4049..4b15a501358c 100644
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -315,6 +315,20 @@ const TEST_CASES = [
         { x: 1000, y: 1 },
       ]
     }
+  },
+  {
+    "opacity": {
+      expectedClass: "opacity",
+      expectedValues: [
+        { x: 0, y: 1 },
+        { x: 250, y: 1 },
+        { x: 499, y: 1 },
+        { x: 500, y: 1 },
+        { x: 500, y: 0 },
+        { x: 750, y: 0.5 },
+        { x: 1000, y: 1 },
+      ]
+    }
   }
 ];
 
diff --git a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
index 7b12b78105a1..1cbe957eea94 100644
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@@ -130,6 +130,17 @@ const TEST_CASES = {
       ]
     ]
   },
+  "duplicate-offsets": {
+    expectedKeyframeEasingGraphs: [
+      [
+        { x: 0, y: 0 },
+        { x: 25000, y: 0.25 },
+        { x: 50000, y: 0.5 },
+        { x: 75000, y: 0.5 },
+        { x: 99999, y: 0.5 },
+      ]
+    ]
+  },
 };
 
 add_task(function* () {
diff --git a/devtools/client/animationinspector/test/doc_multiple_easings.html b/devtools/client/animationinspector/test/doc_multiple_easings.html
index 8a2e8e115eab..a35b714afe5a 100644
--- a/devtools/client/animationinspector/test/doc_multiple_easings.html
+++ b/devtools/client/animationinspector/test/doc_multiple_easings.html
@@ -149,6 +149,31 @@
         duration: DURATION,
       }
     },
+    {
+      id: "duplicate-offsets",
+      frames: [
+        {
+          offset: 0,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          opacity: 1,
+        },
+        {
+          offset: 0.5,
+          easing: "steps(1)",
+          opacity: 0,
+        },
+        {
+          offset: 1,
+          opacity: 1,
+        },
+      ],
+      timing: {
+        duration: DURATION,
+      }
+    },
   ].forEach(({ id, frames, timing }) => {
     const target = document.createElement("div");
     document.body.appendChild(target);
diff --git a/devtools/client/animationinspector/test/doc_multiple_property_types.html b/devtools/client/animationinspector/test/doc_multiple_property_types.html
index 9fcd152c712a..99b274e80441 100644
--- a/devtools/client/animationinspector/test/doc_multiple_property_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_property_types.html
@@ -17,6 +17,7 @@
   <div id=target5>5</div>
   <div id=target6>6</div>
   <div id=target7>7</div>
+  <div id=target8>8</div>
 
   <script>
   "use strict";
@@ -121,6 +122,25 @@
         offset: 0.13,
       },
     ], timing).pause();
+
+  document.querySelector("#target8").animate(
+    [
+      {
+        opacity: 1,
+      },
+      {
+        opacity: 1,
+        offset: 0.5,
+      },
+      {
+        opacity: 0,
+        offset: 0.5,
+      },
+      {
+        opacity: 1,
+        offset: 1,
+      },
+    ], timing).pause();
   </script>
 </body>
 </html>