<!doctype html>
<html>
    <head>
        <title>Hiding the cast overlay button</title>
        <script src="../media-controls.js"></script>
        <script src="../../resources/testharness.js"></script>
        <script src="../../resources/testharnessreport.js"></script>
        <style>
        body { background-color: gray; }
        .video-group { position: absolute; }
        .video-group > * { position: absolute; top: 0; }
        .overlay {border: solid 1px; height: 50px; width: 80px; }
        .video { width: 320px; height: 240px; background-color: white; }
        .test-error { position: absolute; top: 250px; }
        #v2 { top: 300px; }
        </style>
    </head>
    <body onload="async_test(testOverlayVisibility)">
        <div id="v1" class="video-group">
            <video src="../resources/test-positive-start-time.webm"
                   class="should-not-have-overlay-btn"></video>
            <div class="overlay"></div>
        </div>
        <div id="v2" class="video-group">
            <video src="../resources/test-positive-start-time.webm"
                   class="should-have-overlay-btn"></video>
        </div>
        <script>
        function testOverlayVisibility(test) {
            var videos = document.getElementsByTagName('video');
            for (var i = 0; i < videos.length; i++) {
                internals.mediaPlayerRemoteRouteAvailabilityChanged(videos[i], true);

                assert_equals(isCastButtonVisible(videos[i]),
                              videos[i].classList.contains('should-have-overlay-btn'),
                              videos[i].parentNode.id + ' - overlay cast button visibility error.');
            };

            test.done();
        }

        function isCastButtonVisible(videoElement)
        {
            var btn = overlayCastButton(videoElement);
            return btn.style.display != 'none' && btn.style.visibility != 'hidden';
        }
        </script>
    </body>
</html>