Revision control

1
<style>
2
3
#target {
4
position: absolute;
5
top: 0;
6
left: 0;
7
width: 100px;
8
height: 100px;
9
background-color: black;
10
}
11
12
</style>
13
<div id="target"></div>
14
<script src="../resources/ui-helper.js"></script>
15
<script>
16
17
const waitForAnimationCommit = async (animation) => {
18
await animation.ready;
19
if (!UIHelper.isWebKit2()) {
20
await UIHelper.renderingUpdate();
21
await UIHelper.renderingUpdate();
22
} else
23
await UIHelper.ensureStablePresentationUpdate()
24
}
25
26
(async () => {
27
if (window.testRunner)
28
testRunner.waitUntilDone();
29
30
const target = document.getElementById("target");
31
32
// Make the animations last a whole minute so they don't end while the test is running.
33
const duration = 60 * 1000;
34
35
// Start a first stationary "transform" animation and wait until it has been applied before starting
36
// a second stationary "transform" animation which should replace the first one.
37
await waitForAnimationCommit(target.animate({ transform: ["translateX(100px)", "translateX(100px)"] }, duration));
38
await waitForAnimationCommit(target.animate({ transform: ["translateX(200px)", "translateX(200px)"] }, duration));
39
40
if (window.testRunner)
41
testRunner.notifyDone();
42
})();
43
44
</script>