<html>
<body>
    <script src=media-file.js></script>
    <script src=video-test.js></script>
    <div id=panel></div>
    <script>
        var panel = document.getElementById("panel");
        var mediaFile = findMediaFile("video", "content/test");
        panel.innerHTML = "<video src=" + mediaFile + " controls onloadedmetadata='loadedmetadata()'><source src=content/counting.mp4></video>";
    </script>

    <p>Test that removing valid 'src' attribute DOES NOT trigger load of &lt;source&gt; elements</p>

    <script>
        findMediaElement();

        var loadCount = 0;
        
        function testSrc()
        {
            testExpected("stripExtension(relativeURL(video.currentSrc))", stripExtension(mediaFile));
            testExpected("isNaN(video.duration)", false);
            consoleWrite("");
        }

        function loadedmetadata()
        {
            consoleWrite("EVENT(loadedmetadata)");

            ++loadCount;
            if (loadCount == 1)
            {
                testSrc();
                run("video.removeAttribute('src')");
            }
            else
            {
                consoleWrite("<span style='color:red'>FAIL</span> : 'loadCount' fired " + loadCount + "times" );
                endTest();
            }
            consoleWrite("");
            setTimeout(someTimeLater, 100) ;
        }
        
        function someTimeLater()
        {
            testSrc();
            endTest();
            consoleWrite("");
        }

        consoleWrite("");
    </script>

</body>
</html>