Bug 1358011 - Part 2: Add test for frames() timing function. r=pbro

MozReview-Commit-ID: DkLJMovtXXC

--HG--
extra : rebase_source : f06f0efadec9f28d9faae545fa2eed9c16c12723

devtools/client/animationinspector/test/browser_animation_animated_properties_path.js

@@ -239,7 +239,26 @@ const TEST_CASES = [
       expectedClass: "opacity",
       expectedValues: [
         { x: 0, y: 0 },
+        { x: 250, y: 0.25 },
         { x: 500, y: 0.5 },
+        { x: 750, y: 0.75 },
+        { x: 1000, y: 1 },
+      ]
+    }
+  },
+  {
+    "opacity": {
+      expectedClass: "opacity",
+      expectedValues: [
+        { x: 0, y: 0 },
+        { x: 199, y: 0 },
+        { x: 200, y: 0.25 },
+        { x: 399, y: 0.25 },
+        { x: 400, y: 0.5 },
+        { x: 599, y: 0.5 },
+        { x: 600, y: 0.75 },
+        { x: 799, y: 0.75 },
+        { x: 800, y: 1 },
         { x: 1000, y: 1 },
       ]
     }

devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js

@@ -30,18 +30,29 @@ const TEST_CASES = {
   "effect-easing": {
     expectedEffectEasingGraph: [
       { x: 0, y: 0 },
-      { x: 49999, y: 0.0 },
-      { x: 50000, y: 0.5 },
-      { x: 99999, y: 0.5 },
+      { x: 19999, y: 0.0 },
+      { x: 20000, y: 0.25 },
+      { x: 39999, y: 0.25 },
+      { x: 40000, y: 0.5 },
+      { x: 59999, y: 0.5 },
+      { x: 60000, y: 0.75 },
+      { x: 79999, y: 0.75 },
+      { x: 80000, y: 1 },
+      { x: 99999, y: 1 },
       { x: 100000, y: 0 },
     ],
     expectedKeyframeEasingGraphs: [
       [
         { x: 0, y: 0 },
-        { x: 49999, y: 0.0 },
-        { x: 50000, y: 0.5 },
-        { x: 99999, y: 0.5 },
-        { x: 100000, y: 1 },
+        { x: 19999, y: 0.0 },
+        { x: 20000, y: 0.25 },
+        { x: 39999, y: 0.25 },
+        { x: 40000, y: 0.5 },
+        { x: 59999, y: 0.5 },
+        { x: 60000, y: 0.75 },
+        { x: 79999, y: 0.75 },
+        { x: 80000, y: 1 },
+        { x: 99999, y: 1 },
         { x: 100000, y: 0 },
       ]
     ]

devtools/client/animationinspector/test/doc_multiple_easings.html

@@ -25,7 +25,7 @@
       id: "effect-easing",
       frames: { opacity: [1, 0] },
       timing: {
-        easing: "steps(2)",
+        easing: "frames(5)",
         duration: DURATION
       }
     },

devtools/client/animationinspector/test/doc_multiple_property_types.html

@@ -15,6 +15,7 @@
   <div id=target3>3</div>
   <div id=target4>4</div>
   <div id=target5>5</div>
+  <div id=target6>6</div>
 
   <script>
   "use strict";
@@ -90,6 +91,10 @@
   timing.easing = "steps(2)";
   document.querySelector("#target5").animate(
     [{ opacity: 0 }, { opacity: 1 }], timing).pause();
+
+  timing.easing = "linear";
+  document.querySelector("#target6").animate(
+    [{ opacity: 0, easing: "frames(5)" }, { opacity: 1 }], timing).pause();
   </script>
 </body>
 </html>