[Webkit-unassigned] [Bug 199529] New: [Web Animations] setting currentTime during to a time in delay/endDelay does not render properly for accelerated animations

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=199529

            Bug ID: 199529
           Summary: [Web Animations] setting currentTime during to a time
                    in delay/endDelay does not render properly for
                    accelerated animations
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dwilson1 at gmail.com
                CC: dino at apple.com

Filled Animations created by the Web Animations API (appears to be limited to accelerated animations like transform) do not render visually in the correct state when updating `currentTime` while paused to a value that is inside a `delay` or `endDelay`. It will resync to the proper state when calling `play()`.

Example:
https://codepen.io/danwilson/pen/xoaRGV?editors=0011

In the example, the input range acts as a scrubber for the timeline. It moves while the animation continues, and if you drag the nib it will seek through the animation. The animation here is 2000ms long, with delays of 4000ms on either side. The animation runs as expected unless you try to seek to a new point that is in the delay areas. Instead of showing the starting state while in the delay period or the ending state for the endDelay, it shows different states of the primary animation. As soon as you let go (and start playing the animation again) it corrects and gets to the proper currentTime.

You can also use the console and pause the animation directly and set the currentTime to something between 0ms and 4000ms (or 6000ms to 10000ms) to see how it does not respect the fill mode state.

I tried recreating with a marginLeft animation, and this issue did not happen, so it feels limited to transform or accelerated animations.

Steps to Reproduce:
1. Set up an animation such as:

let animation = element.animate([ { transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' } ], {
  duration: 9000,
  delay: 10000,
  fill: 'both'
});

2. Pause the animation and update the currentTime to 9000 (still within the delay section)

animation.pause();
animation.currentTime = 9000;


Expected Results:
Animation displays the starting state.

Actual Results:
Animation displays the end state (the state that would appear at 9000 if there was a delay of 0ms)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190705/6941d0d7/attachment-0001.html>