Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
#target {
7
width: 100px;
8
height: 100px;
9
background-color: black;
10
transition: transform 10ms;
11
}
12
13
</style>
14
</head>
15
<body>
16
<script src="../resources/testharness.js"></script>
17
<script src="../resources/testharnessreport.js"></script>
18
<div id="target"></div>
19
20
<script>
21
22
function waitNFrames(numberOfFrames, continuation)
23
{
24
let elapsedFrames = 0;
25
(function rAFCallback() {
26
if (elapsedFrames++ >= numberOfFrames)
27
continuation();
28
else
29
requestAnimationFrame(rAFCallback);
30
})();
31
}
32
33
async_test(t => {
34
requestAnimationFrame(() => {
35
const target = document.getElementById("target");
36
target.style.transform = "translate3d(100px, 0, 0)";
37
target.getAnimations()[0].finished.then(() => {
38
waitNFrames(2, () => {
39
assert_equals(internals.acceleratedAnimationsForElement(target).length, 0, "There should be no accelerated animation after the animation completed.");
40
t.done();
41
});
42
});
43
});
44
}, "An accelerated CSS transition should remove its animation upon completion.");
45
46
</script>
47
</body>
48
</html>