Bug 1426194 - Part 2: Add test. r=pbro

MozReview-Commit-ID: 9A0hRjiYGTE

--HG--
extra : rebase_source : 95a5310a5755f951baeabf62ddc8f9c7eb3abe9d

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 },
+      ]
+    }
   }
 ];
 

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* () {

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);

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>