Skip to content

[web-animations-1] Fixed play animation procedure for scroll animations (#2075) #5059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 28, 2020
Merged

[web-animations-1] Fixed play animation procedure for scroll animations (#2075) #5059

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59820a4
Fixed play animation procedure for scroll animations.
ogerchikov May 11, 2020
d89aad9
Refactored play and pause procedures.
ogerchikov May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 33 additions & 65 deletions web-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,7 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
<var>animation</var> has a <a>pending pause task</a>, and false otherwise.
1. Let <var>has pending ready promise</var> be a boolean flag that is
initially false.
1. Let <var>performed seek</var> be a boolean flag that is initially false.
1. Let <var>seek time</var> be a <a>time value</a> that is initially <a>unresolved</a>.
1. Let <var>has finite timeline</var> be true if |animation| has an associated
<a>timeline</a> that is not [=monotonically increasing=].
1. Perform the steps corresponding to the <em>first</em> matching
Expand All @@ -1139,18 +1139,7 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
* <a>current time</a> &lt; zero, or
* <a>current time</a> &ge; <a>associated effect end</a>,

:: 1. Set <var>performed seek</var> to true.
1. Update either <var>animation</var>’s <a>start time</a> or
<a>hold time</a> as follows:

<div class="switch">

: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to zero.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to zero.

</div>
:: Set <var>seek time</var> to zero.

: If |animation|'s [=effective playback rate=] &lt; 0,
the <var>auto-rewind</var> flag is true and <em>either</em>
Expand All @@ -1166,40 +1155,32 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
:: <a>throw</a> an "{{InvalidStateError}}" {{DOMException}} and
abort these steps.
: Otherwise,
:: 1. Set <var>performed seek</var> to true.
1. Update either <var>animation</var>’s <a>start time</a> or
<a>hold time</a> as follows:

<div class="switch">

: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to <a>associated
effect end</a>.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to <a>associated
effect end</a>.

</div>
:: Set <var>seek time</var> to |animation|'s <a>associated effect end</a>.

</div>

: If |animation|'s [=effective playback rate=] = 0 and |animation|'s
[=current time=] is [=unresolved=],

:: 1. Set <var>performed seek</var> to true.
1. Update either <var>animation</var>’s <a>start time</a> or
<a>hold time</a> as follows:
:: Set <var>seek time</var> to zero.

</div>

<div class="switch">
1. If |seek time| is <a lt=unresolved>resolved</a>,

<div class="switch">

: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to zero.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to zero.
: If |has finite timeline| is true,
:: 1. Set <var>animation</var>'s <a>start time</a> to <var>seek time</var>.
1. Let |animation|'s [=hold time=] be <a>unresolved</a>.
1. [=Apply any pending playback rate=] on |animation|.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.

</div>
</div>

</div>
1. If <var>animation</var>'s <a>hold time</a> is <a lt=unresolved>resolved</a>,
let its [=start time=] be <a>unresolved</a>.

1. If <var>animation</var> has a <a>pending play task</a> or a
<a>pending pause task</a>,
Expand All @@ -1210,15 +1191,12 @@ as CSS Animations [[CSS-ANIMATIONS-1]].
1. If the following four conditions are <em>all</em> satisfied:

* |animation|'s [=hold time=] is [=unresolved=], and
* |performed seek| is false, and
* |seek time| is [=unresolved=], and
* |aborted pause| is false, and
* |animation| does <em>not</em> have a [=pending playback rate=],

abort this procedure.

1. If <var>animation</var>'s <a>hold time</a> is <a lt=unresolved>resolved</a>,
let its [=start time=] be <a>unresolved</a>.

1. If <var>has pending ready promise</var> is false,
let <var>animation</var>'s <a>current ready promise</a> be
<a>a new promise</a> in the <a>relevant Realm</a> of <var>animation</var>.
Expand Down Expand Up @@ -1343,6 +1321,7 @@ follows:
1. If <var>animation</var> has a <a>pending pause task</a>, abort these steps.
1. If the <a>play state</a> of <var>animation</var> is <a
lt="paused play state">paused</a>, abort these steps.
1. Let <var>seek time</var> be a <a>time value</a> that is initially <a>unresolved</a>.
1. Let <var>has finite timeline</var> be true if |animation| has an associated
<a>timeline</a> that is not [=monotonically increasing=].
1. If the <var>animation</var>'s <a>current time</a> is <a>unresolved</a>,
Expand All @@ -1351,18 +1330,7 @@ follows:
<div class="switch">

: If <var>animation</var>'s [=playback rate=] is &ge; 0,
:: Update either <var>animation</var>’s <a>start time</a> or
<a>hold time</a> as follows:

<div class="switch">

: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to zero.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to zero.

</div>

:: Set <var>seek time</var> to zero.
: Otherwise,
::
<div class="switch">
Expand All @@ -1372,23 +1340,23 @@ follows:
:: <a>throw</a> an "{{InvalidStateError}}" {{DOMException}}
and abort these steps.
: Otherwise,
:: Update either <var>animation</var>’s <a>start time</a> or
<a>hold time</a> as follows:
:: Set <var>seek time</var> to <var>animation</var>'s <a>associated effect
end</a>.

<div class="switch">
</div>

: If |has finite timeline| is true,
:: let <var>animation</var>'s <a>start time</a> be
<a>associated effect end</a>.
: Otherwise,
:: let <var>animation</var>'s <a>hold time</a> be
<a>associated effect end</a>.
</div>

</div>
1. If |seek time| is <a lt=unresolved>resolved</a>,

</div>
<div class="switch">

</div>
: If |has finite timeline| is true,
:: Set <var>animation</var>'s <a>start time</a> to <var>seek time</var>.
: Otherwise,
:: Set <var>animation</var>'s <a>hold time</a> to <var>seek time</var>.

</div>

1. Let <var>has pending ready promise</var> be a boolean flag that is
initially false.
Expand Down