• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2<style>
3div {
4    position: relative;
5    height: 100px;
6    width: 100px;
7    background: blue;
8}
9</style>
10<body>
11<p>
12Each section below has two boxes, the top runs on the main thread, the bottom
13on the compositor.
14</p><p>
15This test checks that the compositor and main thread are performing identically
16given the same input parameters. This test is successful if each pairing of boxes
17are identical and all the boxes sync up and finish at the same time.
18</p>
19<hr>
20
21Iteration start is set to 0
22<br>
23<div id="test1a">MT</div>
24<div id="test1b">CT</div>
25
26Iteration start is set to 0.4
27<br>
28<div id="test2a">MT</div>
29<div id="test2b">CT</div>
30
31Iteration start is set to 0.8
32<br>
33<div id="test3a">MT</div>
34<div id="test3b">CT</div>
35
36Iteration start is set to 0, iterations is 3, direction is set to alternate
37<br>
38<div id="test4a">MT</div>
39<div id="test4b">CT</div>
40
41Iteration start is set to 1, iterations is 3, direction is set to alternate-reverse
42<br>
43<div id="test5a">MT</div>
44<div id="test5b">CT</div>
45
46Iteration start is set to 1, iterations is 3, direction is set to alternate, playback rate is set to -1
47<br>
48<div id="test6a">MT</div>
49<div id="test6b">CT</div>
50
51
52<script>
53var transformKeyframes = [
54    {transform: 'translateX(0px)'},
55    {transform: 'translateX(500px)'}
56    ];
57var leftKeyframes = [
58    {left: '0'},
59    {left: '500px'}
60    ];
61var player1a = test1a.animate(leftKeyframes, {
62        duration: 1000,
63        iterations: 3,
64        fill: 'both',
65    });
66var player1b = test1b.animate(transformKeyframes, {
67        duration: 1000,
68        iterations: 3,
69        fill: 'both',
70    });
71var player2a = test2a.animate(leftKeyframes, {
72        duration: 1000,
73        iterations: 2.6,
74        fill: 'both',
75        iterationStart: 0.4,
76        delay: 400,
77    });
78var player2b = test2b.animate(transformKeyframes, {
79        duration: 1000,
80        iterations: 2.6,
81        fill: 'both',
82        iterationStart: 0.4,
83        delay: 400,
84    });
85var player3a = test3a.animate(leftKeyframes, {
86        duration: 1000,
87        iterations: 2.2,
88        fill: 'both',
89        iterationStart: 0.8,
90        delay: 800,
91    });
92var player3b = test3b.animate(transformKeyframes, {
93        duration: 1000,
94        iterations: 2.2,
95        fill: 'both',
96        iterationStart: 0.8,
97        delay: 800,
98    });
99var player4a = test4a.animate(leftKeyframes, {
100        duration: 1000,
101        iterations: 3,
102        fill: 'both',
103        direction: 'alternate',
104    });
105var player4b = test4b.animate(transformKeyframes, {
106        duration: 1000,
107        iterations: 3,
108        fill: 'both',
109        direction: 'alternate',
110    });
111var player5a = test5a.animate(leftKeyframes, {
112        duration: 1000,
113        iterations: 3,
114        fill: 'both',
115        iterationStart: 1,
116        direction: 'alternate-reverse',
117    });
118var player5b = test5b.animate(transformKeyframes, {
119        duration: 1000,
120        iterations: 3,
121        fill: 'both',
122        iterationStart: 1,
123        direction: 'alternate-reverse',
124    });
125var player6a = test6a.animate(leftKeyframes, {
126        duration: 1000,
127        iterations: 3,
128        fill: 'both',
129        iterationStart: 1,
130        direction: 'alternate',
131        playbackRate: -1,
132    });
133var player6b = test6b.animate(transformKeyframes, {
134        duration: 1000,
135        iterations: 3,
136        fill: 'both',
137        iterationStart: 1,
138        direction: 'alternate',
139        playbackRate: -1,
140    });
141</script>
142</body>
143</html>