<html>
    <head>
        <title>&lt;video&gt; element with poster size test</title>
        <script src=video-test.js></script>
        <script>
            var posterInfo = 
            {
                current:0,
                posters: 
                [ 
                    {
                        description:", with 'width' and 'height' attributes",
                        url:null,
                        reflectedUrl:"",
                        width:320,
                        height:240
                    },
                    {
                        description:", size should equal image size",
                        url:"content/greenbox.png",
                        width:25,
                        height:25
                    },
                    {
                        description:", with NO 'width' or 'height' attributes so size should be &lt;video&gt; default",
                        url:"",
                        reflectedUrl:"video-poster.html",
                        width:300,
                        height:150
                    },
                    {
                        description:", size should equal image size",
                        url:"content/abe.png",
                        width:76,
                        height:103
                    },
                    {
                        description:", invalid url so size should revert to &lt;video&gt; default",
                        url:"content/bogus.png",
                        width:300,
                        height:150
                    },
                ]
            };

            // Wait for |video| to have the |expectedWidth| and |expectedHeight|
            // and invoke |callback()|.
            function listenForWidthAndHeight(expectedWidth, expectedHeight, callback) {
              if (video.clientWidth == expectedWidth && video.clientHeight == expectedHeight) {
                callback();
              } else {
                // This uses a 20ms sleep loop to accomplish the wait, since the
                // standard specifies no events that fire on poster load or error.
                window.setTimeout(listenForWidthAndHeight, 20, expectedWidth, expectedHeight, callback);
              }
            }

            function testPoster()
            {
                var temp = document.body.offsetWidth;
                var poster = posterInfo.posters[posterInfo.current];

                var size = poster.url ? (" " + poster.width + "x" + poster.height) : "";
                var urlStr = typeof(poster.url) == "string" ? ("'" + poster.url + "'") : 'null';
                var desc = "<b>Testing" + size + " poster <em>"+ urlStr + "</em>" + poster.description + ".</b>";
                consoleWrite(desc);

                testExpected("video.getAttribute('poster')", poster.url);
                testExpected("relativeURL(video.poster)", poster.hasOwnProperty("reflectedUrl") ? poster.reflectedUrl : poster.url);
                testExpected("video.clientWidth", poster.width);
                testExpected("video.clientHeight", poster.height);

                // Remove width/height attributes if present
                if (video.width)
                    video.removeAttribute('width');
                if (video.height)
                    video.removeAttribute('height');

                posterInfo.current++;
                consoleWrite("");
                if (posterInfo.current >= posterInfo.posters.length) {
                  endTest();
                  return;
                }
                var currentPoster = posterInfo.posters[posterInfo.current];
                listenForWidthAndHeight(currentPoster.width, currentPoster.height, testPoster);
                var url = currentPoster.url;
                var desc = "<b>Setting poster to <em>\""+ url + "\"</em></b>";
                consoleWrite(desc);
                video.poster = url;
            }

            function unexpectedEvent(evt)
            {
                consoleWrite("");
                failTest("Unexpected '" + evt.type + "' event fired!");
            }

            function setup()
            {
                document.addEventListener("error", unexpectedEvent);
                document.addEventListener("load", unexpectedEvent);
                findMediaElement();
                testPoster();
            }
        </script>
    </head>

    <body>
        <video controls width=320 height=240></video>
        <p>Test &lt;video&gt; element with and without a poster.</p>
        <script>setup();</script>
    </body>
</html>