<!DOCTYPE html>
<html>
    <head>
        <script src="resources/cross-frame-access.js"></script>
        <script>

            var shouldLoad = true;
            var counter = 0;

            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }

            function log(msg)
            {
                document.getElementById('console').innerHTML += msg + "<br>";
            }

            function trackLoaded()
            {
                log('EVENT(load)');
                shouldBe('shouldLoad', true);

                trackElement = document.querySelectorAll('track')[0];
                videoElement = document.querySelectorAll('video')[0];
                shouldBe('event.target', trackElement);
                shouldBe('trackElement.readyState', HTMLTrackElement.LOADED);

                log('<br>');
                switch(counter) {
                case 0:
                    log('Loading <b>without</b> Access-Control-Allow-Origin header, setting video.crossorigin to "anonymous"');
                    url = "http://localhost:8000/security/resources/captions-with-access-control-headers.php?count=" + counter;
                    videoElement.setAttribute('crossorigin', 'anonymous');
                    trackElement.removeAttribute('src');
                    trackElement.setAttribute('src', url);
                    shouldLoad = false;
                    ++counter;
                    break;

                case 2:
                    log('Loading <b>with</b> Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers, setting video.crossorigin to "use-credentials"');
                    url = "http://localhost:8000/security/resources/captions-with-access-control-headers.php?origin=1;credentials=1";
                    trackElement.setAttribute('crossorigin', 'use-credentials');
                    trackElement.setAttribute('src', url);
                    ++counter;
                    break;

                case 3:
                    log("END OF TEST");
                    if (window.testRunner)
                        testRunner.notifyDone();
                defaut:
                    if (window.testRunner)
                        testRunner.notifyDone();
                }
            }

            function trackError()
            {
                log('EVENT(error)');
                shouldBe('shouldLoad', false);

                trackElement = document.querySelectorAll('track')[0];
                videoElement = document.querySelectorAll('video')[0];
                shouldBe('event.target', trackElement);
                shouldBe('trackElement.readyState', HTMLTrackElement.ERROR);

                log('<br>');
                switch(counter) {
                case 1:
                    log('Loading <b>with</b> Access-Control-Allow-Origin header, leaving video.crossorigin as "anonymous"');
                    url = "http://localhost:8000/security/resources/captions-with-access-control-headers.php?origin=1";
                    trackElement.setAttribute('src', url);
                    shouldLoad = true;
                    ++counter;
                    break;
                defaut:
                    if (window.testRunner)
                        testRunner.notifyDone();
                }
            }

            function start()
            {
                trackElement = document.querySelectorAll('track')[0];
                trackElement.track.mode = "hidden";
                log('Loading <b>without</b> Access-Control-Allow-Origin header, no "crossorigin" attribute on &lt;video&gt;');
                var url = "http://localhost:8000/security/resources/captions-with-access-control-headers.php"
                trackElement.setAttribute('src', url);
            }

        </script>
    </head>
    <body onload="start()">
        <p>Tests loading cross-domain &lt;track&gt;.</p>
        <video >
            <track kind="captions" onerror="trackError()" onload="trackLoaded()" >
        </video>
        <div id="console"></div>
    </body>
</html>