<!DOCTYPE html>
<html>
<body>
<div id="host"><section>full screen content</section></div>
<button>Enter fullscreen</button>
<script src="../../resources/js-test.js"></script>
<script>

description('Test that webkitFullscreenElement retargets the fullscreen element assigned to a slot.');

let shadowHost = document.getElementById('host');
let shadowRoot = shadowHost.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = '<span><slot></slot></span>';

function goFullscreen() {
    document.querySelector('section').webkitRequestFullscreen();
    setTimeout(function () {
        if (done)
            return;

        testFailed('webkitfullscreenchange was not fired');
        finishJSTest();
    }, 2000);
}

let done = false;
function finalizeTest() {
    if (done)
        return;
    done = true;

    shouldBe('document.webkitFullscreenElement', 'document.querySelector("section")');
    finishJSTest();
}

shadowRoot.addEventListener('webkitfullscreenchange', finalizeTest);
document.addEventListener('fullscreenchange', finalizeTest); // Standard fullscreenchange only fires at document level.

let button = document.querySelector('button');
button.onclick = goFullscreen;

if (window.eventSender) {
    jsTestIsAsync = true;
    eventSender.mouseMoveTo(button.offsetLeft + 5, button.offsetTop + 5);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

</script>
</body>
</html>