<!DOCTYPE html>
<html>
<body>
<video id="video" loop></video>
<script src="../resources/runner.js"></script>
<script src="resources/canvas_runner.js"></script>
<script>
var videoElement = document.getElementById("video");
var destCanvas2D = document.createElement("canvas");
var destCtx2D = destCanvas2D.getContext("2d");

function setSize(width, height) {
    destCanvas2D.width = width;
    destCanvas2D.height = height;
}

function addPlayCallback(videoElement) {
    // This logic makes sure this perf test starts after playing the video.
    videoElement.addEventListener("canplaythrough", startVideo, true);
    videoElement.addEventListener("play", startPerfTest, true);
    videoElement.addEventListener('error', function(ev) {
        CanvasRunner.logFatalError("\nmp4 codec is not supported on this platform. Received error event:" + ev.target.error.code + "\n");
    }, false);
    videoElement.src = "../resources/bear-1280x720.mp4";
}

function startVideo() {
    // loop can emit this event again.
    videoElement.removeEventListener("canplaythrough", startVideo, true);
    videoElement.play();
}

function startPerfTest() {
    CanvasRunner.start({
        description: "This bench test checks the speed on drawing Video element to HW accelerated Canvas2D(1024x1024).",
        doRun: doRun,
        ensureComplete: ensureComplete});
}

function doRun() {
    // draw Video
    destCtx2D.drawImage(videoElement, 0, 0);
}

function ensureComplete() {
    // Calling getImageData() is just to flush out the content when
    // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low.
    destCtx2D.getImageData(0, 0, 1, 1);
}

window.onload = function () {
    // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated Canvas for a specified size
    // but this API is not available in JS or WebPage. Assume the threshold size is 256x257
    // and the dest canvas is HW accelerated Canvas when setting its size to 1024x1024.
    setSize(1024, 1024);
    addPlayCallback(videoElement);
}

</script>
</body>
</html>