Mercurial > mozilla-central / file revision / testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html@23763b72c35abeead04f63e4503c28abc73d065d
summary | shortlog | changelog | pushlog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
testing/web-platform/tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html
author Sotaro Ikeda <sotaro.ikeda.g@gmail.com>
Thu, 10 Jul 2025 00:10:09 +0000 (5 hours ago)
changeset 795941 23763b72c35abeead04f63e4503c28abc73d065d
parent 396582 368eea9148057dd4617da8e18b8db17b7fbc9889
permissions -rw-r--r--
Bug 1976135 - Remove nightly only limitation of pref gfx.webrender.layer-compositor r=gfx-reviewers,gw Differential Revision: https://phabricator.services.mozilla.com/D256379
<!DOCTYPE html>
<meta charset=utf-8>
<title>Simple iteration progress</title>
<link rel="help"
      href="https://drafts.csswg.org/web-animations/#simple-iteration-progress">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<script src="../../resources/effect-tests.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';

function runTests(tests, description) {
  for (const currentTest of tests) {
    let testParams = Object.entries(currentTest.input)
                           .map(([attr, value]) => `${attr}:${value}`)
                           .join(' ');
    if (currentTest.playbackRate !== undefined) {
      testParams += ` playbackRate:${currentTest.playbackRate}`;
    }

    test(t => {
      const div = createDiv(t);
      const anim = div.animate({}, currentTest.input);
      if (currentTest.playbackRate !== undefined) {
        anim.playbackRate = currentTest.playbackRate;
      }

      assert_computed_timing_for_each_phase(
        anim,
        'progress',
        { before: currentTest.before,
          activeBoundary: currentTest.active,
          after: currentTest.after },
      );
    }, `${description}: ${testParams}`);
  }
}


// --------------------------------------------------------------------
//
// Zero iteration duration tests
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { iterations: 0,
                iterationStart: 0,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  },

  {
    input:    { iterations: 0,
                iterationStart: 0,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  },

  {
    input:    { iterations: 0,
                iterationStart: 0,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  },

  {
    input:    { iterations: 0,
                iterationStart: 2.5,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 0,
                iterationStart: 2.5,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 0,
                iterationStart: 2.5,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 0,
                iterationStart: 3,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  },

  {
    input:    { iterations: 0,
                iterationStart: 3,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  },

  {
    input:    { iterations: 0,
                iterationStart: 3,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0
  }
], 'Test zero iterations');


// --------------------------------------------------------------------
//
// Tests where the iteration count is an integer
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { iterations: 3,
                iterationStart: 0,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 1
  },

  {
    input:    { iterations: 3,
                iterationStart: 0,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0,
    after: 1
  },

  {
    input:    { iterations: 3,
                iterationStart: 0,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  },

  {
    input:    { iterations: 3,
                iterationStart: 2.5,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 3,
                iterationStart: 2.5,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 3,
                iterationStart: 2.5,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5
  },

  {
    input:    { iterations: 3,
                iterationStart: 3,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 1
  },

  {
    input:    { iterations: 3,
                iterationStart: 3,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0,
    after: 1
  },

  {
    input:    { iterations: 3,
                iterationStart: 3,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  }
], 'Test integer iterations');


// --------------------------------------------------------------------
//
// Tests where the iteration count is a fraction
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { iterations: 3.5,
                iterationStart: 0,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0.5
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 0,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0,
    after: 0.5
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 0,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 2.5,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 1
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 2.5,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5,
    after: 1
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 2.5,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 3,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 0.5
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 3,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0,
    after: 0.5
  },

  {
    input:    { iterations: 3.5,
                iterationStart: 3,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  }
], 'Test fractional iterations');


// --------------------------------------------------------------------
//
// Tests where the iteration count is Infinity
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { iterations: Infinity,
                iterationStart: 0,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 1
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 0,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 0,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 2.5,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 2.5,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 2.5,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0.5,
    active: 0.5
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 3,
                duration: 0,
                delay: 1,
                fill: 'both' },
    before: 0,
    after: 1
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 3,
                duration: 100,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  },

  {
    input:    { iterations: Infinity,
                iterationStart: 3,
                duration: Infinity,
                delay: 1,
                fill: 'both' },
    before: 0,
    active: 0
  }
], 'Test infinity iterations');


// --------------------------------------------------------------------
//
// End delay tests
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: 50 },
    before: 0,
    active: 0,
    after: 1
  },

  {
    input:    { duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -50 },
    before: 0,
    active: 0,
    after: 0.5
  },

  {
    input:    { duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -100 },
    before: 0,
    active: 0,
    after: 0
  },

  {
    input:    { duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -200 },
    before: 0,
    active: 0,
    after: 0
  },

  {
    input:    { iterationStart: 0.5,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: 50 },
    before: 0.5,
    active: 0.5,
    after: 0.5
  },

  {
    input:    { iterationStart: 0.5,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -50 },
    before: 0.5,
    active: 0.5,
    after: 0
  },

  {
    input:    { iterationStart: 0.5,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -100 },
    before: 0.5,
    active: 0.5,
    after: 0.5
  },

  {
    input:    { iterations: 2,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -100 },
    before: 0,
    active: 0,
    after: 0
  },

  {
    input:    { iterations: 1,
                iterationStart: 2,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -50 },
    before: 0,
    active: 0,
    after: 0.5
  },

  {
    input:    { iterations: 1,
                iterationStart: 2,
                duration: 100,
                delay: 1,
                fill: 'both',
                endDelay: -100 },
    before: 0,
    active: 0,
    after: 0
  },
], 'Test end delay');


// --------------------------------------------------------------------
//
// Negative playback rate tests
//
// --------------------------------------------------------------------

runTests([
  {
    input:    { duration: 1,
                delay: 1,
                fill: 'both' },
    playbackRate: -1,
    before: 0,
    active: 1,
    after: 1
  },

  {
    input:    { duration: 0,
                delay: 1,
                fill: 'both' },
    playbackRate: -1,
    before: 0,
    after: 1
  },

  {
    input:    { duration: 0,
                iterations: 0,
                delay: 1,
                fill: 'both' },
    playbackRate: -1,
    before: 0,
    after: 0
  },
], 'Test negative playback rate');

</script>
</body>
mozilla-central
Deployed from 0549d7aefb93 at 2025-06-12T15:23:35Z.