bd3dfe90efa9dece6e5e916b8dad36c55344b9a9
[WebKit-https.git] / LayoutTests / fast / images / animated-image-loop-count.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4     canvas {
5         width: 100px;
6         height: 100px;
7     }
8 </style>    
9 <body>
10     <div>
11         <p>Frames of a 3-frame animated image with missing loopCount, (repetitionCount = 1):</p>
12         <canvas id="canvas-1"></canvas>
13         <canvas id="canvas-2"></canvas>
14         <canvas id="canvas-3"></canvas>
15         <canvas id="canvas-4"></canvas>
16     </div>
17     <div>
18         <p>Frames of a 3-frame animated image with loopCount = 1, (repetitionCount = 2):</p>
19         <canvas id="canvas-a"></canvas>
20         <canvas id="canvas-b"></canvas>
21         <canvas id="canvas-c"></canvas>
22         <canvas id="canvas-d"></canvas>
23         <canvas id="canvas-e"></canvas>
24         <canvas id="canvas-f"></canvas>
25         <canvas id="canvas-g"></canvas>
26     </div>
27     <div>
28         <p>Frames of a 3-frame animated image with loopCount = 0, (repetitionCount = infinite):</p>
29         <canvas id="canvas-A"></canvas>
30         <canvas id="canvas-B"></canvas>
31         <canvas id="canvas-C"></canvas>
32         <canvas id="canvas-D"></canvas>
33         <canvas id="canvas-E"></canvas>
34         <canvas id="canvas-F"></canvas>
35         <canvas id="canvas-G"></canvas>
36     </div>
37     <script>
38         function drawFrame(image, canvasId) {
39             return new Promise((resolve) => {
40                 let canvas = document.getElementById("canvas-" + canvasId);
41                 let context = canvas.getContext("2d");
42                 context.drawImage(image, 0, 0, canvas.width, canvas.height);
43                 setTimeout(() => {
44                     resolve(String.fromCharCode(canvasId.charCodeAt() + 1));
45                 }, 30);
46             });
47         }
48
49         function drawImage(image, canvasId, frameCount) {
50             let promise = drawFrame(image, canvasId);
51             for (let frame = 1; frame < frameCount; ++frame) {
52                 promise = promise.then((canvasId) => {
53                     return drawFrame(image, canvasId);
54                 });
55             }
56             return promise;
57         }
58
59         function loadImage(src, canvasId, frameCount) {
60             return new Promise((resolve) => {
61                 let image = new Image;
62                 image.onload = (() => {
63                     drawImage(image, canvasId, frameCount).then(resolve);
64                 });
65                 image.src = src;
66             });
67         }
68
69         (function() {
70             if (window.internals) {
71                 internals.clearMemoryCache();
72                 internals.settings.setAnimatedImageDebugCanvasDrawingEnabled(true);
73             }
74
75             if (window.testRunner)
76                 testRunner.waitUntilDone();
77
78             var images = [
79                 { src: "resources/animated-red-green-blue-repeat-1.gif", canvasId: '1', frameCount: 4 },
80                 { src: "resources/animated-red-green-blue-repeat-2.gif", canvasId: 'a', frameCount: 7 },
81                 { src: "resources/animated-red-green-blue-repeat-infinite.gif", canvasId: 'A', frameCount: 7 }
82             ];
83
84             var promises = [];
85
86             for (let image of images)
87                 promises.push(loadImage(image.src, image.canvasId, image.frameCount));
88             
89             Promise.all(promises).then(() => {
90                 if (window.testRunner)
91                     testRunner.notifyDone();
92             });
93         })();
94     </script>
95 </body>
96 </html>