An animated PNG plays the frames one time more than the image loopCount
[WebKit-https.git] / LayoutTests / fast / images / animated-png-loop-count.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4     canvas {
5         width: 100px;
6         height: 100px;
7     }
8 </style>
9 <script src="resources/animated-image-loop-count.js"></script>
10 <body>
11     <div>
12         <p>Frames of a 3-frame animated image with missing loopCount, (repetitionCount = 1):</p>
13         <canvas id="canvas-1"></canvas>
14         <canvas id="canvas-2"></canvas>
15         <canvas id="canvas-3"></canvas>
16         <canvas id="canvas-4"></canvas>
17     </div>
18     <div>
19         <p>Frames of a 3-frame animated image with loopCount = 1, (repetitionCount = 2):</p>
20         <canvas id="canvas-a"></canvas>
21         <canvas id="canvas-b"></canvas>
22         <canvas id="canvas-c"></canvas>
23         <canvas id="canvas-d"></canvas>
24         <canvas id="canvas-e"></canvas>
25         <canvas id="canvas-f"></canvas>
26         <canvas id="canvas-g"></canvas>
27     </div>
28     <div>
29         <p>Frames of a 3-frame animated image with loopCount = 0, (repetitionCount = infinite):</p>
30         <canvas id="canvas-A"></canvas>
31         <canvas id="canvas-B"></canvas>
32         <canvas id="canvas-C"></canvas>
33         <canvas id="canvas-D"></canvas>
34         <canvas id="canvas-E"></canvas>
35         <canvas id="canvas-F"></canvas>
36         <canvas id="canvas-G"></canvas>
37     </div>
38     <script>
39         (function() {
40             var images = [
41                 { src: "resources/animated-red-green-blue-repeat-1.png", canvasId: '1', frameCount: 4 },
42                 { src: "resources/animated-red-green-blue-repeat-2.png", canvasId: 'a', frameCount: 7 },
43                 { src: "resources/animated-red-green-blue-repeat-infinite.png", canvasId: 'A', frameCount: 7 }
44             ];
45             runTest(images);
46         })();
47     </script>
48 </body>
49 </html>