169 lines
6.2 KiB
HTML
169 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Animation.overallProgress</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/web-animations-2/#the-overall-progress-of-an-animation">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../../testcommon.js"></script>
|
|
<script src="../../../scroll-animations/scroll-timelines/testcommon.js"></script>
|
|
<body>
|
|
<style>
|
|
.scroller {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
height: 200px;
|
|
width: 100px;
|
|
will-change: transform;
|
|
}
|
|
.contents {
|
|
height: 1200px;
|
|
width: 100%;
|
|
}
|
|
#target {
|
|
height: 100px;
|
|
width: 100px;
|
|
background-color: green;
|
|
margin-top: -1000px;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.source;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
|
|
assert_equals(animation.currentTime, null,
|
|
"The current time is null in Idle state.");
|
|
assert_equals(animation.overallProgress, null,
|
|
"The overallProgress is null since the currentTime is unresolved.");
|
|
|
|
animation.play();
|
|
assert_true(animation.pending, "Animation is in the pending state.");
|
|
assert_equals(animation.currentTime, null,
|
|
"The current time remains null while in the pending state.");
|
|
assert_equals(animation.overallProgress, null,
|
|
"The overallProgress is null since the currentTime is unresolved.");
|
|
|
|
await animation.ready;
|
|
// 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.");
|
|
|
|
scroller.scrollTop = 0.4 * maxScroll;
|
|
|
|
await waitForNextFrame();
|
|
assert_percents_equal(animation.currentTime, 40,
|
|
"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");
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.source;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
|
|
animation.play();
|
|
await animation.ready;
|
|
// 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.");
|
|
|
|
scroller.scrollTop = 0.4 * maxScroll;
|
|
await waitForNextFrame();
|
|
|
|
let timing = animation.effect.getComputedTiming();
|
|
// 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");
|
|
assert_approx_equals(animation.overallProgress, 0.4, 0.01,
|
|
"The overallProgress should match the scroll progress.");
|
|
timing = animation.effect.getComputedTiming();
|
|
|
|
animation.effect.updateTiming({ iterations: 2 });
|
|
|
|
timing = animation.effect.getComputedTiming();
|
|
// 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 is should match the scroll progress.");
|
|
}, "animation.overallProgress reflects the overall progress of a scroll " +
|
|
"with multiple iterations.");
|
|
|
|
promise_test(async t => {
|
|
const scroller = createScroller(t);
|
|
const view_timeline = createViewTimeline(t);
|
|
|
|
const animation = createAnimation(t);
|
|
animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
|
|
animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
|
|
animation.timeline = view_timeline;
|
|
|
|
await animation.ready;
|
|
|
|
// Cover range is [0, 300]
|
|
// Contain range is [100, 200]
|
|
// rangeStart offset of 10% => 110px
|
|
// rangeEnd offset of 90% => 190px
|
|
const target_pct = 40;
|
|
const target_scroll_top = 110 + (target_pct / 100) * (190 - 110);
|
|
scroller.scrollTop = target_scroll_top;
|
|
await waitForNextFrame();
|
|
|
|
const start_time = 110 / 300 * 100;
|
|
const timeline_time = target_scroll_top / 300 * 100;
|
|
const expected_current_time = timeline_time - start_time;
|
|
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 "
|
|
+ "that uses a view-timeline.");
|
|
|
|
promise_test(async t => {
|
|
const scroller = createScroller(t);
|
|
const view_timeline = createViewTimeline(t);
|
|
|
|
const animation = createAnimation(t);
|
|
animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) };
|
|
animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) };
|
|
animation.timeline = view_timeline;
|
|
|
|
await animation.ready;
|
|
|
|
// Cover range is [0, 300]
|
|
// Contain range is [100, 200]
|
|
// rangeStart offset of 10% => 110px
|
|
// rangeEnd offset of 10% => 190px
|
|
|
|
scroller.scrollTop = 100;
|
|
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.");
|
|
|
|
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.");
|
|
}, "overallProgress of a view-timeline is bounded between 0 and 1.");
|
|
|
|
</script>
|
|
</body>
|