Re: [csswg-drafts] [web-animations-1] Make animations become idle when they have an inactive timeline (#2066)

> Considering just play(), if the timeline becomes inactive while in the play-pending state, we'll transition to the "Play-pending (from idle)" state. But if we call play() on an animation with an inactive timeline, we'll transition to the "Play-pending (from running)" state. That seems inconsistent to me.

> I think they should both end up in the "Play-pending (from idle)" state and let the fill mode (combined with the phase of the timeline) determine if the effect is applied.

Please see below the chart if start time of scroll linked animations is initialized to zero for both active and inactive timelines (see #4842). This solves the inconsistency of the state @birtles pointed out and makes animation to produce unresolved current time when the timeline is inactive. 

![graph (1)](https://user-images.githubusercontent.com/7502502/78299658-24b1f380-74eb-11ea-8e0b-c873717b8d60.png)

[source](https://edotor.net/?engine=dot#digraph%20G%20%7B%0A%20%20node%20%5Bfontsize%3D8%5D%3B%0A%20%20%2F%2F%20States%0A%20%20%22Idle%22%20%5Blabel%3D%22Idle%5CnST%20%3D%20null%5CnHT%20%3D%20null%5CnTask%20%3D%20none%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dunresolved%5Cnplay_state%3Didle%22%5D%0A%20%20%20%20subgraph%20cluster_0%20%7B%0A%20%20%20%20%20%20%20%20style%3Dfilled%3B%0A%20%20%20%20%20%20%20%20color%3Dlightgrey%3B%0A%20%20%20%20%20%20%20%20node%20%5Bstyle%3Dfilled%2Ccolor%3Dwhite%5D%3B%0A%20%20%20%20%20%20%20%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20%5Blabel%3D%22Play-pending%20HT%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20play%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Drunning%22%2C%20color%3Dyellow%5D%0A%20%20%20%20%20%20%20%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20%5Blabel%3D%22Play-pending%20ST%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20play%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dnull%5Cnplay_state%3Drunning%22%2C%20color%3Dlightyellow1%5D%0A%20%20%20%20%20%20%20%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20%5Blabel%3D%22Pause-pending%20HT%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20pause%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Dpaused%22%2C%20color%3Dlightskyblue1%5D%0A%20%20%20%20%20%20%20%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5Blabel%3D%22Pause-pending%20ST%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20pause%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dnull%5Cnplay_state%3Dpaused%22%2C%20color%3Daquamarine2%5D%0A%20%20%20%20%20%20%20%20%22Running%20(TL%20Inactive)%22%20%5Blabel%3D%22Running%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20none%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dnull%5Cnplay_state%3Drunning%22%2C%20color%3Dlemonchiffon2%5D%0A%20%20%20%20%20%20%20%20%22Paused%20(TL%20Inactive)%22%20%5Blabel%3D%22Paused%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20none%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Dpaused%22%2C%20color%3Dgold1%5D%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20label%20%3D%20%22Timeline%20Inactive%22%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20subgraph%20cluster_1%20%7B%0A%20%20%20%20%20%20%20%20node%20%5Bstyle%3Dfilled%20fontsize%3D8%5D%3B%20%20%20%20%20%0A%20%20%20%20%20%20%20%20label%20%3D%20%22Timeline%20Active%22%3B%0A%20%20%20%20%20%20%20%20color%3Dblue%0A%20%20%20%20%20%20%20%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20%5Blabel%3D%22Play-pending%20HT%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20play%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Drunning%22%2C%20color%3Dyellow%5D%0A%20%20%20%20%20%20%20%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20%5Blabel%3D%22Play-pending%20ST%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20play%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Drunning%22%2C%20color%3Dlightyellow1%5D%0A%20%20%20%20%20%20%20%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20%5Blabel%3D%22Pause-pending%20HT%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20pause%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Dpaused%22%2C%20color%3Dlightskyblue1%5D%0A%20%20%20%20%20%20%20%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5Blabel%3D%22Pause-pending%20ST%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20pause%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Dpaused%22%2C%20color%3Daquamarine2%5D%0A%20%20%20%20%20%20%20%20%22Running%20(TL%20Active)%22%20%5Blabel%3D%22Running%5CnST%20%3D%20resolved%5CnHT%20%3D%20null%5CnTask%20%3D%20none%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Drunning%22%2C%20color%3Dlemonchiffon2%5D%0A%20%20%20%20%20%20%20%20%22Paused%20(TL%20Active)%22%20%5Blabel%3D%22Paused%5CnST%20%3D%20null%5CnHT%20%3D%20resolved%5CnTask%20%3D%20none%5Cn%3D%3D%3D%3D%3D%3D%3D%5Cncurrent_time%3Dresolved%5Cnplay_state%3Dpaused%22%2C%20color%3Dgold1%5D%0A%0A%20%20%20%20%7D%0A%20%20%0A%20%20%0A%20%20%2F%2F%20Idle%20state%0A%20%20%22Idle%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Idle%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Idle%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Idle%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%0A%20%20%2F%2F%20Play-pending%20(HT%2C%20TL%20Active)%20state%0A%20%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Running%20(TL%20Active)%22%20%5B%20label%3D%22ready%22%20style%3Ddashed%20%5D%0A%20%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%0A%20%20%2F%2F%20Play-pending%20state%20(ST%2C%20TL%20Active)%0A%20%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Running%20(TL%20Active)%22%20%5B%20label%3D%22ready%22%20style%3Ddashed%20%5D%0A%20%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%0A%20%20%2F%2F%20Pause-pending%20(HT%2C%20TL%20Active)%20state%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Paused%20(TL%20Active)%22%20%5B%20label%3D%22ready%22%20style%3Ddashed%20%5D%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%0A%20%20%2F%2F%20Pause-pending%20(ST%2C%20TL%20Active)%20state%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Paused%20(TL%20Active)%22%20%5B%20label%3D%22ready%22%20style%3Ddashed%20%5D%0A%20%20%2F%2F%20(Following%20is%20the%20aborted%20paused%20behavior)%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%0A%20%20%2F%2F%20Running%20state%0A%20%20%22Running%20(TL%20Active)%22%20-%3E%20%22Running%20(TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Running%20(TL%20Active)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Running%20(TL%20Active)%22%20-%3E%20%22Running%20(TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%0A%20%20%2F%2F%20Paused%20state%0A%20%20%22Paused%20(TL%20Active)%22%20-%3E%20%22Paused%20(TL%20Active)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Paused%20(TL%20Active)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Paused%20(TL%20Active)%22%20-%3E%20%22Paused%20(TL%20Inactive)%22%20%5B%20label%3D%22Inactive%22%20color%3D%22gray%22%20%5D%0A%20%20%0A%20%20%2F%2FPlay-pending%20(HT%2C%20TL%20Inactive)%20state%0A%20%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%20%20%0A%20%20%2F%2FPlay-pending%20(ST%2C%20TL%20Inactive)%0A%20%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%20%20%0A%20%20%2F%2FPause-pending%20(HT%2C%20TL%20Inactive)%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Pause-pending%20(HT%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(HT%2C%20TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%20%20%0A%20%20%2F%2FPause-pending%20(ST%2C%20TL%20Inactive)%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Play-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%20%20%0A%20%20%2F%2FTL%20Inactive%0A%20%20%22Running%20(TL%20Inactive)%22%20-%3E%20%22Running%20(TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Running%20(TL%20Inactive)%22%20-%3E%20%22Pause-pending%20(ST%2C%20TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Running%20(TL%20Inactive)%22%20-%3E%20%22Running%20(TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%20%20%0A%20%20%2F%2FPaused%20(TL%20Inactive)%0A%20%20%22Paused%20(TL%20Inactive)%22%20-%3E%20%22Paused%20(TL%20Inactive)%22%20%5B%20label%3D%22pause()%22%20color%3D%22green%22%20%5D%0A%20%20%22Paused%20(TL%20Inactive)%22%20-%3E%20%22Play-pending%20(HT%2C%20TL%20Inactive)%22%20%5B%20label%3D%22play()%22%20color%3D%22red%22%20%5D%0A%20%20%22Paused%20(TL%20Inactive)%22%20-%3E%20%22Paused%20(TL%20Active)%22%20%5B%20label%3D%22Active%22%20color%3D%22black%22%20%5D%0A%7D%0A) 

-- 
GitHub Notification of comment by ogerchikov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2066#issuecomment-608095330 using your GitHub account

Received on Thursday, 2 April 2020 21:19:46 UTC