Bug 1332206 - Add tests for keyframe easing; r?hiro draft
authorBrian Birtles <birtles@gmail.com>
Tue, 07 Feb 2017 07:56:18 +0900
changeset 479752 bf115b430e602fd739daac4c44409589975b89ab
parent 479751 85a7b3b8eff58a3c3be5f8448da80610832cdec4
child 479753 89b663bfb681b2678293f875c691385386cb5baf
push id44344
push userbbirtles@mozilla.com
push dateTue, 07 Feb 2017 06:04:57 +0000
reviewershiro
bugs1332206
milestone54.0a1
Bug 1332206 - Add tests for keyframe easing; r?hiro MozReview-Commit-ID: HkWyQXjr7P5
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -203743,17 +203743,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": [
-   "c8e3b458a9bb34f0674c75318642b438d43bc530",
+   "19ef984086a26528a4e8e036f1cd6dbdfc73c02f",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
    "b01c7c5145c183fdca80dec4ca1966b0f72a7003",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
    "318bc877791852b0829a3e10cb19e2a20a15adab",
--- 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
@@ -7,16 +7,46 @@
 <script src="../../testcommon.js"></script>
 <script src="../../resources/easing-tests.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';
 
+// Test that applying easing to keyframes is applied as expected
+
+gEasingTests.forEach(params => {
+  test(function(t) {
+    const target = createDiv(t);
+    const anim   = target.animate([ { width: '0px' },
+                                    // We put the easing on the second keyframe
+                                    // so we can test that it is only applied
+                                    // to the specified keyframe.
+                                    { width: '100px', easing: params.easing },
+                                    { width: '200px' } ],
+                                  { duration: 2000,
+                                    fill: 'forwards' });
+
+    [ 0, 999, 1000, 1100, 1500, 2000 ].forEach(sampleTime => {
+      anim.currentTime = sampleTime;
+
+      const portion = (sampleTime - 1000) / 1000;
+      const expectedWidth = sampleTime < 1000
+                            ? sampleTime / 10 // first segment is linear
+                            : 100 + params.easingFunction(portion) * 100;
+      assert_approx_equals(parseFloat(getComputedStyle(target).width),
+                           expectedWidth,
+                           0.01,
+                           'The width should be approximately ' +
+                           `${expectedWidth} at ${sampleTime}ms`);
+    });
+  }, `A ${params.desc} on a keyframe affects the resulting style`);
+});
+
 // Test that a linear-equivalent cubic-bezier easing applied to a keyframe does
 // not alter (including clamping) the result.
 
 gEasingTests.forEach(params => {
   const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)',
                                     'cubic-bezier(1, 1, 1, 1)' ];
   test(function(t) {
     linearEquivalentEasings.forEach(linearEquivalentEasing => {