Revision control

1
<body>
2
<style>
3
4
body {
5
background-color: green;
6
}
7
8
div {
9
position: absolute;
10
top: 0;
11
height: 100px;
12
animation-duration: 1s;
13
}
14
15
#implicit {
16
left: 0;
17
width: 100px;
18
background-color: red;
19
animation-name: implicit;
20
}
21
22
/* Allow for a 1px error on either side */
23
#explicit {
24
left: -1px;
25
width: 102px;
26
background-color: green;
27
animation-name: explicit;
28
animation-timing-function: ease;
29
}
30
31
@keyframes implicit {
32
0.001% { transform: translate(400px) }
33
}
34
35
@keyframes explicit {
36
0.001% {
37
transform: translate(400px);
38
animation-timing-function: ease;
39
}
40
}
41
42
</style>
43
<div id="implicit"></div>
44
<div id="explicit"></div>
45
<script>
46
47
(async function() {
48
if (window.testRunner)
49
testRunner.waitUntilDone();
50
51
await Promise.all(document.getAnimations().map(animation => animation.ready));
52
await new Promise(requestAnimationFrame);
53
await new Promise(requestAnimationFrame);
54
await new Promise(requestAnimationFrame);
55
56
if (window.testRunner)
57
testRunner.notifyDone();
58
})();
59
60
</script>
61
</body>