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
|
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>Update playback rate zero</title>
<link rel="match" href="update-playback-rate-slow-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box-1, #box-2 {
border: 1px solid white;
height: 40px;
left: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
transform: translateX(200px);
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box-1"></div>
<div id="box-2"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation slows down so that it does not finish
before the screenshot. If any blue pixels appear in the screenshot,
the test fails.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box-1');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
anim.ready.then(() => {
setTimeout(() => {
anim.updatePlaybackRate(0.5);
}, 500);
takeScreenshotDelayed(1000);
});
};
</script>
|
