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(700px)" };
38
const easing = "cubic-bezier(0,1,0,1)";
39
const duration = 24 * 60 * 60 * 1000;
40
41
// Create two animations, a test which will change easing during playback and a reference which
42
// 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 });
46
47
// Wait for the animations to be ready and then a frame before pausing them.
48
await Promise.all(document.getAnimations().map(animation => animation.ready));
49
await UIHelper.ensurePresentationUpdate();
50
await UIHelper.renderingUpdate();
51
for (let animation of document.getAnimations())
52
animation.pause();
53
54
// Update the easing on the test animation to match the reference animation.
55
test.effect.updateTiming({ easing });
56
57
// Wait a frame and resume the animations.
58
await UIHelper.ensurePresentationUpdate();
59
await UIHelper.renderingUpdate();
60
for (let animation of document.getAnimations())
61
animation.play();
62
63
// Wait a frame and compare the rendering.
64
await UIHelper.ensurePresentationUpdate();
65
await UIHelper.renderingUpdate();
66
if (window.testRunner)
67
testRunner.notifyDone();
68
})();
69
70
</script>