intrinsic-iteration-duration.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 6 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /scroll-animations/scroll-timelines/intrinsic-iteration-duration.tentative.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset=utf-8>

<title>Scroll based animation: AnimationEffect.getComputedTiming</title>

<link rel="help" href="https://www.w3.org/TR/web-animations-2/#dom-animationeffect-getcomputedtiming">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/web-animations/testcommon.js"></script>

<script src="testcommon.js"></script>

<style>

  .scroller {

    overflow: auto;

    height: 100px;

    width: 100px;

    will-change: transform;

  .contents {

    height: 1000px;

    width: 100%;

</style>

<body>

<div id="log"></div>

<script type="text/javascript">

//------------------------------------

// Time-based duration

//------------------------------------

test(t => {

  const anim = createScrollLinkedAnimationWithTiming(t, {duration: 1000 });

  assert_equals(anim.effect.getTiming().duration, 1000);

  assert_percents_equal(anim.effect.getComputedTiming().duration, 100);

}, 'Computed duration in percent even when specified in ms');

test(t => {

  const anim = createScrollLinkedAnimationWithTiming(t, { duration: 1000 });

  anim.rangeStart = { offset: CSS.percent(20) };

  anim.rangeEnd = { offset: CSS.percent(80) };

  assert_equals(anim.effect.getTiming().duration, 1000);

  assert_percents_equal(anim.effect.getComputedTiming().duration, 60);

}, 'Time-based duration normalized to fill animation range.');

test(t => {

  const anim =

      createScrollLinkedAnimationWithTiming(

          t, {duration: 700, delay: 100, endDelay: 200 });

  assert_equals(anim.effect.getTiming().duration, 700);

  assert_percents_equal(anim.effect.getComputedTiming().duration, 70);

}, 'Time-based duration normalized to preserve proportional delays.');

//-------------------------------------------------

// Duration 'auto' = Intrinsic iteration duration

//-------------------------------------------------

test(t => {

  const anim = createScrollLinkedAnimationWithTiming(t, {});

  assert_equals(anim.effect.getTiming().duration, 'auto');

  assert_percents_equal(anim.effect.getComputedTiming().duration, 100);

}, 'Intrinsic iteration duration fills timeline.');

test(t => {

  const anim = createScrollLinkedAnimationWithTiming(t, {});

  anim.rangeStart = { offset: CSS.percent(30) };

  anim.rangeEnd = { offset: CSS.percent(90) };

  assert_equals(anim.effect.getTiming().duration, 'auto');

  assert_percents_equal(anim.effect.getComputedTiming().duration, 60);

}, 'Intrinsic iteration duration accounts for animation range.');

test(t => {

  const anim =

      createScrollLinkedAnimationWithTiming(

          t, { iterations: 4 });

  assert_equals(anim.effect.getTiming().duration, 'auto');

  assert_percents_equal(anim.effect.getComputedTiming().duration, 25);

}, 'Intrinsic iteration duration accounts for number of iterations');

</script>

</body>