mirror of
https://github.com/servo/servo.git
synced 2025-08-11 00:15:32 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,216 @@
|
|||
<!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;
|
||||
will-change: transform;
|
||||
}
|
||||
.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.source;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
|
||||
// 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();
|
||||
assert_true(animation.pending, "Animation is in pending state.");
|
||||
// Verify initial start and current times in Pending state.
|
||||
assert_percents_equal(animation.currentTime, 0,
|
||||
"The current time is zero in Pending state.");
|
||||
assert_percents_equal(animation.startTime, 0,
|
||||
"The start time is zero in Pending state.");
|
||||
|
||||
await animation.ready;
|
||||
// Verify initial start and current times in Playing state.
|
||||
assert_percents_equal(animation.currentTime, 0,
|
||||
"The current time is zero in Playing state.");
|
||||
assert_percents_equal(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.4 * maxScroll;
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
assert_percents_equal(animation.currentTime, animation.timeline.currentTime,
|
||||
"The current time corresponds to the scroll position of the scroller.");
|
||||
assert_times_equal(
|
||||
animation.effect.getComputedTiming().progress,
|
||||
// Division by 100 is temporary, it will be removed when progress returns
|
||||
// a CSSNumericValue instead of a double 0-1
|
||||
animation.timeline.currentTime.value / 100,
|
||||
'Effect progress 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.source;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
|
||||
// Advance the scroller.
|
||||
scroller.scrollTop = 0.2 * maxScroll;
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
|
||||
// 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_percents_equal(animation.currentTime, animation.timeline.currentTime,
|
||||
"The current time is a hold time in Pending state.");
|
||||
assert_percents_equal(animation.startTime, 0,
|
||||
"The start time is zero in Pending state.");
|
||||
|
||||
await animation.ready;
|
||||
// Verify initial start and current times in Playing state.
|
||||
assert_percents_equal(animation.currentTime, animation.timeline.currentTime,
|
||||
"The current corresponds to the scroll position of the scroller.");
|
||||
assert_percents_equal(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.source;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
|
||||
// Advance the scroller.
|
||||
scroller.scrollTop = 0.4 * maxScroll;
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
|
||||
// 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_percents_equal(animation1.currentTime, timeline.currentTime,
|
||||
"The current time corresponds to the scroll position of the scroller" +
|
||||
" in Pending state.");
|
||||
assert_percents_equal(animation1.startTime, 0,
|
||||
"The start time is zero in Pending state.");
|
||||
assert_percents_equal(animation2.currentTime, timeline.currentTime,
|
||||
"The current time corresponds to the scroll position of the scroller" +
|
||||
" in Pending state.");
|
||||
assert_percents_equal(animation2.startTime, 0,
|
||||
"The start time is zero in Pending state.");
|
||||
|
||||
await animation1.ready;
|
||||
await animation2.ready;
|
||||
// Verify initial start and current times in Playing state.
|
||||
assert_percents_equal(animation1.currentTime, timeline.currentTime,
|
||||
"The current corresponds to the scroll position of the scroller.");
|
||||
assert_percents_equal(animation1.startTime, 0,
|
||||
"The start time is zero in Playing state.");
|
||||
assert_percents_equal(animation2.currentTime, timeline.currentTime,
|
||||
"The current corresponds to the scroll position of the scroller.");
|
||||
assert_percents_equal(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.source;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
|
||||
animation.play();
|
||||
await animation.ready;
|
||||
// Advance the scroller to max position.
|
||||
scroller.scrollTop = maxScroll;
|
||||
|
||||
await animation.finished;
|
||||
|
||||
assert_equals(animation.playState, 'finished',
|
||||
'Animation state is in finished state.');
|
||||
assert_percents_equal(animation.currentTime, 100,
|
||||
'Animation current time is at 100% on reverse scrolling.');
|
||||
|
||||
// Scroll back.
|
||||
scroller.scrollTop = 0.2 * maxScroll;
|
||||
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
// Verify animation state and current time on reverse scrolling.
|
||||
assert_equals(animation.playState, 'running',
|
||||
'Animation state is playing on reverse scrolling.');
|
||||
assert_percents_equal(animation.currentTime, 20,
|
||||
'Animation current time is updated on reverse scrolling.');
|
||||
}, 'Finished animation plays on reverse scrolling.');
|
||||
|
||||
promise_test(async t => {
|
||||
const animation = createScrollLinkedAnimation(t);
|
||||
const scroller = animation.timeline.source;
|
||||
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
||||
|
||||
animation.play();
|
||||
await animation.ready;
|
||||
|
||||
// Advance the scroller to max position.
|
||||
scroller.scrollTop = maxScroll;
|
||||
await animation.finished;
|
||||
|
||||
var sent_finish_event = false;
|
||||
animation.onfinish = function() {
|
||||
sent_finish_event = true;
|
||||
};
|
||||
|
||||
// Scroll back.
|
||||
scroller.scrollTop = 0.2 * maxScroll;
|
||||
// Wait for new animation frame which allows the timeline to compute new
|
||||
// current time.
|
||||
await waitForNextFrame();
|
||||
assert_false(sent_finish_event,
|
||||
"No animation finished event is sent on reverse scroll.");
|
||||
|
||||
scroller.scrollTop = maxScroll;
|
||||
await animation.finished;
|
||||
|
||||
// Wait for next frame to allow the animation to send finish events. The
|
||||
// finished promise fires before events are sent.
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_true(sent_finish_event,
|
||||
"Animation finished event is sent on reaching max scroll.");
|
||||
}, 'Sending animation finished events by finished animation on reverse ' +
|
||||
'scrolling.');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue