blob: 2152e65e177dfbfcd47e274e1ace8907bd1b7307 [file] [log] [blame]
<!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>