<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>remote &lt;video&gt; with local &lt;source&gt;</title>

        <script>

            var video = null;
            var console = null;
            var testEnded = false;

            function endTest()
            {
                consoleWrite("<br>END OF TEST");
                testEnded = true;
                if (window.testRunner)
                    testRunner.notifyDone();     
            }
            function hanged()
            {
                consoleWrite("FAIL: timed out");
                if (window.testRunner)
                    testRunner.notifyDone();  
            }

            function logConsole()
            {
                if (!console && document.body) {
                    console = document.createElement('div');
                    document.body.appendChild(console);
                }
                return console;
            }
            
            function consoleWrite(text)
            {
                if (testEnded)
                    return;
                logConsole().innerHTML += text + "<br>";
            }

            function logEvent(evt)
            {
                consoleWrite("EVENT(" + evt.type + ")");
            }

            function logResult(msg, success)
            {
                if (success)
                    consoleWrite("<span style='color:green'>SUCCESS: " + msg + "</span>");
                else
                    consoleWrite("<span style='color:red'>FAIL: " + msg + "</span>");
            }

            function error(evt)
            {
                logEvent(evt)
                consoleWrite("");
                logResult("failed trying to load " + video.currentSrc, false);
                endTest();
            }

            var localMovie = "file:///tmp/LayoutTests/media/content/test.mp4";
            var remoteUrl = "http://localhost:8000/resources/test";

            function loadedmetadata(evt) 
            { 
                var src = video.currentSrc;
                var localFile = localMovie.substring(localMovie.lastIndexOf("/")+1, localMovie.length)
                var remoteFile = remoteUrl.substring(remoteUrl.lastIndexOf("/")+1, remoteUrl.length)

                logEvent(evt);
                if (src.indexOf(localFile) > 0)
                    logResult("local movie loaded", false);
                else if (src.indexOf(remoteFile) > 0)
                    logResult("remote movie loaded, local movie failed to load", true);
                endTest();
            }

            if (window.testRunner) 
            {
                localMovie = testRunner.pathToLocalResource(localMovie);
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }
            setTimeout(hanged, 10000);

            function test() 
            {
                video = document.getElementById("vid");

                video.addEventListener("error", error);
                video.addEventListener('loadedmetadata', loadedmetadata);

                // Create two <source> children, the first with a local url and the second
                // with a remote url. The element should load the second.
                var src1 = document.createElement("source");
                src1.setAttribute("src", localMovie);

                if (video.canPlayType("video/mp4"))
                    remoteUrl += ".mp4";
                else if (video.canPlayType("video/ogg"))
                    remoteUrl += ".ogv";
                else {
                    logResult("Missing test movie for this platform???", false);
                    endTest();
                }

                var src2 = document.createElement("source");
                src2.setAttribute("src", remoteUrl);

                video.appendChild(src1);
                video.appendChild(src2);
            }
        </script>
    
    </head>

    <body onLoad="test()">

        <video id='vid' controls></video>

        <p>Test that a remote video element will not use a local &lt;source&gt;, and will
        use another remote &lt;source&gt;</p>

        <p>This test only behaves correctly in DRT</p>

    </body>
</html>