Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
#target {
7
position: absolute;
8
left: 0;
9
top: 0;
10
width: 100px;
11
height: 100px;
12
background-color: black;
13
}
14
15
</style>
16
</head>
17
<body>
18
<div id="target"></div>
19
<script>
20
21
if (window.testRunner)
22
testRunner.waitUntilDone();
23
24
const animation = document.getElementById("target").animate({ transform: ["translateX(0)", "translateX(100px)"] }, 1000);
25
26
animation.ready.then(() => {
27
// Ensure accelerated animations have been commmitted by waiting for the next frame.
28
requestAnimationFrame(() => {
29
// We pause the animation right away.
30
animation.pause();
31
32
// Then on the next frame, we change its delay to seek it to its mid-point.
33
requestAnimationFrame(() => {
34
const effect = animation.effect;
35
const duration = effect.getTiming().duration;
36
const delay = animation.currentTime - 0.5 * duration;
37
animation.effect.updateTiming({ delay });
38
39
// Then wait another frame to ensure the seek was committed.
40
if (window.testRunner)
41
requestAnimationFrame(() => testRunner.notifyDone());
42
});
43
});
44
});
45
46
</script>
47
</body>
48
</html>