Revision control

1
<style>
2
3
#target {
4
width: 100px;
5
height: 100px;
6
background-color: black;
7
}
8
9
</style>
10
<div id="target"></div>
11
<script>
12
13
(async () => {
14
if (window.testRunner)
15
testRunner.waitUntilDone();
16
17
const timing = { fill: "forwards", duration: 1 };
18
const originalKeyframes = { marginLeft: ["0px", "100px"] };
19
const updatedKeyframes = { marginLeft: ["50px", "150px"] };
20
const animation = document.getElementById("target").animate(originalKeyframes, timing);
21
22
await animation.finished;
23
await new Promise(resolve => setTimeout(resolve));
24
25
animation.effect.setKeyframes(updatedKeyframes);
26
27
if (window.testRunner)
28
testRunner.notifyDone();
29
})();
30
31
</script>