css/css-easing/step-timing-functions-output.html

<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the output of step timing functions" />
<title>Tests for the output of step timing functions</title>
<link rel="help"
href="https://drafts.csswg.org/css-easing/#step-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';

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 (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, '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-start' },
                              { left: '100px' } ],
                            { duration: 1000,
                              fill: 'forwards',
                              easing: 'cubic-bezier(0, 3, 1, 3)' });

  // The bezier function produces values:
  // Input           ->  Output
  // 0.0                 0.0
  // 0.114 ~ 0.245       1.5~2.0, so current step is 2, jumps is 1 => 2.0
  // 0.245 ~ 0.6         2.0~2.4, so current step is 3, jumps is 1 => 3.0
  // 0.6   ~ 0.882       2.4~2.0, so current step is 3, jumps is 1 => 3.0
  // 0.882 ~ 0.976       2.0~1.5, so current step is 2, jumps is 1 => 2.0
  // 1.0                 1.0
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '100px');
  anim.currentTime = 114;
  assert_equals(getComputedStyle(target).left, '200px');
  anim.currentTime = 500;
  assert_equals(getComputedStyle(target).left, '300px');
  anim.currentTime = 900;
  assert_equals(getComputedStyle(target).left, '200px');
}, 'step-start 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 (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, 1.5, 1, 1.5)' });

  // 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:
  // Input           ->  Output
  // 0.0                 0.0
  // 0.114 ~ 0.245       1.5~2.0, so current step is 1, jumps is 1 => 1.0
  // 0.245 ~ 0.6         2.0~2.4, so current step is 2, jumps is 1 => 2.0
  // 0.6   ~ 0.882       2.4~2.0, so current step is 2, jumps is 1 => 2.0
  // 0.882 ~ 0.976       2.0~1.5, so current step is 1, jumps is 1 => 1.0
  // 1.0                 1.0
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '0px');
  anim.currentTime = 114;
  assert_equals(getComputedStyle(target).left, '100px');
  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-end' },
                              { 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');
}, 'step-end 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: 'steps(1, jump-both)' },
                              { 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)
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '50px');
  anim.currentTime = 230;
  assert_equals(getComputedStyle(target).left, '50px');
  anim.currentTime = 250;
  assert_equals(getComputedStyle(target).left, '100px');
  anim.currentTime = 1000;
  assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) 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: 'steps(1, jump-both)' },
                              { left: '100px' } ],
                            { duration: 1000,
                              fill: 'forwards',
                              easing: 'cubic-bezier(0, 3, 1, 3)' });

  // The bezier function produces values:
  // Input           ->  Output
  // 0.0                 0.0,     so current step is 1, jumps is 2 => 0.5
  // 0.114 ~ 0.245       1.5~2.0, so current step is 2, jumps is 2 => 1.0
  // 0.245 ~ 0.6         2.0~2.4, so current step is 3, jumps is 2 => 1.5
  // 0.6   ~ 0.882       2.4~2.0, so current step is 3, jumps is 2 => 1.5
  // 0.882 ~ 0.976       2.0~1.5, so current step is 2, jumps is 2 => 1.0
  // 1.0                 1.0
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '50px');
  anim.currentTime = 114;
  assert_equals(getComputedStyle(target).left, '100px');
  anim.currentTime = 500;
  assert_equals(getComputedStyle(target).left, '150px');
  anim.currentTime = 900;
  assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) 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: 'steps(1, jump-both)' },
                              { 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 -0.5)
  // in (0, 0.766312060).
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '50px');
  anim.currentTime = 750;
  // current step is 0, jumps is 2.
  assert_equals(getComputedStyle(target).left, '0px');
  anim.currentTime = 800;
  assert_equals(getComputedStyle(target).left, '50px');
  anim.currentTime = 1000;
  assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(1, jump-both) 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: 'steps(2, jump-none)' },
                              { left: '100px' } ],
                            { duration: 1000,
                              fill: 'forwards',
                              easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });

  // The bezier function produces values between 0.5 and 1 in
  // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
  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');
}, 'steps(2, jump-none) 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: 'steps(2, jump-none)' },
                              { left: '100px' } ],
                            { duration: 1000,
                              fill: 'forwards',
                              easing: 'cubic-bezier(0, 3, 1, 3)' });

  // The bezier function produces values:
  // Input           ->  Output
  // 0.0                 0.0,     so current step is 0, jumps is 1 => 0.0
  // 0.114 ~ 0.245       1.5~2.0, so current step is 3, jumps is 1 => 3.0
  // 0.245 ~ 0.6         2.0~2.4, so current step is 4, jumps is 1 => 4.0
  // 0.6   ~ 0.882       2.4~2.0, so current step is 4, jumps is 1 => 4.0
  // 0.882 ~ 0.976       2.0~1.5, so current step is 3, jumps is 1 => 3.0
  // 1.0                 1.0
  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');
}, 'steps(2, jump-none) 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: 'steps(2, jump-none)' },
                              { 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 -0.5)
  // in (0, 0.766312060).
  anim.currentTime = 0;
  assert_equals(getComputedStyle(target).left, '0px');
  anim.currentTime = 750;
  // current step is -1, jumps is 1.
  assert_equals(getComputedStyle(target).left, '-100px');
  anim.currentTime = 800;
  assert_equals(getComputedStyle(target).left, '0px');
  anim.currentTime = 1000;
  assert_equals(getComputedStyle(target).left, '100px');
}, 'steps(2, jump-none) easing with input progress less than 0');

</script>
</body>