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
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-trigger">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="support/support.js"></script>
</head>
<body>
<style>
.scroller {
overflow-y: scroll;
border: solid 1px;
justify-self: center;
height: 100%;
width: 100%;
display: inline-block;
}
.subject {
height: 100px;
width: 100%;
background-color: black;
}
.space {
height: 300px;
width: 90%;
justify-self: center;
}
#triggergrid {
timeline-scope: --viewtimeline;
height: 85vh;
width: 90vw;
display: grid;
grid-template-columns: 1fr 1fr;
.target {
align-self: center;
justify-self: center;
height: 100px;
width: 100px;
background-color: blue;
}
.space {
height: 130vh;
}
}
</style>
<div id="triggergrid">
<div id="target" class="target"></div>
<div id="scroller" class="scroller">
<div class="space"></div>
<div class="space"></div>
<div id="subjectanchor"></div>
<div id="subject" class="subject"></div>
<div class="space"></div>
<div class="space"></div>
</div>
</div>
<script>
const scroller = document.getElementById("scroller");
const target = document.getElementById("target");
const subject = document.getElementById("subject");
const subjectanchor = document.getElementById("subjectanchor");
const ANIMATION_DURATION_MS = 1;
promise_test(async () => {
setupAnimationAndTrigger(target, document.getElementById("subject"),
ANIMATION_DURATION_MS);
const animation = target.getAnimations()[0];
const initial_transform = getComputedStyle(target).transform;
// Sanity check that the trigger works: scroll into the trigger range,
// observe animation's effect.
const contain_0_offset = computeContainOffset(scroller,
document.getElementById("subject"), 0);
let animation_promise = waitForAnimation(
/*targetCurrentTime=*/ANIMATION_DURATION_MS, animation);
await waitForScrollReset(test, scroller, 0, contain_0_offset);
await animation_promise;
assert_not_equals(getComputedStyle(target).transform, initial_transform,
"entry triggers animation");
// Remove the trigger's timeline's subject from the DOM.
subject.remove();
const transform_after_removal = getComputedStyle(target).transform;
// Scroll outside the range.
await waitForScrollReset(test, scroller, 0, contain_0_offset - 100);
assert_equals(getComputedStyle(target).transform, transform_after_removal,
"exit does not trigger");
// Scroll into the range once again.
await waitForScrollReset(test, scroller, 0, contain_0_offset);
assert_equals(getComputedStyle(target).transform, transform_after_removal,
"re-entry does not trigger");
// Put the timeline trigger's subject back into the DOM.
subjectanchor.after(subject);
animation_promise = waitForAnimation(/*targetCurrentTime=*/0, animation);
// Scroll outside the range; should reverse the animation.
await waitForScrollReset(test, scroller, 0, contain_0_offset - 100);
// Make sure the playbackRate is reflected before waiting on the promise.
await waitForNextFrame();
await animation_promise;
assert_equals(getComputedStyle(target).transform, initial_transform,
"triggering is happening again.");
}, "triggering stops when a trigger's timeline subject is removed and" +
" restarts when reattached.");
</script>
</body>
</html>
|
