Bug 1504602: Add tests for jump-* keyword of step function. r=pbro

Depends on D14943 Differential Revision: https://phabricator.services.mozilla.com/D14944 --HG-- extra : moz-landing-system : lando
dothq · Dec 19, 2018 · f893226 · f893226
1 parent 346b735
commit f893226
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/...ector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js b/...ector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -194,6 +194,67 @@ const TEST_DATA = [
       },
     ],
   },
+  {
+    targetClass: "jump-start",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2, jump-start)",
+            path: [
+              { x: 0, y: 50 },
+              { x: 499, y: 50 },
+              { x: 500, y: 0 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "jump-end",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(2)",
+            path: [
+              { x: 0, y: 100 },
+              { x: 499, y: 100 },
+              { x: 500, y: 50 },
+              { x: 999, y: 50 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "jump-both",
+    properties: [
+      {
+        name: "opacity",
+        expectedHints: [
+          {
+            hint: "steps(3, jump-both)",
+            path: [
+              { x: 0, y: 75 },
+              { x: 330, y: 75 },
+              { x: 340, y: 50 },
+              { x: 660, y: 50 },
+              { x: 670, y: 25 },
+              { x: 999, y: 25 },
+              { x: 1000, y: 0 },
+            ],
+          },
+        ],
+      },
+    ],
+  },
 ];
 
 // Prevent test timeout's on windows code coverage: Bug 1470757

diff --git a/devtools/client/inspector/animation/test/doc_multi_easings.html b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -92,6 +92,30 @@
         { color: "lime" },
       ]
     );
+
+    createAnimation(
+      "jump-start",
+      [
+        { opacity: 1, easing: "steps(2, jump-start)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-end",
+      [
+        { opacity: 1, easing: "steps(2, jump-end)" },
+        { opacity: 0 },
+      ],
+    );
+
+    createAnimation(
+      "jump-both",
+      [
+        { opacity: 1, easing: "steps(3, jump-both)" },
+        { opacity: 0 },
+      ],
+    );
     </script>
   </body>
 </html>