Skip to content
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

Rename Animation.progress to Animation.overallProgress #49385

Merged
merged 1 commit into from
Nov 27, 2024
Merged

Rename Animation.progress to Animation.overallProgress #49385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 28 additions & 16 deletions web-animations/interfaces/Animation/overallProgress.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,47 +16,55 @@
const animation = new Animation(null);
animation.startTime = document.timeline.currentTime;
assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');
assert_equals(animation.overallProgress, null, 'overallProgress is unresolved');
}, 'overallProgress of a newly created animation without an effect is unresolved');
assert_equals(animation.overallProgress, null,
'overallProgress is unresolved');
}, 'overallProgress of a newly created animation without an effect is ' +
'unresolved');

test(t => {
// currentTime should be unresolved because the animation has no associated
// timeline.
const animation = new Animation(new KeyframeEffect(createDiv(t), null), null);
assert_equals(animation.currentTime, null, 'currentTime is unresolved');
assert_equals(animation.overallProgress, null, 'overallProgress is unresolved');
}, 'overallProgress of an animation whose currentTime is unresolved is unresolved.');
assert_equals(animation.overallProgress, null,
'overallProgress is unresolved');
}, 'overallProgress of an animation whose currentTime is unresolved is ' +
'unresolved.');

test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: 0 }), document.timeline);
// Set the startTime to 20 seconds into the future.
animation.startTime = document.timeline.currentTime + 20 * MS_PER_SEC;
assert_less_than(animation.currentTime, 0, 'currentTime is negative');
assert_approx_equals(animation.overallProgress, 0, 0.01, 'overallProgress is zero');
}, "overallProgress of an animation whose effect's endTime is zero is zero if its " +
"currentTime is negative.");
assert_approx_equals(animation.overallProgress, 0, 0.01, 'overallProgress ' +
'is zero');
}, "overallProgress of an animation whose effect's endTime is zero is zero " +
"if its currentTime is negative.");

test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: 0 }), document.timeline);
animation.startTime = document.timeline.currentTime;
assert_time_equals_literal(animation.currentTime, 0, 'currentTime is zero');
assert_approx_equals(animation.overallProgress, 1, 0.01, 'overallProgress is one');
assert_approx_equals(animation.overallProgress, 1, 0.01,
'overallProgress is one');

animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;
assert_greater_than(animation.currentTime, 0, 'currentTime greater than zero');
assert_approx_equals(animation.overallProgress, 1, 0.01, 'overallProgress is one');
}, "overallProgress of an animation whose effect's endTime is zero is one if its " +
"currentTime is non-negative.");
assert_approx_equals(animation.overallProgress, 1, 0.01,
'overallProgress is one');
}, "overallProgress of an animation whose effect's endTime is zero is one if " +
"its currentTime is non-negative.");

test(t => {
const animation = new Animation(new KeyframeEffect(createDiv(t), null,
{ duration: Infinity }), document.timeline);

animation.startTime = document.timeline.currentTime - 20 * MS_PER_SEC;
assert_greater_than(animation.currentTime, 0, 'currentTime is positive');
assert_approx_equals(animation.overallProgress, 0, 0.01, 'overallProgress is zero');
assert_approx_equals(animation.overallProgress, 0, 0.01,
'overallProgress is zero');
}, "overallProgress of an animation whose effect's endTime is infinity is zero.");

test(t => {
Expand All @@ -66,16 +74,20 @@

animation.startTime = document.timeline.currentTime - 50 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC, 'currentTime is 100s');
assert_approx_equals(animation.overallProgress, 0.5, 0.01, 'overallProgress is zero');
assert_approx_equals(animation.overallProgress, 0.5, 0.01,
'overallProgress is zero');

animation.startTime = document.timeline.currentTime - 100 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC, 'currentTime is 200s');
assert_approx_equals(animation.overallProgress, 1, 0.01, 'overallProgress is one');
assert_approx_equals(animation.overallProgress, 1, 0.01,
'overallProgress is one');

animation.startTime = document.timeline.currentTime - 150 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 300 * MS_PER_SEC, 'currentTime is 300s');
assert_approx_equals(animation.overallProgress, 1, 0.01, 'overallProgress is still one');
}, "overallProgress of an animation is calculated by currentTime / effect endTime.");
assert_approx_equals(animation.overallProgress, 1, 0.01,
'overallProgress is still one');
}, "overallProgress of an animation is calculated by " +
"currentTime / effect endTime.");

