Bug 1248340 - Part 8: Add tests for transformed-progress and input progress outside [0, 1]. draft
authorBoris Chiou <boris.chiou@gmail.com>
Thu, 02 Mar 2017 17:21:35 +0800
changeset 495031 685679686759cf555be79a17f2fd2580f332b5c4
parent 495030 6a63d2b7fd343b018defefd884ff4a71ac9dd389
child 495032 67a002c4955dd4e9ea69d3c2f704bdd988be5e23
push id48204
push userbmo:boris.chiou@gmail.com
push dateWed, 08 Mar 2017 05:44:16 +0000
bugs1248340
milestone55.0a1
Bug 1248340 - Part 8: Add tests for transformed-progress and input progress outside [0, 1]. MozReview-Commit-ID: 4t3fx3Adkhj
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -159543,17 +159543,17 @@
    "7c9899aa9065ffe6e1206b630124d4939ae53c8f",
    "support"
   ],
   "css-timing-1/cubic-bezier-timing-functions-output.html": [
    "77a45437209844f7e5128bd6aa2efeeacf876187",
    "testharness"
   ],
   "css-timing-1/frames-timing-functions-output.html": [
-   "d3e2e004ba1ccea736c9c655291e9480f954d1db",
+   "fe9a931466f31605f1a09d5f95589cc54ee34663",
    "testharness"
   ],
   "css-timing-1/frames-timing-functions-syntax.html": [
    "7ac5eef9cec74746aa076912285398f525b01c06",
    "testharness"
   ],
   "css-timing-1/step-timing-functions-output.html": [
    "4b514aac1efca5813e5a551290f8c84f678bd41d",
@@ -205699,17 +205699,17 @@
    "6e8e029f813046c3da69b4ff0c9d03d2a56b38a4",
    "testharness"
   ],
   "web-animations/timing-model/animations/updating-the-finished-state.html": [
    "266f1b793aa74a59486081f3ba8f6cbb482e714b",
    "testharness"
   ],
   "web-animations/timing-model/time-transformations/transformed-progress.html": [
-   "6eebd47c9e60c9590de4d1747f8b8b7866a4a275",
+   "66e2277c77e4bd7b2d8981a725fb5083a8f5e0f6",
    "testharness"
   ],
   "webaudio/.gitignore": [
    "11bc81247643b0a9fc665f1e4b1f592cc1f4c670",
    "support"
   ],
   "webaudio/OWNERS": [
    "d98264a830bdab63db07061e8b25080188e1aeab",
--- a/testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
+++ b/testing/web-platform/tests/css-timing-1/frames-timing-functions-output.html
@@ -72,10 +72,81 @@ test(function(t) {
   div.style.left = '0px';
   div.style.transitionDelay = '-1000ms';
   getComputedStyle(div).left;
   div.style.left = '100px';
   assert_equals(getComputedStyle(div).left, '10px');
 }, 'The number of frames is correctly reflected in the frames timing ' +
    'function output on CSS Transitions');
 
+test(function(t) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
+  var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
+                              { left: '100px' } ],
+                            { duration: 1000,
+                              fill: 'forwards',
+                              easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
+
+  // The bezier function produces values between 0.5 and 1 in
+  // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 45;
+  assert_equals(getComputedStyle(target).left, '100px');
+  anim.currentTime = 230;
+  assert_equals(getComputedStyle(target).left, '100px');
+  anim.currentTime = 250;
+  assert_equals(getComputedStyle(target).left, '200px');
+  anim.currentTime = 1000;
+  assert_equals(getComputedStyle(target).left, '100px');
+}, 'frames easing with input progress greater than 1');
+
+test(function(t) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
+  var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
+                              { left: '100px' } ],
+                            { duration: 1000,
+                              fill: 'forwards',
+                              easing: 'cubic-bezier(0, 3, 1, 3)' });
+
+  // The bezier funciton produces values:
+  // Input           ->  Output
+  // 0.0                 0.0
+  // 0.114 ~ 0.245       1.5~2.0, so frames(2) is 3.0
+  // 0.245 ~ 0.6         2.0~2.4, so frames(2) is 4.0
+  // 0.6   ~ 0.882       2.4~2.0, so frames(2) is 4.0
+  // 0.882 ~ 0.976       2.0~1.5, so frames(2) is 3.0
+  // 1.0                 1.0
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 114;
+  assert_equals(getComputedStyle(target).left, '300px');
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(target).left, '400px');
+  anim.currentTime = 900;
+  assert_equals(getComputedStyle(target).left, '300px');
+}, 'frames easing with input progress greater than 1.5');
+
+test(function(t) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
+  var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
+                              { left: '100px' } ],
+                            { duration: 1000,
+                              fill: 'forwards',
+                              easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
+
+  // The bezier function produces negative values (but always greater than -0.5)
+  // in (0, 0.766312060).
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 750;
+  assert_equals(getComputedStyle(target).left, '-100px');
+  anim.currentTime = 800;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 1000;
+  assert_equals(getComputedStyle(target).left, '100px');
+}, 'frames easing with input progress less than 0');
+
 </script>
 </body>
--- a/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
+++ b/testing/web-platform/tests/web-animations/timing-model/time-transformations/transformed-progress.html
@@ -27,19 +27,20 @@ gEasingTests.forEach(params => {
                            expectedProgress,
                            0.01,
                            'The progress should be approximately ' +
                            expectedProgress + ` at ${sampleTime}ms`);
     });
   }, 'Transformed progress for ' + params.desc);
 });
 
-// Additional tests for various boundary conditions of step timing functions
+// Additional tests for various boundary conditions of step timing functions and
+// frames timing functions.
 
-var gStepTimingFunctionTests = [
+var gStepAndFramesTimingFunctionTests = [
   {
     description: 'Test bounds point of step-start easing',
     effect:     {
                   delay: 1000,
                   duration: 1000,
                   fill: 'both',
                   easing: 'steps(2, start)'
                 },
@@ -247,20 +248,55 @@ var gStepTimingFunctionTests = [
                   { currentTime: 1000, progress: 0.5 },
                   { currentTime: 1249, progress: 0.5 },
                   { currentTime: 1250, progress: 0 },
                   { currentTime: 1749, progress: 0 },
                   { currentTime: 1750, progress: 0.5 },
                   { currentTime: 2000, progress: 0.5 },
                   { currentTime: 2500, progress: 0.5 },
                 ]
+  },
+  {
+    description: 'Test bounds point of frames easing',
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 1000, progress: 0 },
+                  { currentTime: 1499, progress: 0 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of frames easing ' +
+                 'with iterationStart and delay',
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1499, progress: 1 },
+                  { currentTime: 1500, progress: 0 },
+                  { currentTime: 1999, progress: 0 },
+                  { currentTime: 2000, progress: 1 }
+                ]
   }
 ];
 
-gStepTimingFunctionTests.forEach(function(options) {
+gStepAndFramesTimingFunctionTests.forEach(function(options) {
   test(function(t) {
     var target = createDiv(t);
     var animation = target.animate(null, options.effect);
     options.conditions.forEach(function(condition) {
       animation.currentTime = condition.currentTime;
       assert_equals(animation.effect.getComputedTiming().progress,
                     condition.progress,
                     'Progress at ' + animation.currentTime + 'ms');