Revision control

1
<body>
2
<style>
3
4
body {
5
background-color: green;
6
}
7
8
div {
9
position: absolute;
10
top: 0;
11
left: 0;
12
width: 100px;
13
height: 100px;
14
background-color: red;
15
}
16
17
/* Allow for a 1px error on either side */
18
#easing-on-keyframe {
19
left: -1px;
20
width: 102px;
21
background-color: green;
22
}
23
24
</style>
25
<div id="easing-on-animation-one-keyframe"></div>
26
<div id="easing-on-animation-two-keyframes"></div>
27
<div id="easing-on-animation-three-keyframes"></div>
28
<div id="easing-on-keyframe"></div>
29
<script src="../resources/ui-helper.js"></script>
30
<script>
31
32
(async function() {
33
if (window.testRunner)
34
testRunner.waitUntilDone();
35
36
await UIHelper.ensureStablePresentationUpdate();
37
await UIHelper.ensureStablePresentationUpdate();
38
39
const animations = [];
40
41
animations.push(document.getElementById("easing-on-animation-one-keyframe").animate({ transform: "translateX(100px)" }, {
42
duration: 500,
43
easing: "ease",
44
direction: "alternate",
45
iterations: Infinity
46
}));
47
48
animations.push(document.getElementById("easing-on-animation-two-keyframes").animate([
49
{ transform: "translateX(0)" },
50
{ transform: "translateX(100px)" }
51
], {
52
duration: 500,
53
easing: "ease",
54
direction: "alternate",
55
iterations: Infinity
56
}));
57
58
animations.push(document.getElementById("easing-on-animation-three-keyframes").animate([
59
{ transform: "translateX(0)" },
60
{ transform: "translateX(50px)" },
61
{ transform: "translateX(100px)" }
62
], {
63
duration: 500,
64
easing: "ease",
65
direction: "alternate",
66
iterations: Infinity
67
}));
68
69
animations.push(document.getElementById("easing-on-keyframe").animate([
70
{ transform: "translateX(0)", easing: "ease" },
71
{ transform: "translateX(100px)" }
72
], {
73
duration: 500,
74
direction: "alternate",
75
iterations: Infinity
76
}));
77
78
await Promise.all(animations.map(animation => animation.ready));
79
await UIHelper.ensureStablePresentationUpdate();
80
await UIHelper.ensureStablePresentationUpdate();
81
82
if (window.testRunner)
83
testRunner.notifyDone();
84
})();
85
86
</script>
87
</body>