Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
div {
7
left: 0;
8
top: 0;
9
position: absolute;
10
height: 100px;
11
}
12
13
.mask {
14
/* We add an extra pixel to account for rounding errors */
15
width: 51px;
16
background-color: red;
17
}
18
19
#target {
20
width: 100px;
21
background-color: black;
22
}
23
24
#right {
25
left: 149px;
26
}
27
28
</style>
29
</head>
30
<body>
31
32
<div id="target"></div>
33
<div id="left" class="mask"></div>
34
<div id="right" class="mask"></div>
35
36
<script>
37
38
if (window.testRunner)
39
testRunner.waitUntilDone();
40
41
const animation = document.getElementById("target").animate({
42
transform: ["translateX(100px)", "none"]
43
}, { duration: 10000, delay: 1000 });
44
45
requestAnimationFrame(() => {
46
animation.pause();
47
animation.currentTime = 6000;
48
if (window.testRunner) {
49
requestAnimationFrame(() => {
50
requestAnimationFrame(() => testRunner.notifyDone())
51
});
52
}
53
});
54
55
</script>
56
</body>
57
</html>