<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
    <img id="image1" src="">
    <img id="image2" src="">
    <script>
        function loadImage(image, src) {
            return new Promise((resolve) => {
                image.onload = (() => {
                    debug("The image " + src + " was loaded successfully.");
                    resolve();
                });
                image.src = src;
            });
        }

        function verifyProperties()
        {
            if (!window.internals)
                return;

            debug("");
            shouldBe("internals.imageFrameCount(image1)", "96");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image1, 0) * 1000)", "100");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image1, 48) * 1000)", "100");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image1, 95) * 1000)", "100");

            debug("");
            shouldBe("internals.imageFrameCount(image2)", "120");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image2, 0) * 1000)", "40");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image2, 60) * 1000)", "40");
            shouldBe("Math.round(internals.imageFrameDurationAtIndex(image2, 119) * 1000)", "40");
        }

        (function() {
            window.jsTestIsAsync = true;

            description("Verify HEICS image properties can be retrieved.");

            var promises = [];

            promises.push(loadImage(image1, "resources/sticker.heics"));
            promises.push(loadImage(image2, "resources/sea_animation.heics"));
            
            Promise.all(promises).then(() => {
                verifyProperties();
                finishJSTest();
            });
        })();
    </script>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>
