<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=false ] -->
<html>
    <head>
        <script src="../media-file.js"></script>
        <script src="controls-test-helpers.js"></script>
        <script>

            const allButtons = [
                "Play Button", "Rewind Button", "Status Display", "Mute Box", "AppleTV Device Picker", 
                "Picture-in-picture Button", "Caption Button", "Fullscreen Button", "Timeline", 
                "Current Time", "Thumbnail Track", "Time Remaining"
            ];
            const tester = new ControlsTest("non-existent-media-file", "error")
                .whenReady(setup)
                .start();

            function setup()
            {
                internals.settings.setAllowsPictureInPictureMediaPlayback(true);
                internals.settings.setAllowsAirPlayForMediaPlayback(false);

                tester.test("We are using the Apple idiom")
                    .value(tester.currentState.idiom)
                    .isEqualTo("apple");
                tester.startNewSection("*** Test the controls layout without video ***");
                runTestsWithoutVideo();
            }

            function testControls(data, nextTest)
            {
                if (!data.length) {
                    if (typeof nextTest === "function")
                        nextTest();
                    else
                        tester.end();
                    return;
                }
                
                const test = data.shift();
                
                if (typeof tester.media.webkitSupportsPresentationMode !== "function" || !tester.media.webkitSupportsPresentationMode('picture-in-picture'))
                    test.visible = test.visible.filter(name => name.indexOf("Picture-in-picture Button") === -1);
                if (!internals.setMockMediaPlaybackTargetPickerState)
                    test.visible = test.visible.filter(name => name.indexOf("AppleTV Device Picker") === -1);

                tester.media.style.width = test.width + "px";
                window.setTimeout( () => {
                    tester.logMessage(`* Width ${tester.media.style.width}:`);

                    const isVisible = (state, name) => { 
                        if (state === null || typeof state.className !== "string")
                            return false;
                        return state.className.indexOf("dropped") === -1 && state.className.indexOf("hidden") === -1;
                    }

                    test.visible.forEach(name => {
                        const state = tester.stateForControlsElement(name, true);
                        tester.test(`${name} is visible`)
                            .value(isVisible(state))
                            .isTrue();
                    });

                    allButtons.filter(name => test.visible.indexOf(name) === -1).forEach(name => {
                        const state = tester.stateForControlsElement(name, true);
                        tester.test(`${name} is not visible`)
                            .value(isVisible(state))
                            .isFalse();
                    });

                    tester.logBlankLine();
                    testControls(data, nextTest);
                }, 100);
            }

            function runTestsWithoutVideo()
            {
                const setupNextTest = () => {
                    tester.resetEventTrigger("canplaythrough")
                        .whenReady(runTestsWithVideo)
                        .media.src = findMediaFile("video", "../content/test");
                    tester.startNewSection("*** Test the controls layout with video ***");
                };

                const data = [
                    { width: 60, visible : ["Play Button", "Status Display"] },
                    { width: 90, visible : ["Play Button", "Rewind Button", "Status Display"] },
                    { width: 200, visible : ["Play Button", "Rewind Button", "Status Display", "Mute Box"] },
                ];
                testControls(data, setupNextTest);
            }

            function runTestsWithVideo()
            {
                const setupNextTest = () => {
                    tester.startNewSection("*** Test the controls layout with video and a caption track ***")
                    const track = document.createElement("track");
                    track.kind = "captions";
                    track.src = `data:text/vtt,${encodeURIComponent("WEBVTT\n\n00:00:00.000 --> 00:00:01.000\nCaption 1\n")}`;
                    tester.media.appendChild(track);
                    
                    runTestsWithTextTrack();
                };

                const data = [
                    { width: 60,  visible : ["Play Button"] },
                    { width: 90,  visible : ["Play Button", "Fullscreen Button"] },
                    { width: 120, visible : ["Play Button", "Rewind Button", "Fullscreen Button"] },
                    { width: 150, visible : ["Play Button", "Rewind Button", "Mute Box", "Fullscreen Button"] },
                    { width: 200, visible : ["Play Button", "Rewind Button", "Mute Box", "Picture-in-picture Button", "Fullscreen Button"] },
                    { width: 400, visible : ["Play Button", "Rewind Button", "Timeline", "Current Time", "Thumbnail Track", "Time Remaining", "Mute Box", "Picture-in-picture Button", "Fullscreen Button"] },
                ];

                testControls(data, setupNextTest);
            }

            function runTestsWithTextTrack()
            {
                const setupNextTest = () => {
                    tester.startNewSection("*** Test the controls layout with video, a caption track, and AppleTV ***");
                    internals.settings.setAllowsAirPlayForMediaPlayback(true);
                    internals.setMockMediaPlaybackTargetPickerState("Sleepy TV", "DeviceAvailable");
                    runTestsWithVideoAndAppleTV();
                };

                const data = [
                    { width: 60,  visible : ["Play Button"] },
                    { width: 90,  visible : ["Play Button", "Fullscreen Button"] },
                    { width: 120, visible : ["Play Button", "Rewind Button", "Fullscreen Button"] },
                    { width: 150, visible : ["Play Button", "Rewind Button", "Mute Box", "Fullscreen Button"] },
                    { width: 180, visible : ["Play Button", "Rewind Button", "Mute Box", "Caption Button", "Fullscreen Button"] },
                    { width: 200, visible : ["Play Button", "Rewind Button", "Mute Box", "Caption Button", "Picture-in-picture Button", "Fullscreen Button"] },
                    { width: 400, visible : ["Play Button", "Rewind Button", "Current Time", "Timeline", "Thumbnail Track", "Time Remaining", "Mute Box", "Caption Button", "Picture-in-picture Button", "Fullscreen Button"] },
                ];
                
                testControls(data, internals.setMockMediaPlaybackTargetPickerState ? setupNextTest : null);
            }

            function runTestsWithVideoAndAppleTV()
            {
                const data = [
                    { width: 60,  visible : ["Play Button"] },
                    { width: 90,  visible : ["Play Button", "Fullscreen Button"] },
                    { width: 120, visible : ["Play Button", "Rewind Button", "Fullscreen Button"] },
                    { width: 150, visible : ["Play Button", "Rewind Button", "Mute Box", "Fullscreen Button"] },
                    { width: 180, visible : ["Play Button", "Rewind Button", "Mute Box", "Caption Button", "Fullscreen Button"] },
                    { width: 200, visible : ["Play Button", "Rewind Button", "Mute Box", "Caption Button", "Picture-in-picture Button", "Fullscreen Button"] },
                    { width: 350, visible : ["Play Button", "Rewind Button", "Mute Box", "AppleTV Device Picker", "Caption Button", "Picture-in-picture Button", "Fullscreen Button"] },
                    { width: 400, visible : ["Play Button", "Rewind Button", "Current Time", "Timeline", "Thumbnail Track", "Time Remaining", "Mute Box", "AppleTV Device Picker", "Caption Button", "Picture-in-picture Button", "Fullscreen Button"] },
                ];

                testControls(data);
            }


        </script>
    </head>
    <body>
        <p>Test control element visibility at different element widths.</p>
        <p>This test only runs in DRT!</p>
        <video controls></video>
    </body>
</html>