Bug 1332206 - Add tests for keyframe easing; r=hiro
authorBrian Birtles <birtles@gmail.com>
Wed, 08 Feb 2017 09:25:28 +0900
changeset 341315 5f16ee5b6238d92e9033176fe0b7b94600f114c2
parent 341314 743c0869e33228eb8d3556d71e6940cc58731a65
child 341316 1a24ff557466118daced01a8ac83ef85c9989084
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 - 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 => {