<!DOCTYPE html>
<html>
    <head>
        <title>video-main-content-size-check</title>
        <script src="video-test.js"></script>
        <script src="media-file.js"></script>
        <script>
            var smallVideo;
            var largeVideo;
            var counter = 0;

            function maybeEndTest()
            {
                if (++counter < 2)
                    return;

                logResult(true, 'Large video auto-played, small video did not.');
                endTest();
            }

            function playing(event) 
            {
                if (event.target == smallVideo)
                    failTest('Small video should not autoplay.');
                else
                    maybeEndTest();
            }

            function canPlayThrough(event) 
            {
                if (event.target == smallVideo)
                    setTimeout(maybeEndTest, 100);
            }

            function go()
            {
                smallVideo = document.createElement('video');
                internals.setMediaElementRestrictions(smallVideo, "RequireUserGestureForVideoRateChange,OverrideUserGestureRequirementForMainContent");
                run("smallVideo.setAttribute('controls','controls')");
                run("smallVideo.setAttribute('autoplay','autoplay')");
                run("smallVideo.setAttribute('id','small')");
                smallVideo.addEventListener('canplaythrough', canPlayThrough, true);
                smallVideo.addEventListener('playing', playing, true);
                run("document.body.appendChild(smallVideo)");

                consoleWrite("");
                largeVideo = document.createElement('video');
                internals.setMediaElementRestrictions(largeVideo, "RequireUserGestureForVideoRateChange,OverrideUserGestureRequirementForMainContent");
                run("largeVideo.setAttribute('controls','controls')");
                run("largeVideo.setAttribute('autoplay','autoplay')");
                run("largeVideo.setAttribute('id','large')");
                largeVideo.addEventListener('canplaythrough', canPlayThrough, true);
                largeVideo.addEventListener('playing', playing, true);
                run("document.body.appendChild(largeVideo)");

                consoleWrite("");
                smallVideo.src = findMediaFile('video', 'content/test');
                largeVideo.src = findMediaFile('video', 'content/test');
            }

        </script>
        <style>
        #large {
            width: 270px;
            height: 480px;
        }
        #small {
            width: 400;
            height: 240;
        }
        </style>
    </head>
    <body onload="go()">
    </body>
</html>