mirror of
https://github.com/servo/servo.git
synced 2025-10-17 08:49:21 +01:00
162 lines
No EOL
7 KiB
HTML
162 lines
No EOL
7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Test basic functionality of scroll linked animation.</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="testcommon.js"></script>
|
|
<style>
|
|
.scroller {
|
|
overflow: auto;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
.contents {
|
|
height: 1000px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
const timeRange = animation.timeline.timeRange;
|
|
|
|
// Verify initial start and current times in Idle state.
|
|
assert_equals(animation.currentTime, null,
|
|
"The current time is null in Idle state.");
|
|
assert_equals(animation.startTime, null,
|
|
"The start time is null in Idle state.");
|
|
animation.play();
|
|
// Verify initial start and current times in Pending state.
|
|
assert_equals(animation.currentTime, 0,
|
|
"The current time is a hold time in Pending state.");
|
|
assert_equals(animation.startTime, null,
|
|
"The start time is null in Pending state.");
|
|
|
|
await animation.ready;
|
|
// Verify initial start and current times in Playing state.
|
|
assert_equals(animation.currentTime, 0,
|
|
"The current time is zero in Playing state.");
|
|
assert_equals(animation.startTime, 0,
|
|
"The start time is zero in Playing state.");
|
|
|
|
// Now do some scrolling and make sure that the Animation current time is
|
|
// correct.
|
|
scroller.scrollTop = 0.2 * maxScroll;
|
|
// TODO(crbug.com/944449): After scroll offset snapshotting is implemented,
|
|
// scroll timeline current time, animation current time and effect local
|
|
// time will be updated on the same frame (which in this case will be the
|
|
// next frame).
|
|
assert_equals(animation.currentTime, animation.timeline.currentTime,
|
|
"The current time corresponds to the scroll position of the scroller.");
|
|
await waitForNextFrame();
|
|
assert_times_equal(
|
|
animation.effect.getComputedTiming().localTime,
|
|
animation.timeline.currentTime,
|
|
'Effect local time corresponds to the scroll position of the scroller.');
|
|
}, 'Animation start and current times are correct for each animation state.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
const timeRange = animation.timeline.timeRange;
|
|
// Advance the scroller.
|
|
scroller.scrollTop = 0.2 * maxScroll;
|
|
|
|
// Verify initial start and current times in Idle state.
|
|
assert_equals(animation.currentTime, null,
|
|
"The current time is null in Idle state.");
|
|
assert_equals(animation.startTime, null,
|
|
"The start time is null in Idle state.");
|
|
animation.play();
|
|
// Verify initial start and current times in Pending state.
|
|
assert_equals(animation.currentTime, animation.timeline.currentTime,
|
|
"The current time is a hold time in Pending state.");
|
|
assert_equals(animation.startTime, null,
|
|
"The start time is null in Pending state.");
|
|
|
|
await animation.ready;
|
|
// Verify initial start and current times in Playing state.
|
|
assert_equals(animation.currentTime, animation.timeline.currentTime,
|
|
"The current corresponds to the scroll position of the scroller.");
|
|
assert_equals(animation.startTime, 0,
|
|
"The start time is zero in Playing state.");
|
|
}, 'Animation start and current times are correct for each animation state' +
|
|
' when the animation starts playing with advanced scroller.');
|
|
|
|
promise_test(async t => {
|
|
const timeline = createScrollTimeline(t);
|
|
const animation1 = createScrollLinkedAnimation(t, timeline);
|
|
const animation2 = createScrollLinkedAnimation(t, timeline);
|
|
const scroller = timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
const timeRange = timeline.timeRange;
|
|
// Advance the scroller.
|
|
scroller.scrollTop = 0.2 * maxScroll;
|
|
|
|
// Verify initial start and current times in Idle state.
|
|
assert_equals(animation1.currentTime, null,
|
|
"The current time is null in Idle state.");
|
|
assert_equals(animation1.startTime, null,
|
|
"The start time is null in Idle state.");
|
|
assert_equals(animation2.currentTime, null,
|
|
"The current time is null in Idle state.");
|
|
assert_equals(animation2.startTime, null,
|
|
"The start time is null in Idle state.");
|
|
animation1.play();
|
|
animation2.play();
|
|
// Verify initial start and current times in Pending state.
|
|
assert_equals(animation1.currentTime, timeline.currentTime,
|
|
"The current time corresponds to the scroll position of the scroller" +
|
|
" in Pending state.");
|
|
assert_equals(animation1.startTime, null,
|
|
"The start time is null in Pending state.");
|
|
assert_equals(animation2.currentTime, timeline.currentTime,
|
|
"The current time corresponds to the scroll position of the scroller" +
|
|
" in Pending state.");
|
|
assert_equals(animation2.startTime, null,
|
|
"The start time is null in Pending state.");
|
|
|
|
await animation1.ready;
|
|
await animation2.ready;
|
|
// Verify initial start and current times in Playing state.
|
|
assert_equals(animation1.currentTime, timeline.currentTime,
|
|
"The current corresponds to the scroll position of the scroller.");
|
|
assert_equals(animation1.startTime, 0,
|
|
"The start time is zero in Playing state.");
|
|
assert_equals(animation2.currentTime, timeline.currentTime,
|
|
"The current corresponds to the scroll position of the scroller.");
|
|
assert_equals(animation2.startTime, 0,
|
|
"The start time is zero in Playing state.");
|
|
}, 'Animation start and current times are correct when multiple animations' +
|
|
' are attached to the same timeline.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
// Make the scroll timeline inactive.
|
|
scroller.style.overflow = "visible";
|
|
// Trigger layout;
|
|
scroller.scrollTop;
|
|
assert_equals(animation.timeline.currentTime, null,
|
|
"Timeline current time is null in inactive state.");
|
|
// Play the animation when the timeline is inactive.
|
|
animation.play();
|
|
// Make the scroll timeline active.
|
|
scroller.style.overflow = "auto";
|
|
await animation.ready;
|
|
// Ready promise is resolved as a result of the timeline becoming active.
|
|
assert_equals(animation.timeline.currentTime, 0,
|
|
"Timeline current time is resolved in active state.");
|
|
assert_equals(animation.currentTime, 0,
|
|
"Animation current time is resolved when the animation is ready.");
|
|
assert_equals(animation.startTime, 0,
|
|
"Animation start time is resolved when the animation is ready.");
|
|
}, 'Animation start and current times are correct if scroll timeline is ' +
|
|
'activated after animation.play call.');
|
|
</script> |