Bug 1332206 - Move step timing function tests; r=hiro
authorBrian Birtles <birtles@gmail.com>
Wed, 08 Feb 2017 09:25:29 +0900
changeset 341316 1a24ff557466118daced01a8ac83ef85c9989084
parent 341315 5f16ee5b6238d92e9033176fe0b7b94600f114c2
child 341317 41114ebea8efe2b174cd38c3c16a0a6d161e67d6
push id86684
push usercbook@mozilla.com
push dateWed, 08 Feb 2017 10:31:03 +0000
treeherdermozilla-inbound@c5b88e4e70f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1332206
milestone54.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 1332206 - Move step timing function tests; r=hiro MozReview-Commit-ID: HdBtYjbL2la
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/effect-easing.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
@@ -203887,17 +203887,17 @@
    "577241478fdeca6257711e9f90fec64372bd5637",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/copy-contructor.html": [
    "e1dfb5c05807a37974ecce98bb8c683cc291bfe4",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/effect-easing.html": [
-   "5e053831e2b3070ea39b0bbd90c2e7198e98955d",
+   "f4d26058580e01e18953debbf4e53be08db9c29a",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/getComputedTiming.html": [
    "c9dcf7c17010e5495007e000b33aeb4dc89f92b7",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/iterationComposite.html": [
    "5b7dbc28de885751ea952f4fecc2bd07cb3cea11",
@@ -203971,17 +203971,17 @@
    "6e8e029f813046c3da69b4ff0c9d03d2a56b38a4",
    "testharness"
   ],
   "web-animations/timing-model/animations/updating-the-finished-state.html": [
    "266f1b793aa74a59486081f3ba8f6cbb482e714b",
    "testharness"
   ],
   "web-animations/timing-model/time-transformations/transformed-progress.html": [
-   "5d32b7e7ea13f0093d645a29ba57977b1ca289c8",
+   "5b6a9681c5edfe4b80a8c0807420aa7f4b4411eb",
    "testharness"
   ],
   "webaudio/.gitignore": [
    "11bc81247643b0a9fc665f1e4b1f592cc1f4c670",
    "support"
   ],
   "webaudio/OWNERS": [
    "d98264a830bdab63db07061e8b25080188e1aeab",
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/effect-easing.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/effect-easing.html
@@ -309,298 +309,16 @@ test(function(t) {
   });
   assert_style_left_at(anim, 1000, function(x) {
     return easing(easing(x))
   });
 }, 'effect easing which produces negative values and the tangent on ' +
    'the lower boundary is infinity with keyframe easing producing ' +
    'negative values');
 
