Revision control

1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>Forcing a style update in a transitionend event for an accelerated animation should not prevent another transition for the same property from running later</title>
4
<body>
5
<script src="../resources/ui-helper.js"></script>
6
<script src="../resources/testharness.js"></script>
7
<script src="../resources/testharnessreport.js"></script>
8
<script>
9
10
'use strict';
11
12
promise_test(async t => {
13
const target = document.body.appendChild(document.createElement("div"));
14
const animatedStyle = "transition: transform 1ms linear; transform: translateX(100px)";
15
16
// Start a transform transition.
17
getComputedStyle(target).transform;
18
target.setAttribute("style", animatedStyle);
19
20
// Wait until it completes, and in the "transitionend" event handler, force a style recalc
21
// before removing the transition style.
22
await new Promise(resolve => {
23
target.addEventListener("transitionend", event => {
24
target.getAnimations();
25
target.removeAttribute("style");
26
resolve();
27
}, { once: true });
28
});
29
30
// Wait until the accelerated animation has completed.
31
await UIHelper.ensurePresentationUpdate();
32
33
// Start another transform transition.
34
getComputedStyle(target).transform;
35
target.setAttribute("style", animatedStyle);
36
37
// Check that it starts and ends.
38
await new Promise(resolve => target.addEventListener("transitionend", resolve, { once: true }));
39
}, "Forcing a style update in a transitionend event for an accelerated animation should not prevent another transition for the same property from running later.");
40
41
</script>
42
</body>