<!DOCTYPE html>
<html>
    <head>
        <script src=media-file.js></script>
        <script src=video-test.js></script>
        <script>
            var canplaythrough1 = false;
            var canplaythrough2 = false;
            var start1 = 0;
            var start2 = 0;
            var delta1 = 0;
            var delta2 = 0;

            function checkElementState() {
                if (canplaythrough1 && canplaythrough2) {
                    if (delta1 * 5 > delta2)
                        endTest();
                    else
                        failTest("Loading a data URL takes too long time. delta1 = " + delta1 + ", delta2 = " + delta2 + ".");
                }
            }

            function runTest() {
                const videos = document.querySelectorAll('video');
                const video1 = videos[0];
                const video2 = videos[1];

                const url = findMediaFile("video", "content/long-test");

                video1.oncanplaythrough = () => {
                    canplaythrough1 = true;
                    delta1 = Date.now() - start1;
                    checkElementState();
                }

                video2.oncanplaythrough = () => {
                    canplaythrough2 = true;
                    delta2 = Date.now() - start2;
                    checkElementState();
                }

                const request = new XMLHttpRequest();
                request.open('GET', url, true);
                request.responseType = 'blob';

                request.onload = () => {
                    const reader = new FileReader();
                    reader.onload = event => {
                        const createdDataUrl = event.target.result;
                        video2.src = createdDataUrl;
                        video1.src = url;

                        const now = Date.now();
                        start1 = now;
                        start2 = now;
                    };
                    reader.readAsDataURL(request.response);
                };
                request.send();

                setTimeout(() => failTest("Cannot complete the test in 10 seconds."), 10000);
            }
        </script>
    </head>
    <body onload="runTest()">
        <div>
            This tests that a video element loads a blob URL in a reasonable amount of time (should be shorter than 5x of the time to load the binary form of the media file).
        </div>
        <video controls></video>
        <video controls></video>
    </body>
</html>