Bug 1332206 - Add tests for non-clamping step timing function behavior; r=hiro
authorBrian Birtles <birtles@gmail.com>
Wed, 08 Feb 2017 09:25:31 +0900
changeset 341323 f85b73bd0790056fa17c5fdc5b148ee98d2ba896
parent 341322 d18d24e941e13201d5bf0ff565ffd3908d700c0e
child 341324 e624d16a7d8f10549f0598be9819d60be1d65c9a
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 non-clamping step timing function behavior; r=hiro MozReview-Commit-ID: 6L1RlrZQyMy
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html.ini
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
@@ -203737,17 +203737,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": [
-   "4f2879bda5e724ba00b1645195c7c0d1df15fa1c",
+   "59e86254c8c118bd30b5c6742cfeaceba783eaee",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
    "b01c7c5145c183fdca80dec4ca1966b0f72a7003",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
    "318bc877791852b0829a3e10cb19e2a20a15adab",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html.ini
@@ -0,0 +1,13 @@
+[effect-value-transformed-distance.html]
+  type: testharness
+  [step-start easing with input progress greater than 1]
+    expected: FAIL
+
+  [step-end easing with input progress greater than 2]
+    expected: FAIL
+
+  [step-start easing with input progress less than -1]
+    expected: FAIL
+
+  [step-end easing with input progress less than 0]
+    expected: FAIL
--- 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
@@ -99,81 +99,125 @@ test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
   var anim = target.animate([ { left: '0px', easing: 'step-start' },
                               { left: '100px' } ],
                             { duration: 1000,
                               fill: 'forwards',
                               easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
 
-  // The bezier function produces values greater than 1 in (0.23368794, 1)
+  // The bezier function produces values greater than 1 (but always less than 2)
+  // in (0.23368794, 1)
   anim.currentTime = 0;
   assert_equals(getComputedStyle(target).left, '100px');
   anim.currentTime = 230;
   assert_equals(getComputedStyle(target).left, '100px');
   anim.currentTime = 250;
-  assert_equals(getComputedStyle(target).left, '100px');
+  assert_equals(getComputedStyle(target).left, '200px');
   anim.currentTime = 1000;
   assert_equals(getComputedStyle(target).left, '100px');
 }, 'step-start 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: 'step-end' },
                               { left: '100px' } ],
                             { duration: 1000,
                               fill: 'forwards',
                               easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
 
-  // The bezier function produces values greater than 1 in (0.23368794, 1)
+  // The bezier function produces values greater than 1 (but always less than 2)
+  // in (0.23368794, 1)
   anim.currentTime = 0;
   assert_equals(getComputedStyle(target).left, '0px');
   anim.currentTime = 230;
   assert_equals(getComputedStyle(target).left, '0px');
   anim.currentTime = 250;
   assert_equals(getComputedStyle(target).left, '100px');
   anim.currentTime = 1000;
   assert_equals(getComputedStyle(target).left, '100px');
 }, 'step-end 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: 'step-end' },
+                              { 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)
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(target).left, '200px');
+  anim.currentTime = 900;
+  assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-end easing with input progress greater than 2');
+
+test(function(t) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
   var anim = target.animate([ { left: '0px', easing: 'step-start' },
                               { left: '100px' } ],
                             { duration: 1000,
                               fill: 'forwards',
                               easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
 
-  // The bezier function produces negative values in (0, 0.766312060)
+  // The bezier function produces negative values (but always greater than -1)
+  // in (0, 0.766312060)
   anim.currentTime = 0;
   assert_equals(getComputedStyle(target).left, '100px');
   anim.currentTime = 750;
   assert_equals(getComputedStyle(target).left, '0px');
   anim.currentTime = 800;
   assert_equals(getComputedStyle(target).left, '100px');
   anim.currentTime = 1000;
   assert_equals(getComputedStyle(target).left, '100px');
 }, 'step-start easing with input progress less than 0');
 
 test(function(t) {
   var target = createDiv(t);
   target.style.position = 'absolute';
+  var anim = target.animate([ { left: '0px', easing: 'step-start' },
+                              { left: '100px' } ],
+                            { duration: 1000,
+                              fill: 'forwards',
+                              easing: 'cubic-bezier(0, -2, 1, -2)' });
+
+  // The bezier function produces values less than -1 (but always greater than
+  // -2) in the range (~0.118, ~0.755)
+  anim.currentTime = 0;
+  assert_equals(getComputedStyle(target).left, '100px');
+  anim.currentTime = 100;
+  assert_equals(getComputedStyle(target).left, '0px');
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(target).left, '-100px');
+  anim.currentTime = 1000;
+  assert_equals(getComputedStyle(target).left, '100px');
+}, 'step-start easing with input progress less than -1');
+
+test(function(t) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
   var anim = target.animate([ { left: '0px', easing: 'step-end' },
                               { left: '100px' } ],
                             { duration: 1000,
                               fill: 'forwards',
                               easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
 
-  // The bezier function produces negative values in (0, 0.766312060)
+  // 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, '0px');
+  assert_equals(getComputedStyle(target).left, '-100px');
   anim.currentTime = 800;
   assert_equals(getComputedStyle(target).left, '0px');
   anim.currentTime = 1000;
   assert_equals(getComputedStyle(target).left, '100px');
 }, 'step-end easing with input progress less than 0');
 
 test(function(t) {
   var target = createDiv(t);