Bug 1248340 - Part 7: Add tests in transformed-progress and transformed-distance. draft
authorBoris Chiou <boris.chiou@gmail.com>
Mon, 27 Feb 2017 18:31:51 +0800
changeset 490796 1494ee58f8c7e124b0ee2ef6f45b2b6d34d3dce0
parent 490795 dff59721a6027140f6cafb92f1326b28e604089e
child 547375 2ff70c6bd9d0ff934ccd5e9956bf4bf8ea2e8349
push id47225
push userbmo:boris.chiou@gmail.com
push dateWed, 01 Mar 2017 09:09:06 +0000
bugs1248340
milestone54.0a1
Bug 1248340 - Part 7: Add tests in transformed-progress and transformed-distance. MozReview-Commit-ID: 4t3fx3Adkhj
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.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
@@ -205280,17 +205280,17 @@
    "10d9ee521240475a1729c2facfcea8b50342614e",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html": [
    "a79db70a385ad767263f285c9401b66611087e42",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html": [
-   "59e86254c8c118bd30b5c6742cfeaceba783eaee",
+   "b4ed192ce75c7ea3d10b5a1b3d986d0d6be74396",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
    "b01c7c5145c183fdca80dec4ca1966b0f72a7003",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
    "318bc877791852b0829a3e10cb19e2a20a15adab",
@@ -205508,17 +205508,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",
+   "0252a57bfd649a0b5b8cb48f5dd36ede9d84c80b",
    "testharness"
   ],
   "webaudio/.gitignore": [
    "11bc81247643b0a9fc665f1e4b1f592cc1f4c670",
    "support"
   ],
   "webaudio/OWNERS": [
    "d98264a830bdab63db07061e8b25080188e1aeab",
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
@@ -408,10 +408,75 @@ test(function(t) {
     return easing(easing(x))
   });
   assert_style_left_at(anim, 1000, function(x) {
     return easing(easing(x))
   });
 }, 'cubic-bezier easing with input progress less than 0 and where the ' +
    'tangent on the lower boundary is infinity');
 
+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 greater than 1 (but always less than 2)
+  // in (0.23368794, 1), and the values greater than 0.5 from 0.442.
+  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 function produces values greater than 2 (but always less than 3)
+  // in the range (~0.245, ~0.882), and the values greater than 1.5 from 0.114.
+  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 -1)
+  // 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,154 @@ 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 reverse direction',
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  direction: 'reverse',
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 1501, progress: 0 },
+                  { currentTime: 2000, progress: 0 }
+                ]
+  },
+  {
+    description: 'Test bounds point of frames easing ' +
+                 'with iterationStart not at a transition point',
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.25,
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 1000, progress: 0 },
+                  { currentTime: 1249, progress: 0 },
+                  { currentTime: 1250, progress: 1 },
+                  { currentTime: 1749, progress: 1 },
+                  { currentTime: 1750, progress: 0 },
+                  { currentTime: 2000, progress: 0 }
+                ]
+  },
+  {
+    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 }
+                ]
+  },
+  {
+    description: 'Test bounds point of frames easing ' +
+                 'with iterationStart and reverse direction',
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  direction: 'reverse',
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0 },
+                  { currentTime: 1499, progress: 0 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of frames easing ' +
+                 'with alternate direction',
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 1.5,
+                  direction: 'alternate',
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0 },
+                  { currentTime: 1999, progress: 0 },
+                  { currentTime: 2000, progress: 1 },
+                  { currentTime: 3000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of frames easing ' +
+                 'with alternate-reverse direction',
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 0.5,
+                  direction: 'alternate-reverse',
+                  easing: 'frames(2)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0 },
+                  { currentTime: 1999, progress: 0 },
+                  { currentTime: 2000, progress: 1 },
+                  { currentTime: 3000, 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');