<!DOCTYPE html>
<html>
    <body onload="load()">
        <p>Tests decoding and rendering a video element that has a changing resolution.</p>
        <video width=320></video>
        <video width=320></video>
        <script>
            if (window.testRunner) {
                testRunner.waitUntilDone();
            }

            function load() {
                var canplayCount = 0;
                function oncanplay() {
                    if (++canplayCount < 2) {
                        return;
                    }
                    // Make sure we render the first frame.
                    requestAnimationFrame(function() {
                        video.play();
                    });
                };

                // Get the first video to stay on frame zero for comparison purposes.
                var video = document.getElementsByTagName("video")[0];
                video.src = "../media/resources/frame_size_change.webm";
                video.addEventListener('canplay', oncanplay);

                // Get the second video to play through the clip with changing dimensions.
                video = document.getElementsByTagName("video")[1];
                video.src = "../media/resources/frame_size_change.webm";
                video.addEventListener('canplay', oncanplay);

                video.addEventListener('playing', function() {
                    // Make sure the video plays for a bit.
                    video.addEventListener('timeupdate', function() {
                        if (video.currentTime > 1.0) {
                            video.pause();
                        }
                    });
                });

                video.addEventListener('pause', function() {
                    // Now seek back to a point where resolution should be different.
                    video.addEventListener('seeked', function() {
                        if (window.testRunner) {
                            testRunner.notifyDone();
                        }
                    });

                    video.currentTime = 0.5;
                });
            }
        </script>
   </body>
</html>