discrete.html | Explore in Territory

<!DOCTYPE html>
<meta charset=utf-8>
<title>Discrete animation type</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#discrete-animation-type">
<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(t => {
  const div = createDiv(t);

  const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
                           { duration: 1000, fill: 'forwards' });

  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value at start of interval');
  anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value just before the middle of'
                + ' the interval');
  anim.currentTime++;
  assert_equals(getComputedStyle(div).fontStyle, 'italic',
                'Animation produces \'to\' value at exact middle of'
                + ' the interval');
  anim.finish();
  assert_equals(getComputedStyle(div).fontStyle, 'italic',
                'Animation produces \'to\' value during forwards fill');
}, 'Test animating discrete values');

test(t => {
  const div = createDiv(t);
  const originalHeight = getComputedStyle(div).height;

  const anim = div.animate({ height: [ 'auto', '200px' ] },
                           { duration: 1000, fill: 'forwards' });

  assert_equals(getComputedStyle(div).height, originalHeight,
                'Animation produces \'from\' value at start of interval');
  anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
  assert_equals(getComputedStyle(div).height, originalHeight,
                'Animation produces \'from\' value just before the middle of'
                + ' the interval');
  anim.currentTime++;
  assert_equals(getComputedStyle(div).height, '200px',
                'Animation produces \'to\' value at exact middle of'
                + ' the interval');
  anim.finish();
  assert_equals(getComputedStyle(div).height, '200px',
                'Animation produces \'to\' value during forwards fill');
}, 'Test discrete animation is used when interpolation fails');

test(t => {
  const div = createDiv(t);
  const originalHeight = getComputedStyle(div).height;

  const anim = div.animate({ height: [ 'auto',
                                       '200px',
                                       '300px',
                                       'auto',
                                       '400px' ] },
                         { duration: 1000, fill: 'forwards' });

  // There are five values, so there are four pairs to try to interpolate.
  // We test at the middle of each pair.
  assert_equals(getComputedStyle(div).height, originalHeight,
                'Animation produces \'from\' value at start of interval');
  anim.currentTime = 125;
  assert_equals(getComputedStyle(div).height, '200px',
                'First non-interpolable pair uses discrete interpolation');
  anim.currentTime += 250;
  assert_equals(getComputedStyle(div).height, '250px',
                'Second interpolable pair uses linear interpolation');
  anim.currentTime += 250;
  assert_equals(getComputedStyle(div).height, originalHeight,
                'Third non-interpolable pair uses discrete interpolation');
  anim.currentTime += 250;
  assert_equals(getComputedStyle(div).height, '400px',
                'Fourth non-interpolable pair uses discrete interpolation');
}, 'Test discrete animation is used only for pairs of values that cannot'
   + ' be interpolated');

test(t => {
  const div = createDiv(t);
  const originalHeight = getComputedStyle(div).height;

  // Easing: http://cubic-bezier.com/#.68,0,1,.01
  // With this curve, we don't reach the 50% point until about 95% of
  // the time has expired.
  const anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
                           { duration: 1000, fill: 'forwards',
                             easing: 'cubic-bezier(0.68,0,1,0.01)' });

  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value at start of interval');
  anim.currentTime = 940;
  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value at 94% of the iteration'
                + ' time');
  anim.currentTime = 960;
  assert_equals(getComputedStyle(div).fontStyle, 'italic',
                'Animation produces \'to\' value at 96% of the iteration'
                + ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
   + ' effect easing');

test(t => {
  const div = createDiv(t);
  const originalHeight = getComputedStyle(div).height;

  // Easing: http://cubic-bezier.com/#.68,0,1,.01
  // With this curve, we don't reach the 50% point until about 95% of
  // the time has expired.
  const anim = div.animate([ { fontStyle: 'normal',
                               easing: 'cubic-bezier(0.68,0,1,0.01)' },
                           { fontStyle: 'italic' } ],
                         { duration: 1000, fill: 'forwards' });

  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value at start of interval');
  anim.currentTime = 940;
  assert_equals(getComputedStyle(div).fontStyle, 'normal',
                'Animation produces \'from\' value at 94% of the iteration'
                + ' time');
  anim.currentTime = 960;
  assert_equals(getComputedStyle(div).fontStyle, 'italic',
                'Animation produces \'to\' value at 96% of the iteration'
                + ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
   + ' keyframe easing');

</script>
chromium/third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/discrete.html
