Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
#target {
7
position: absolute;
8
top: 0;
9
left: 0;
10
width: 100px;
11
height: 100px;
12
background-color: black;
13
animation: anim1 50ms forwards, anim2 5s 50ms;
14
}
15
16
@keyframes anim1 {
17
0%, 100% { background-color: red; }
18
50% { background-color: orange; }
19
}
20
21
@keyframes anim2 {
22
0% { transform: translateX(0) }
23
5%, 100% { transform: translateX(500px) }
24
}
25
26
body {
27
background-color: white;
28
}
29
30
#cache > div {
31
position: absolute;
32
background-color: white;
33
}
34
35
#cache > div:nth-of-type(1) {
36
top: 0;
37
left: 100px;
38
right: 0;
39
height: 100%;
40
}
41
42
#cache > div:nth-of-type(2) {
43
top: 100px;
44
left: 0;
45
bottom: 0;
46
width: 100%;
47
}
48
49
</style>
50
</head>
51
<body>
52
<div id="target"></div>
53
<div id="cache">
54
<div></div>
55
<div></div>
56
</div>
57
<script>
58
59
if (window.testRunner) {
60
testRunner.waitUntilDone();
61
document.getElementById("target").addEventListener("animationstart", event => {
62
if (event.animationName == "anim2")
63
setTimeout(() => testRunner.notifyDone(), 100);
64
});
65
}
66
67
</script>
68
</body>
69
</html>