-var gStepTimingFunctionTests = [
-  {
-    description: 'Test bounds point of step-start easing',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0 },
-                  { currentTime: 999,  progress: 0 },
-                  { currentTime: 1000, progress: 0.5 },
-                  { currentTime: 1499, progress: 0.5 },
-                  { currentTime: 1500, progress: 1 },
-                  { currentTime: 2000, progress: 1 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing with compositor',
-    keyframe:   [ { opacity: 0 },
-                  { opacity: 1 } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0 },
-                  { currentTime: 999,  progress: 0 },
-                  { currentTime: 1000, progress: 0.5 },
-                  { currentTime: 1499, progress: 0.5 },
-                  { currentTime: 1500, progress: 1 },
-                  { currentTime: 2000, progress: 1 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing with reverse direction',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  direction: 'reverse',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 1 },
-                  { currentTime: 1001, progress: 1 },
-                  { currentTime: 1500, progress: 1 },
-                  { currentTime: 1501, progress: 0.5 },
-                  { currentTime: 2000, progress: 0 },
-                  { currentTime: 2500, progress: 0 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing ' +
-                 'with iterationStart not at a transition point',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  iterationStart: 0.25,
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0.5 },
-                  { currentTime: 999,  progress: 0.5 },
-                  { currentTime: 1000, progress: 0.5 },
-                  { currentTime: 1249, progress: 0.5 },
-                  { currentTime: 1250, progress: 1 },
-                  { currentTime: 1749, progress: 1 },
-                  { currentTime: 1750, progress: 0.5 },
-                  { currentTime: 2000, progress: 0.5 },
-                  { currentTime: 2500, progress: 0.5 },
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing ' +
-                 'with iterationStart and delay',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  iterationStart: 0.5,
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0.5 },
-                  { currentTime: 999,  progress: 0.5 },
-                  { currentTime: 1000, progress: 1 },
-                  { currentTime: 1499, progress: 1 },
-                  { currentTime: 1500, progress: 0.5 },
-                  { currentTime: 2000, progress: 1 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing ' +
-                 'with iterationStart and reverse direction',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  iterationStart: 0.5,
-                  direction: 'reverse',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 1 },
-                  { currentTime: 1000, progress: 1 },
-                  { currentTime: 1001, progress: 0.5 },
-                  { currentTime: 1499, progress: 0.5 },
-                  { currentTime: 1500, progress: 1 },
-                  { currentTime: 1999, progress: 1 },
-                  { currentTime: 2000, progress: 0.5 },
-                  { currentTime: 2500, progress: 0.5 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step(4, start) easing ' +
-                 'with iterationStart 0.75 and delay',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  duration: 1000,
-                  fill: 'both',
-                  delay: 1000,
-                  iterationStart: 0.75,
-                  easing: 'steps(4, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0.75 },
-                  { currentTime: 999,  progress: 0.75 },
-                  { currentTime: 1000, progress: 1 },
-                  { currentTime: 2000, progress: 1 },
-                  { currentTime: 2500, progress: 1 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing ' +
-                 'with alternate direction',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  duration: 1000,
-                  fill: 'both',
-                  delay: 1000,
-                  iterations: 2,
-                  iterationStart: 1.5,
-                  direction: 'alternate',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 1 },
-                  { currentTime: 1000, progress: 1 },
-                  { currentTime: 1001, progress: 0.5 },
-                  { currentTime: 2999, progress: 1 },
-                  { currentTime: 3000, progress: 0.5 },
-                  { currentTime: 3500, progress: 0.5 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing ' +
-                 'with alternate-reverse direction',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  duration: 1000,
-                  fill: 'both',
-                  delay: 1000,
-                  iterations: 2,
-                  iterationStart: 0.5,
-                  direction: 'alternate-reverse',
-                  easing: 'steps(2, start)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 1 },
-                  { currentTime: 1000, progress: 1 },
-                  { currentTime: 1001, progress: 0.5 },
-                  { currentTime: 2999, progress: 1 },
-                  { currentTime: 3000, progress: 0.5 },
-                  { currentTime: 3500, progress: 0.5 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-start easing in keyframe',
-    keyframe:   [ { width: '0px', easing: 'steps(2, start)' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0,     width: '0px' },
-                  { currentTime: 999,  progress: 0,     width: '0px' },
-                  { currentTime: 1000, progress: 0,     width: '50px' },
-                  { currentTime: 1499, progress: 0.499, width: '50px' },
-                  { currentTime: 1500, progress: 0.5,   width: '100px' },
-                  { currentTime: 2000, progress: 1,     width: '100px' },
-                  { currentTime: 2500, progress: 1,     width: '100px' }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-end easing ' +
-                 'with iterationStart and delay',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  duration: 1000,
-                  fill: 'both',
-                  delay: 1000,
-                  iterationStart: 0.5,
-                  easing: 'steps(2, end)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0 },
-                  { currentTime: 999,  progress: 0 },
-                  { currentTime: 1000, progress: 0.5 },
-                  { currentTime: 1499, progress: 0.5 },
-                  { currentTime: 1500, progress: 0 },
-                  { currentTime: 1999, progress: 0 },
-                  { currentTime: 2000, progress: 0.5 },
-                  { currentTime: 2500, progress: 0.5 }
-                ]
-  },
-  {
-    description: 'Test bounds point of step-end easing ' +
-                 'with iterationStart not at a transition point',
-    keyframe:   [ { width: '0px' },
-                  { width: '100px' } ],
-    effect:     {
-                  delay: 1000,
-                  duration: 1000,
-                  fill: 'both',
-                  iterationStart: 0.75,
-                  easing: 'steps(2, end)'
-                },
-    conditions: [
-                  { currentTime: 0,    progress: 0.5 },
-                  { currentTime: 999,  progress: 0.5 },
-                  { 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 },
-                ]
-  }
-];
-
-gStepTimingFunctionTests.forEach(function(options) {
-  test(function(t) {
-    var target = createDiv(t);
-    var animation = target.animate(options.keyframe, options.effect);
-    options.conditions.forEach(function(condition) {
-      animation.currentTime = condition.currentTime;
-      if (typeof condition.progress !== 'undefined') {
-        assert_equals(animation.effect.getComputedTiming().progress,
-                      condition.progress,
-                      'Progress at ' + animation.currentTime + 'ms');
-      }
-      if (typeof condition.width !== 'undefined') {
-        assert_equals(getComputedStyle(target).width,
-                      condition.width,
-                      'Progress at ' + animation.currentTime + 'ms');
-      }
-    });
-  }, options.description);
-});
-
 gInvalidEasings.forEach(function(invalidEasing) {
   test(function(t) {
     var div = createDiv(t);
     assert_throws({ name: 'TypeError' },
                   function() {
                     div.animate({ easing: invalidEasing }, 100 * MS_PER_SEC);
                   });
   }, 'Invalid keyframe easing value: \'' + invalidEasing + '\'');
--- 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,10 +27,294 @@ 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
+
+var gStepTimingFunctionTests = [
+  {
+    description: 'Test bounds point of step-start easing',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 999,  progress: 0 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing with compositor',
+    keyframe:   [ { opacity: 0 },
+                  { opacity: 1 } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 999,  progress: 0 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing with reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  direction: 'reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1001, progress: 1 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 1501, progress: 0.5 },
+                  { currentTime: 2000, progress: 0 },
+                  { currentTime: 2500, progress: 0 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart not at a transition point',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.25,
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.5 },
+                  { currentTime: 999,  progress: 0.5 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1249, progress: 0.5 },
+                  { currentTime: 1250, progress: 1 },
+                  { currentTime: 1749, progress: 1 },
+                  { currentTime: 1750, progress: 0.5 },
+                  { currentTime: 2000, progress: 0.5 },
+                  { currentTime: 2500, progress: 0.5 },
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart and delay',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.5 },
+                  { currentTime: 999,  progress: 0.5 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1499, progress: 1 },
+                  { currentTime: 1500, progress: 0.5 },
+                  { currentTime: 2000, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with iterationStart and reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.5,
+                  direction: 'reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 1 },
+                  { currentTime: 1999, progress: 1 },
+                  { currentTime: 2000, progress: 0.5 },
+                  { currentTime: 2500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step(4, start) easing ' +
+                 'with iterationStart 0.75 and delay',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterationStart: 0.75,
+                  easing: 'steps(4, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.75 },
+                  { currentTime: 999,  progress: 0.75 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 2000, progress: 1 },
+                  { currentTime: 2500, progress: 1 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with alternate direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 1.5,
+                  direction: 'alternate',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 2999, progress: 1 },
+                  { currentTime: 3000, progress: 0.5 },
+                  { currentTime: 3500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing ' +
+                 'with alternate-reverse direction',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterations: 2,
+                  iterationStart: 0.5,
+                  direction: 'alternate-reverse',
+                  easing: 'steps(2, start)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 1 },
+                  { currentTime: 1000, progress: 1 },
+                  { currentTime: 1001, progress: 0.5 },
+                  { currentTime: 2999, progress: 1 },
+                  { currentTime: 3000, progress: 0.5 },
+                  { currentTime: 3500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-start easing in keyframe',
+    keyframe:   [ { width: '0px', easing: 'steps(2, start)' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0,     width: '0px' },
+                  { currentTime: 999,  progress: 0,     width: '0px' },
+                  { currentTime: 1000, progress: 0,     width: '50px' },
+                  { currentTime: 1499, progress: 0.499, width: '50px' },
+                  { currentTime: 1500, progress: 0.5,   width: '100px' },
+                  { currentTime: 2000, progress: 1,     width: '100px' },
+                  { currentTime: 2500, progress: 1,     width: '100px' }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-end easing ' +
+                 'with iterationStart and delay',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  duration: 1000,
+                  fill: 'both',
+                  delay: 1000,
+                  iterationStart: 0.5,
+                  easing: 'steps(2, end)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0 },
+                  { currentTime: 999,  progress: 0 },
+                  { currentTime: 1000, progress: 0.5 },
+                  { currentTime: 1499, progress: 0.5 },
+                  { currentTime: 1500, progress: 0 },
+                  { currentTime: 1999, progress: 0 },
+                  { currentTime: 2000, progress: 0.5 },
+                  { currentTime: 2500, progress: 0.5 }
+                ]
+  },
+  {
+    description: 'Test bounds point of step-end easing ' +
+                 'with iterationStart not at a transition point',
+    keyframe:   [ { width: '0px' },
+                  { width: '100px' } ],
+    effect:     {
+                  delay: 1000,
+                  duration: 1000,
+                  fill: 'both',
+                  iterationStart: 0.75,
+                  easing: 'steps(2, end)'
+                },
+    conditions: [
+                  { currentTime: 0,    progress: 0.5 },
+                  { currentTime: 999,  progress: 0.5 },
+                  { 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 },
+                ]
+  }
+];
+
+gStepTimingFunctionTests.forEach(function(options) {
+  test(function(t) {
+    var target = createDiv(t);
+    var animation = target.animate(options.keyframe, options.effect);
+    options.conditions.forEach(function(condition) {
+      animation.currentTime = condition.currentTime;
+      if (typeof condition.progress !== 'undefined') {
+        assert_equals(animation.effect.getComputedTiming().progress,
+                      condition.progress,
+                      'Progress at ' + animation.currentTime + 'ms');
+      }
+      if (typeof condition.width !== 'undefined') {
+        assert_equals(getComputedStyle(target).width,
+                      condition.width,
+                      'Progress at ' + animation.currentTime + 'ms');
+      }
+    });
+  }, options.description);
+});
+
 </script>
 </body>