137 lines
4.2 KiB
HTML
137 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Verify applied effect output 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: hidden;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
.contents {
|
|
/* Make scroll range 1000 to simplify the math and avoid rounding errors */
|
|
height: 1200px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
test(t => {
|
|
const effect = new KeyframeEffect(createDiv(t), { opacity: [0.3, 0.7] });
|
|
const animation = new Animation(effect, createScrollTimeline(t));
|
|
|
|
assert_equals(effect.getTiming().fill, "auto");
|
|
assert_equals(effect.getComputedTiming().fill, "none");
|
|
}, "Scroll based animation effect fill mode should return 'auto' for" +
|
|
" getTiming() and should return 'none' for getComputedTiming().")
|
|
|
|
/* All interesting transitions:
|
|
before start delay
|
|
at start delay
|
|
within active phase
|
|
at effect end
|
|
after effect end
|
|
|
|
test_case data structure:
|
|
fill_mode: {
|
|
scroll_percentage: ["state description", expected applied effect value]
|
|
}
|
|
*/
|
|
const test_cases = {
|
|
"none": {
|
|
0.10: ["before start delay", 1],
|
|
0.25: ["at start delay", 0.3],
|
|
0.50: ["at midpoint", 0.5],
|
|
0.75: ["at effect end", 1],
|
|
0.90: ["after effect end", 1]
|
|
},
|
|
"backwards": {
|
|
0.10: ["before start delay", 0.3],
|
|
0.25: ["at start delay", 0.3],
|
|
0.50: ["at midpoint", 0.5],
|
|
0.75: ["at effect end", 1],
|
|
0.90: ["after effect end", 1]
|
|
},
|
|
"forwards": {
|
|
0.10: ["before timeline start", 1],
|
|
0.25: ["at timeline start", 0.3],
|
|
0.50: ["in timeline range", 0.5],
|
|
0.75: ["at timeline end", 0.7],
|
|
0.90: ["after timeline end", 0.7]
|
|
},
|
|
"both": {
|
|
0.10: ["before timeline start", 0.3],
|
|
0.25: ["at timeline start", 0.3],
|
|
0.50: ["in timeline range", 0.5],
|
|
0.75: ["at timeline end", 0.7],
|
|
0.90: ["after timeline end", 0.7]
|
|
},
|
|
"auto": {
|
|
0.10: ["before timeline start", 1],
|
|
0.25: ["at timeline start", 0.3],
|
|
0.50: ["in timeline range", 0.5],
|
|
0.75: ["at timeline end", 1],
|
|
0.90: ["after timeline end", 1]
|
|
}
|
|
}
|
|
|
|
for (const fill_mode in test_cases) {
|
|
const scroll_percents = test_cases[fill_mode]
|
|
|
|
for (const scroll_percentage in scroll_percents) {
|
|
const expectation = scroll_percents[scroll_percentage];
|
|
|
|
const [test_name, expected_value] = expectation;
|
|
|
|
const description =
|
|
`Applied effect value ${test_name} with fill: ${fill_mode}`
|
|
promise_test(
|
|
create_scroll_timeline_fill_test(
|
|
fill_mode, scroll_percentage, expected_value),
|
|
description);
|
|
}
|
|
}
|
|
|
|
function create_scroll_timeline_fill_test(
|
|
fill_mode, scroll_percentage, expected){
|
|
return async t => {
|
|
const target = createDiv(t);
|
|
|
|
const timeline = createScrollTimeline(t);
|
|
const effect =
|
|
new KeyframeEffect(target,
|
|
{ opacity: [0.3, 0.7] },
|
|
{
|
|
fill: fill_mode,
|
|
/* Animation times normalized to fill scroll
|
|
range */
|
|
duration: 2000,
|
|
delay: 1000,
|
|
endDelay: 1000
|
|
});
|
|
const animation = new Animation(effect, timeline);
|
|
const scroller = timeline.source;
|
|
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();
|
|
|
|
assert_equals(parseFloat(window.getComputedStyle(target).opacity),
|
|
expected,
|
|
"animation effect applied property value");
|
|
}
|
|
}
|
|
</script>
|