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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>TimelineTrigger constructor</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations-2/#the-animationtrigger-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<script>
test(t => {
const trigger = new TimelineTrigger();
assert_equals(trigger.ranges.length, 0);
}, "Empty ranges when no list is supplied.");
test(t => {
const trigger = new TimelineTrigger([]);
assert_equals(trigger.ranges.length, 0);
}, "Empty ranges when empty list is supplied.");
test(t => {
const trigger = new TimelineTrigger([{}]);
assert_equals(trigger.ranges[0].timeline, document.timeline,
"default timeline is document.timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "normal", "default rangeStart is normal");
assert_equals(trigger.ranges[0].activationRangeEnd, "normal", "default rangeEnd is normal");
assert_equals(trigger.ranges[0].activeRangeStart, "auto",
"default exitRangeStart is normal");
assert_equals(trigger.ranges[0].activeRangeEnd, "auto",
"default exitRangeEnd is normal");
}, "Default values when an empty property bag is supplied.");
test(t => {
const scroll_timeline = new ScrollTimeline();
const trigger = new TimelineTrigger([{
timeline: scroll_timeline,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, scroll_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "cover 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "cover 90%",
"exitRangeEnd is supplied value");
}, "All values supplied (scroll timeline).");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"activationRangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"activationRangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "cover 10%",
"activeRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "cover 90%",
"activeRangeEnd is supplied value");
}, "All values supplied (view timeline).");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"activationRangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"activationRangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "contain 10%",
"activeRangeStart is copied from activationRangeStart");
assert_equals(trigger.ranges[0].activeRangeEnd, "contain 90%",
"activeRangeEnd is is copied from activationRangeEnd");
}, "Entry range supplied; active copied from entry");
test(t => {
const view_timeline = new ViewTimeline();
const trigger = new TimelineTrigger([{
timeline: view_timeline,
activeRangeStart: "contain 10%",
activeRangeEnd: "contain 90%",
}]);
assert_equals(trigger.ranges[0].timeline, view_timeline,
"timeline is supplied scroll timeline.");
assert_equals(trigger.ranges[0].activationRangeStart, "contain 10%",
"rangeStart is supplied value");
assert_equals(trigger.ranges[0].activationRangeEnd, "contain 90%",
"rangeEnd is supplied value");
assert_equals(trigger.ranges[0].activeRangeStart, "contain 10%",
"exitRangeStart is supplied value");
assert_equals(trigger.ranges[0].activeRangeEnd, "contain 90%",
"exitRangeEnd is supplied value");
}, "Active range supplied; entry copied from active");
test(t => {
assert_throws_js(TypeError, () => {
const trigger = new TimelineTrigger([{}, {}]);
});
}, "Multiple (empty) timelines not supported");
test(t => {
const view_timeline = new ViewTimeline();
const range = {
timeline: view_timeline,
activationRangeStart: "contain 10%",
activationRangeEnd: "contain 90%",
activeRangeStart: "cover 10%",
activeRangeEnd: "cover 90%"
};
assert_throws_js(TypeError, () => {
const trigger = new TimelineTrigger([range, range]);
});
}, "Multiple timelines not supported");
</script>
|
