<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
    
    video, #host {
        position: absolute;
        top: 0;
        left: 0;
    }

    video {
        width: 800px;
        height: 240px;
        pointer-events: none;
    }
    
</style>
<video src="../../content/test.mp4" autoplay></video>
<div id="host"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing the <code>PlacardSupport</code> behavior when entering picture-in-picture.");

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

const container = document.querySelector("div#host");
const media = document.querySelector("video");
const mediaController = createControls(container, media, null);

const button = document.body.appendChild(document.createElement("div"));
button.innerText = "Enter picture-in-picture";

button.addEventListener("click", togglePiP);

media.addEventListener("webkitpresentationmodechanged", () => {
    if (media.webkitPresentationMode == "picture-in-picture") {
        shouldBe("mediaController.controls.placard", "mediaController.controls.pipPlacard");
        shouldBeTrue("mediaController.controls.children.includes(mediaController.controls.pipPlacard)");
        togglePiP();
    } else {
        shouldBeNull("mediaController.controls.placard");
        shouldBeFalse("mediaController.controls.children.includes(mediaController.controls.pipPlacard)");
        container.remove();
        media.remove();
        button.remove();
        finishJSTest();
    }
});

media.addEventListener("play", clickButton);

function clickButton() {
    pressOnElement(button);
}

function togglePiP()
{
    media.webkitSetPresentationMode(media.webkitPresentationMode == "inline" ? "picture-in-picture" : "inline");
}

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>