<!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", 
                    canvasIds: [ 
                        "canvas-1", 
                        "canvas-2", 
                        "canvas-3", 
                        "canvas-4" 
                    ], 
                    frameCount: 4 
                },
                { 
                    src: "resources/animated-red-green-blue-repeat-2.jxl", 
                    canvasIds: [
                        "canvas-a",
                        "canvas-b",
                        "canvas-c",
                        "canvas-d",
                        "canvas-e",
                        "canvas-f",
                        "canvas-g"
                    ],
                    frameCount: 7
                },
                { 
                    src: "resources/animated-red-green-blue-repeat-infinite.jxl", 
                    canvasIds: [ 
                        "canvas-A",
                        "canvas-B",
                        "canvas-C",
                        "canvas-D",
                        "canvas-E",
                        "canvas-F",
                        "canvas-G"
                    ], 
                    frameCount: 7
                }
            ];
            runTest(images);
        })();
    </script>
</body>
</html>