</script>
</body>
37 changes: 20 additions & 17 deletions web-animations/interfaces/Animation/scroll-timeline-overallProgress.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,18 @@
// Verify initial start and current times once ready.
assert_percents_equal(animation.currentTime, 0,
"The current time is resolved when ready.");
assert_equals(animation.overallProgress, 0, "The overallProgress should be zero.");
assert_equals(animation.overallProgress, 0,
"The overallProgress should be zero.");

scroller.scrollTop = 0.4 * maxScroll;

await waitForNextFrame();
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects progress as a percentage");
"currentTime reflects overallProgress as a percentage");
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
"The overallProgress should match the scroll progress.");
}, "animation.overallProgress reflects the progress of a scroll animation as a "+
"number between 0 and 1");
}, "animation.overallProgress reflects the progress of a scroll animation as " +
"a number between 0 and 1");

promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
Expand All @@ -74,13 +75,14 @@
// Verify initial start and current times once ready.
assert_percents_equal(animation.currentTime, 0,
"The current time is resolved when ready.");
assert_equals(animation.overallProgress, 0, "The overallProgress should be zero.");
assert_equals(animation.overallProgress, 0,
"The overallProgress should be zero.");

scroller.scrollTop = 0.4 * maxScroll;
await waitForNextFrame();

let timing = animation.effect.getComputedTiming();
// iteration duration should be 100%, progress should reflect 40%.
// iteration duration should be 100%, overallProgress should reflect 40%.
assert_percents_equal(timing.duration, 100);
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects progress as a percentage");
Expand All @@ -91,14 +93,14 @@
animation.effect.updateTiming({ iterations: 2 });

timing = animation.effect.getComputedTiming();
// iteration duration should be 50%, progress should still reflect 40%
// iteration duration should be 50%, overallProgress should still reflect 40%
// as it measures currentTime / effect endTime.
assert_percents_equal(timing.duration, 50);
assert_percents_equal(animation.currentTime, 40,
"currentTime reflects progress as a percentage");
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
"The overallProgress should match the scroll progress.");
}, "animation.overallProgress reflects the overall progress of a scroll animation " +
"The overallProgress is should match the scroll progress.");
}, "animation.overallProgress reflects the overall progress of a scroll " +
"with multiple iterations.");

promise_test(async t => {
Expand Down Expand Up @@ -127,9 +129,10 @@
assert_percents_equal(animation.currentTime, expected_current_time,
"currentTime reflects progress as a percentage");
assert_approx_equals(animation.overallProgress, target_pct / 100, 0.01,
"overallProgress should reflect fraction of view timeline range scroll through.");
}, "animation.overallProgress reflects the overall progress of a scroll animation " +
"that uses a view-timeline.");
"overallProgress should reflect fraction of view timeline range scroll "
+ "through.");
}, "animation.overallProgress reflects the overall progress of a scroll "
+ "that uses a view-timeline.");

promise_test(async t => {
const scroller = createScroller(t);
Expand All @@ -151,16 +154,16 @@
await waitForNextFrame();
let timing = animation.effect.getComputedTiming();
assert_less_than(animation.currentTime.value, 0, "currentTime is negative");
assert_approx_equals(animation.overallProgress, 0, 0.01, "overallProgress is zero when " +
"scroll offset is less than range start.");
assert_approx_equals(animation.overallProgress, 0, 0.01, "overallProgress " +
"is zero when scroll offset is less than range start.");

scroller.scrollTop = 200;
await waitForNextFrame();
assert_approx_equals(animation.currentTime.value, timing.endTime.value, 0.01,
"currentTime has reached endTime");
assert_approx_equals(animation.overallProgress, 1, 0.01, "overallProgress is one when " +
"scroll offset goes past than range end.");
}, "overallProgresss of a view-timeline is bounded between 0 and 1.");
assert_approx_equals(animation.overallProgress, 1, 0.01, "overallProgress " +
"is one when scroll offset goes past than range end.");
}, "overallProgress of a view-timeline is bounded between 0 and 1.");

</script>
</body>