1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<head>
<meta charset="utf8">
<script>
function waitForCondition(aCond, aCallback, aErrorMsg) {
var tries = 0;
var interval = setInterval(() => {
if (tries >= 30) {
result.push({
'error': `Exceeded 30 tries waiting for animation`
})
clearInterval(interval);
parent.postMessage(result, "*");
return;
}
var conditionPassed;
try {
conditionPassed = aCond();
} catch (e) {
result.push({
'error': `${e}\n${e.stack}`
})
clearInterval(interval);
parent.postMessage(result, "*")
return;
}
if (conditionPassed) {
clearInterval(interval);
aCallback();
}
tries++;
}, 100);
}
window.onload = async () => {
parent.postMessage("ready", "*");
}
var result = [];
window.addEventListener("message", async function listener(event) {
if (event.data[0] == "gimme") {
const testDiv = document.getElementById("testDiv");
const animation = testDiv.animate({ opacity: [0, 1] }, 100000);
animation.play();
waitForCondition(
() => animation.currentTime > 100,
() => {
result.push({
'name': 'animation.startTime',
'value': animation.startTime
});
result.push({
'name': 'animation.currentTime',
'value': animation.currentTime
});
result.push({
'name': 'animation.timeline.currentTime',
'value': animation.timeline.currentTime
});
if (document.timeline) {
result.push({
'name': 'document.timeline.currentTime',
'value': document.timeline.currentTime
});
}
parent.postMessage(result, "*")
},
"animation failed to start");
}
});
</script>
</head>
<body>
<div id="testDiv">test</div>
</body>
</html>
|
