blob: e9ef6762ea74689c617552ce3122e5ea734cdf20 (
plain)
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
|
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>sync start times</title>
<link rel="match" href="sync-start-times-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;
/* To ensure Chrome to render the two boxes (one actively
animating and the other not) with the same subpixel offset
when there is subpixel translation during animation. */
will-change: transform;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
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 pair of animations, starts the first animation and then
syncs the second animation to align with the first. The test passes if the
box associated with the first animation is completely occluded by the
second.
</p>
</body>
<script>
onload = function() {
function createAnimation(elementId) {
const elem = document.getElementById(elementId);
const keyframes = [
{ transform: 'translateX(0px)' },
{ transform: 'translateX(200px)' }
];
const anim = elem.animate(keyframes, { duration: 1000 });
anim.pause();
return anim;
};
const anim1 = createAnimation('box-1');
const anim2 = createAnimation('box-2');
anim1.currentTime = 500;
anim1.play();
anim1.ready.then(() => {
anim2.startTime = anim1.startTime;
requestAnimationFrame(() => {
takeScreenshot();
});
});
};
</script>
|
