W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

[csswg-drafts] [web-animations-1] Pausing and setting the current time to animation duration resets the play state to finished

From: Antoine Quint via GitHub <sysbot+gh@w3.org>
Date: Sat, 24 Feb 2018 11:40:13 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-299934913-1519472412-sysbot+gh@w3.org>
graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] Pausing and setting the current time to animation duration resets the play state to finished ==
The following test fails in a WebKit development branch I'm working on:

```javascript
promise_test(t => {
  const div = createDiv(t);
  const animation = div.animate({}, 100 * MS_PER_SEC);
  // Setup callback to run if finished promise is resolved
  let finishPromiseResolved = false;
  animation.finished.then(() => {
    finishPromiseResolved = true;
  });
  return animation.ready.then(() => {
    // Jump to mid-way in interval and pause
    animation.currentTime = 100 * MS_PER_SEC / 2;
    animation.pause();
    // Jump to the end
    animation.currentTime = 100 * MS_PER_SEC;
    return waitForAnimationFrames(2);
  }).then(() => {
    assert_false(finishPromiseResolved,
                 'Finished promise should not resolve when pause-pending');
  });
}, 'Finished promise does not resolve when pause-pending');
```

The issue that I see is that the playState is no longer `paused` once we set `currentTime` to `100ms` after the call to `pause()`.

>From my reading of the spec, when `pause()` is called the *hold time* is set in the [pending pause task](https://drafts.csswg.org/web-animations/#pending-pause-task) which is performed asynchronously. So when the call to `pause` returns, the *hold time* is unresolved and the *start time* is resolved.

Then we [set the current time](https://drafts.csswg.org/web-animations/#set-the-current-time) to `100ms` and start by [silently setting the current time](https://drafts.csswg.org/web-animations/#silently-set-the-current-time). We then have these two options:

> Update either animation’s hold time or start time as follows:
>
> If any of the following conditions are true:
>     animation’s hold time is resolved, or
>     animation’s start time is unresolved, or
>     animation has no associated timeline or the associated timeline is inactive, or
>     animation’s playback rate is 0,
>   Set animation's hold time to seek time.
> Otherwise,
>   Set animation's start time to the result of evaluating *`timeline time - (seek time / playback rate)`* where timeline time is the current time value of timeline associated with animation.

So we execute the "Otherwise" clause since none of the conditions of the first clause are true. I think the reason we check whether the *hold time* is resolved is to identify whether the animation is currently paused. If that is the case, then shouldn't we check its *play state* instead? This would account for the *pending paused task*.

As a result, currently, [setting the start time](https://drafts.csswg.org/web-animations/#setting-the-start-time-of-an-animation) will cancel the *pending pause task* and the finished promise will resolve when the [finish notification steps](https://drafts.csswg.org/web-animations/#finish-notification-steps) are executed.

Note that letting the *pending pause task* run before updating the `currentTime` to `100ms` makes the test work as expected:

```javascript
promise_test(t => {
  const div = createDiv(t);
  const animation = div.animate({}, 100 * MS_PER_SEC);
  // Setup callback to run if finished promise is resolved
  let finishPromiseResolved = false;
  animation.finished.then(() => {
    finishPromiseResolved = true;
  });
  return animation.ready.then(() => {
    // Jump to mid-way in interval and pause
    animation.currentTime = 100 * MS_PER_SEC / 2;
    animation.pause();
    animation.ready.then(() => {
        // Jump to the end
        animation.currentTime = 100 * MS_PER_SEC;
    });
    return waitForAnimationFrames(2);
  }).then(() => {
    assert_false(finishPromiseResolved,
                 'Finished promise should not resolve when pause-pending');
  });
}, 'Finished promise does not resolve when pause-pending');
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2357 using your GitHub account
Received on Saturday, 24 February 2018 11:40:50 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:24 UTC