mirror of
https://github.com/servo/servo.git
synced 2025-10-16 00:10:23 +01:00
154 lines
No EOL
6.2 KiB
HTML
154 lines
No EOL
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Verify timeline time, animation time, effect time and effect value for all fill modes in all timeline states: before start, at start, in range, at end, after end while using various effect delay values</title>
|
|
<meta name="timeout" content="long">
|
|
<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';
|
|
|
|
// Test cases are included where effect delay causes the effect iteration to
|
|
// overlap with the timeline start time and also the timeline end time.
|
|
// Timeline
|
|
// BEFORE +-----------------+ AFTER
|
|
// time: 0 timeRange
|
|
// 1) +--------+
|
|
// 2) +-------+
|
|
// 3) +------+
|
|
// 4) +------+
|
|
|
|
// Each entry is [[test input], [test expectations]]
|
|
// test input = ["description", delay, scroll percent]
|
|
// test expectations = [timeline time, animation current time,
|
|
// effect local time, effect progress, effect phase]
|
|
const test_cases = [
|
|
// Case 1: No delay. Effect starts at the same time as the timeline.
|
|
[["before timeline start", 0, 0.1 ], [0, 0, 0, null, "before"]],
|
|
[["at timeline start", 0, 0.2 ], [0, 0, 0, 0, "active"]],
|
|
[["in timeline range", 0, 0.5 ], [500, 500, 500, 0.833, "active"]],
|
|
|
|
// Case 2: Positive delay.
|
|
[["before timeline start", 100, 0.1 ], [0, 0, 0, null, "before"]],
|
|
[["at timeline start", 100, 0.2 ], [0, 0, 0, null, "before"]],
|
|
[["before effect delay", 100, 0.25], [83.333, 83.333, 83.333, null, "before"]],
|
|
[["at effect start", 100, 0.26], [100, 100, 100, 0, "active"]],
|
|
[["in timeline range", 100, 0.5 ], [500, 500, 500, 0.666, "active"]],
|
|
[["at effect end", 100, 0.62], [700, 700, 700, null, "after"]],
|
|
[["after effect end", 100, 0.65], [750, 700, 700, null, "after"]],
|
|
[["at timeline end", 100, 0.8 ], [1000, 700, 700, null, "after"]],
|
|
[["after timeline end", 100, 0.9 ], [1000, 700, 700, null, "after"]],
|
|
|
|
// Case 3: Negative delay.
|
|
// Can't test values for "before effect delay" and "at effect start" because
|
|
// they occur before the timeline start and are therefore unreachable.
|
|
[["before timeline start", -100, 0.1 ], [0, 0, 0, null, "before"]],
|
|
[["at timeline start", -100, 0.2 ], [0, 0, 0, 0.166, "active"]],
|
|
[["in timeline range", -100, 0.3 ], [166.666, 166.666, 166.666, 0.444, "active"]],
|
|
[["at effect end", -100, 0.5 ], [500, 500, 500, null, "after"]],
|
|
[["after effect end", -100, 0.51], [516.666, 500, 500, null, "after"]],
|
|
[["at timeline end", -100, 0.8 ], [1000, 500, 500, null, "after"]],
|
|
[["after timeline end", -100, 0.9 ], [1000, 500, 500, null, "after"]],
|
|
|
|
// Case 4: Effect delay is large enough to cause the effect to not finish
|
|
// before the timeline.
|
|
[["before timeline start", 500, 0.1 ], [0, 0, 0, null, "before"]],
|
|
[["at timeline start", 500, 0.2 ], [0, 0, 0, null, "before"]],
|
|
[["before effect delay", 500, 0.4 ], [333.333, 333.333, 333.333, null, "before"]],
|
|
[["at effect start", 500, 0.5 ], [500, 500, 500, 0, "active"]],
|
|
[["in timeline range", 500, 0.65], [750, 750, 750, 0.416, "active"]],
|
|
[["at timeline end", 500, 0.8 ], [1000, 1000, 1000, 0.833, "active"]],
|
|
[["after timeline end", 500, 0.9 ], [1000, 1000, 1000, 0.833, "active"]],
|
|
// Can't scroll past the end of the scroller and therefore cannot reach the
|
|
// effect end, so "at effect end" and "after effect end" states are not
|
|
// included.
|
|
];
|
|
|
|
for (const test_case of test_cases) {
|
|
const [inputs, expected] = test_case;
|
|
const [test_name, delay, scroll_percentage] = inputs;
|
|
|
|
const description = `Current times and effect phase ${test_name} when` +
|
|
` delay = ${delay} |`;
|
|
|
|
promise_test(
|
|
create_scroll_timeline_fill_test(delay, scroll_percentage, expected),
|
|
description);
|
|
}
|
|
|
|
function create_scroll_timeline_fill_test(delay, scroll_percentage, expected){
|
|
return async t => {
|
|
const target = createDiv(t);
|
|
const timeline = createScrollTimelineWithOffsets(t, "20%", "80%");
|
|
const effect = new KeyframeEffect(
|
|
target,
|
|
{
|
|
opacity: [0.3, 0.7]
|
|
},
|
|
{
|
|
duration: 600,
|
|
delay: delay
|
|
}
|
|
);
|
|
const animation = new Animation(effect, timeline);
|
|
const scroller = timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
|
|
scroller.scrollTop = scroll_percentage * maxScroll;
|
|
|
|
// Wait for new animation frame which allows the timeline to compute
|
|
// new current time.
|
|
await waitForNextFrame();
|
|
|
|
const [expected_timeline_current_time,
|
|
expected_animation_current_time,
|
|
expected_effect_local_time,
|
|
expected_effect_progress,
|
|
expected_effect_phase] = expected;
|
|
|
|
assert_times_equal(
|
|
animation.timeline.currentTime,
|
|
expected_timeline_current_time,
|
|
"timeline current time"
|
|
);
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
expected_animation_current_time,
|
|
"animation current time"
|
|
);
|
|
assert_times_equal(
|
|
animation.effect.getComputedTiming().localTime,
|
|
expected_effect_local_time,
|
|
"animation effect local time"
|
|
);
|
|
assert_approx_equals_or_null(
|
|
animation.effect.getComputedTiming().progress,
|
|
expected_effect_progress,
|
|
0.001,
|
|
"animation effect progress"
|
|
);
|
|
assert_phase_at_time(
|
|
animation,
|
|
expected_effect_phase,
|
|
animation.currentTime
|
|
);
|
|
}
|
|
}
|
|
</script> |