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

            if (window.internals)
                window.internals.settings.setAllowsPictureInPictureMediaPlayback(true);

            const tester = new ControlsTest("non-existent-media-file", "error")
                .whenReady(runTestsWithoutVideo)
                .start();

            function runTestsWithoutVideo()
            {
                const currentState = tester.currentState;
                tester.test("We are using the apple idiom")
                    .value(currentState.idiom)
                    .isEqualTo("apple");

                tester.startNewSection("Test the picture-in-picture button without video", true);

                const stateForPictureInPictureButton = tester.stateForControlsElement("Picture-in-picture Button");
                tester.test("Picture-in-picture button should not be visible if there's no video")
                    .value(stateForPictureInPictureButton.className)
                    .contains("hidden");

                tester.resetEventTrigger("canplaythrough")
                    .whenReady(runTestsWithVideo)
                    .media.src = findMediaFile("video", "../content/test");
            }

            function runTestsWithVideo()
            {
                tester.startNewSection("Test the picture-in-picture button with valid video");

                const stateForPictureInPictureButton = tester.stateForControlsElement("Picture-in-picture Button", true);
                tester.test("Picture-in-picture button should be visible if there's video")
                    .value(stateForPictureInPictureButton.className)
                    .doesNotContain("hidden");

                tester.test("Picture-in-picture button should be in the dom if there's video")
                    .value(stateForPictureInPictureButton.parentElement)
                    .isNotEqualTo(undefined);

                const stateForPlaceholder = tester.stateForControlsElement("Inline playback placeholder", true);
                tester.test("Inline placeholder should not be visible at this point")
                    .value(stateForPlaceholder.className)
                    .contains("hidden");

                internals.setMediaElementRestrictions(tester.media, "NoRestrictions");
                tester.resetEventTrigger("webkitpresentationmodechanged")
                    .whenReady(testPIPPlaceholder)
                    .media.webkitSetPresentationMode("picture-in-picture");
            }

            function testPIPPlaceholder()
            {
                tester.startNewSection("Test for the pip placeholder visibility in pip mode");

                tester.test("Should be in pip mode")
                    .value(tester.media.webkitPresentationMode)
                    .isEqualTo("picture-in-picture");

                pollPIPPlaceholderVisibilityChange();
            }

            function pollPIPPlaceholderVisibilityChange()
            {
                const stateForPlaceholder = tester.stateForControlsElement("Inline playback placeholder", true);
                if (stateForPlaceholder.className.indexOf("hidden") >= 0) {
                    if (attemptsToTestPlaceholderVisibility > maxAttemptsToTestPlaceholderVisibility) {
                        tester.logFailure("Inline placeholder did not become visible after video enters picture-in-picture.");
                        tester.end();
                        return;
                    }

                    // Use 33 to match PlaceholderPollingDelay in mediaControlsApple.js.
                    setTimeout(pollPIPPlaceholderVisibilityChange, 33);
                    attemptsToTestPlaceholderVisibility++;
                    return;
                }

                tester.test("Inline placeholder should be visible at this point")
                    .value(stateForPlaceholder.className)
                    .doesNotContain("hidden");

                const controlsObserver = new MutationObserver(controlsDidChange);
                controlsObserver.observe(tester.media, { attributes: true, attributeFilter: ['controls'] });

                tester.media.removeAttribute('controls');
            }

            function controlsDidChange()
            {
                tester.startNewSection("Test for the pip placeholder visibility in pip mode without a 'controls' attribute");

                tester.test("Should still be in pip mode")
                    .value(tester.media.webkitPresentationMode)
                    .isEqualTo("picture-in-picture");

                tester.test("No controls attribute")
                    .value(tester.media.hasAttribute('controls'))
                    .isFalse();

                const stateForPlaceholder = tester.stateForControlsElement("Inline playback placeholder", true);
                tester.test("Inline placeholder should still be visible")
                    .value(stateForPlaceholder.className)
                    .doesNotContain("hidden");

                tester.media.webkitSetPresentationMode("inline");

                tester.end();
            }
        </script>
    </head>
    <body>
        <p>This tests the picture-in-picture button.</p>
        <p>This test only runs in DRT!</p>
        <video controls></video>
    </body>
</html>