Bug 1358011 - Part 2: Add test for frames() timing function. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 07 Jun 2017 10:24:11 +0900
changeset 410927 c8fa4dd82f4649e59dac4b8adcde0af5f7769999
parent 410926 8880a286e471cd8c39493dd3b1c3f9f5e62a9a9f
child 410928 a2c815efed55c04c5d535ff44fa2562c1760852a
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1358011
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1358011 - Part 2: Add test for frames() timing function. r=pbro MozReview-Commit-ID: DkLJMovtXXC
devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
devtools/client/animationinspector/test/doc_multiple_easings.html
devtools/client/animationinspector/test/doc_multiple_property_types.html
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -234,17 +234,36 @@ const TEST_CASES = [
       ]
     }
   },
   {
     "opacity": {
       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 },
       ]
     }
   }
 ];
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_multiple_property_types.html");
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@@ -25,28 +25,39 @@ const TEST_CASES = {
         { x: 100000, y: 1 },
         { x: 100000, y: 0 },
       ]
     ]
   },
   "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 },
       ]
     ]
   },
   "keyframe-easing": {
     expectedKeyframeEasingGraphs: [
       [
         { x: 0, y: 0 },
--- a/devtools/client/animationinspector/test/doc_multiple_easings.html
+++ b/devtools/client/animationinspector/test/doc_multiple_easings.html
@@ -20,17 +20,17 @@
       timing: {
         duration: DURATION
       }
     },
     {
       id: "effect-easing",
       frames: { opacity: [1, 0] },
       timing: {
-        easing: "steps(2)",
+        easing: "frames(5)",
         duration: DURATION
       }
     },
     {
       id: "keyframe-easing",
       frames: [
         {
           offset: 0,
--- a/devtools/client/animationinspector/test/doc_multiple_property_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_property_types.html
@@ -10,16 +10,17 @@
   </style>
 </head>
 <body>
   <div id=target1>1</div>
   <div id=target2>2</div>
   <div id=target3>3</div>
   <div id=target4>4</div>
   <div id=target5>5</div>
+  <div id=target6>6</div>
 
   <script>
   "use strict";
 
   const timing = {
     duration: 1000,
     fill: "forwards"
   };
@@ -85,11 +86,15 @@
       marginLeft: "100px",
       opacity: 1,
       textAlign: "center",
       transform: "translate(100px)" }], timing).pause();
 
   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>