Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 664d5705e7ec00e69c5ed40ee47d12ef203a8622 authored by Simon Pieters on 18 October 2018, 07:49:54 UTC
Address comments
Tip revision: 664d570
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-timing/#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-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 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 (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 (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');

</script>
</body>
back to top