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
will-change: transform;
14
}
15
16
</style>
17
</head>
18
<body>
19
<div id="target"></div>
20
<script>
21
22
if (window.testRunner)
23
testRunner.waitUntilDone();
24
25
const animation = document.getElementById("target").animate({ transform: ["translateX(50px)", "translateX(100px)"] }, 1000);
26
27
// Wait until the animation is ready which means the action to play an accelerated animation has been enqueued by now, but not commmitted.
28
animation.ready.then(() => {
29
// Cancel the animation, this should cancel the uncommitted accelerated animation.
30
animation.cancel();
31
if (window.testRunner)
32
testRunner.notifyDone();
33
});
34
35
</script>
36
</body>
37
</html>