Revision control

1
<style>
2
3
body {
4
background-color: green;
5
}
6
7
div {
8
position: absolute;
9
top: 0;
10
height: 100px;
11
}
12
13
#test {
14
left: 0;
15
width: 100px;
16
background-color: red;
17
}
18
19
#reference {
20
left: -1px;
21
width: 102px;
22
background-color: green;
23
}
24
25
</style>
26
27
<div id="test"></div>
28
<div id="reference"></div>
29
30
<script src="../resources/ui-helper.js"></script>
31
<script>
32
33
(async () => {
34
if (window.testRunner)
35
testRunner.waitUntilDone();
36
37
const keyframes = { "transform": "translateX(600px)" };
38
const easing = "cubic-bezier(1,0,1,0)";
39
const duration = 10000;
40
41
// Create two animations, a test which will change easing and direction during playback and a reference
42
// which will use the test animation's changed playback throughout its entire duration. The two animations
43
// should be in sync and the animated elements overlap, ensuring no red is visible after the update.
44
const test = document.getElementById("test").animate(keyframes, { easing: "linear", duration });
45
document.getElementById("reference").animate(keyframes, { easing, duration }).reverse();
46
47
// Wait for the animations to be ready and to have updated once before the easing and the direction on the
48
// test animation to match the reference animation.
49
await Promise.all(document.getAnimations().map(animation => animation.ready));
50
await UIHelper.renderingUpdate();
51
test.effect.updateTiming({ easing, direction: "reverse" });
52
53
// Wait another frame and compare the rendering.
54
await UIHelper.renderingUpdate();
55
if (window.testRunner)
56
testRunner.notifyDone();
57
})();
58
59
</script>