| <!DOCTYPE html> |
| <html> |
| <style> |
| canvas { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <script src="resources/animated-image-loop-count.js"></script> |
| <body> |
| <div> |
| <p>Frames of a 3-frame animated image with missing loopCount, (repetitionCount = 1):</p> |
| <canvas id="canvas-1"></canvas> |
| <canvas id="canvas-2"></canvas> |
| <canvas id="canvas-3"></canvas> |
| <canvas id="canvas-4"></canvas> |
| </div> |
| <div> |
| <p>Frames of a 3-frame animated image with loopCount = 1, (repetitionCount = 2):</p> |
| <canvas id="canvas-a"></canvas> |
| <canvas id="canvas-b"></canvas> |
| <canvas id="canvas-c"></canvas> |
| <canvas id="canvas-d"></canvas> |
| <canvas id="canvas-e"></canvas> |
| <canvas id="canvas-f"></canvas> |
| <canvas id="canvas-g"></canvas> |
| </div> |
| <div> |
| <p>Frames of a 3-frame animated image with loopCount = 0, (repetitionCount = infinite):</p> |
| <canvas id="canvas-A"></canvas> |
| <canvas id="canvas-B"></canvas> |
| <canvas id="canvas-C"></canvas> |
| <canvas id="canvas-D"></canvas> |
| <canvas id="canvas-E"></canvas> |
| <canvas id="canvas-F"></canvas> |
| <canvas id="canvas-G"></canvas> |
| </div> |
| <script> |
| (function() { |
| var images = [ |
| { src: "resources/animated-red-green-blue-repeat-1.jxl", canvasId: '1', frameCount: 4 }, |
| { src: "resources/animated-red-green-blue-repeat-2.jxl", canvasId: 'a', frameCount: 7 }, |
| { src: "resources/animated-red-green-blue-repeat-infinite.jxl", canvasId: 'A', frameCount: 7 } |
| ]; |
| runTest(images); |
| })(); |
| </script> |
| </body> |
| </html> |
