1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
<!DOCTYPE html>
<title>Used values of view-timeline properties</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; }
to { z-index: 100; }
}
.scroller {
overflow: hidden;
width: 100px;
height: 100px;
}
.scroller > div {
width: 300px;
height: 300px;
z-index: -1;
}
</style>
<main id=main></main>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
}
async function scrollTop(e, value) {
e.scrollTop = value;
await waitForNextFrame();
}
async function scrollLeft(e, value) {
e.scrollLeft = value;
await waitForNextFrame();
}
</script>
<template id=omitted_axis>
<style>
#target {
view-timeline-name: t1, t2; /* Two items */
view-timeline-axis: inline; /* One item */
animation: anim 1s linear;
animation-timeline: t2;
}
</style>
<div id=scroller class=scroller>
<div id=target></div>
</div>
</template>
<script>
promise_test(async (t) => {
inflate(t, omitted_axis);
assert_equals(getComputedStyle(target).zIndex, '-1');
// enter 0% is at scrollTop/Left = -100
// exit 100% is at scrollTop/Left = 300
// This means that at scrollTop/Left=0, the animation is at 25%.
await scrollTop(scroller, 0);
await scrollLeft(scroller, 0);
assert_equals(getComputedStyle(target).zIndex, '25');
// The timeline should be inline-axis:
await scrollTop(scroller, 100); // 50%
await scrollLeft(scroller, 40); // 35%
assert_equals(getComputedStyle(target).zIndex, '35');
}, 'Use the last value from view-timeline-axis if omitted');
</script>
<template id=omitted_inset>
<style>
#target {
view-timeline-name: t1, t2; /* Two items */
view-timeline-inset: 100px; /* One item */
animation: anim 1s linear;
animation-timeline: t2;
}
</style>
<div id=scroller class=scroller>
<div id=target></div>
</div>
</template>
<script>
promise_test(async (t) => {
inflate(t, omitted_inset);
assert_equals(getComputedStyle(target).zIndex, '-1');
// 0% is normally at at scrollTop = -100
// 100% is normally at scrollTop/Left = 300
// However, we have a 100px inset in both ends, which makes the
// range [0, 200].
await scrollTop(scroller, 0);
assert_equals(getComputedStyle(target).zIndex, '0');
await scrollTop(scroller, 100); // 50%
assert_equals(getComputedStyle(target).zIndex, '50');
}, 'Use the last value from view-timeline-inset if omitted');
</script>
|
