<!-- webkit-test-runner [ enableModernMediaControls=false ] -->
<body onload="initialChecksBeforePlay()">
<p>
    This tests:<br>
    1. Initially, toolbar is visible, "Show Controls" button is not.<br>
    2. After the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the invisible "Show Controls" button.<br>
    3. When the video is paused, the controls become visible and the "Show Controls" button is hidden.<br>
</p>

<video id="video" controls onplaying="testPlaying()"  onpause="testPausing()" src="content/long-test.mp4"></video><br>

<p id="result">
    FAIL: Test did not run.<br>
</p>
<script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    var result = document.getElementById("result");
    result.innerHTML = "";
    // Initially, the showControls Button should be hidden.
    var root = internals.shadowRoot(document.getElementById("video"));
    var button = root.firstChild.querySelector('button');
    var controls = root.firstChild.querySelector('[role="toolbar"]');
    var video = document.getElementById('video');

    function isElementHidden(elem) {
        return (elem.hidden && getComputedStyle(elem).display === 'none')
    }
    function initialChecksBeforePlay() {
        // Before we start, check to make sure toolbar is in place and showControlsbutton is hidden.
        result.innerHTML += (!isElementHidden(controls))? 'PASS<br>': 'FAIL: Controls are not available at the beginning.<br>';
        result.innerHTML += (isElementHidden(button))? 'PASS<br>': 'FAIL: "Show Controls" button is not hidden initially.<br>';

        video.play();
    }

    function testPlaying() {
        // Make sure we are getting the updated root and button.
        root = internals.shadowRoot(document.getElementById("video"));

        // We give it a 100ms buffer for the video to set all the properties before sending mouse events.
        setTimeout(function () {
            // Mouse over the video then mouse out to hide controls more quickly.
            eventSender.mouseMoveTo(150,150);
            eventSender.mouseMoveTo(0,0);
        }, 100);

        // 300ms after the mouse events, all UI changes should complete and we can start making assertions.
        setTimeout(function() {
            // Make sure we are getting the latest copy of the element.
            controls = root.firstChild.querySelector('[role="toolbar"]');
            result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar still around after mouseout.<br>';

            // Make sure we are getting the latest copy of the element.
            button = root.firstChild.querySelector('button');
            result.innerHTML += !isElementHidden(button)? 'PASS<br>': 'FAIL: Button should be visible.<br>';

            if(button && !isElementHidden(button)) {
                button.focus();
                eventSender.keyDown(' ');
            } else 
                result.innerHTML += 'FAIL: "Show Controls" button is hidden or unavailable.<br>';

            // Make sure we are getting the latest copy of the element.
            controls = root.firstChild.querySelector('[role="toolbar"]');
            result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';

            eventSender.mouseMoveTo(150,150);
            eventSender.mouseMoveTo(0,0);

            setTimeout(function () {
                controls = root.firstChild.querySelector('[role="toolbar"]');
                result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar should not exist<br>';
                // We are done testing playing state, moving on to testing the paused state.
                video.pause();
            }, 300);
        }, 400);
    }

    function testPausing() {
        // We are giving 100ms + 300s buffer for the video to set its properties and make UI changes.
        setTimeout(function () {
            controls = root.firstChild.querySelector('[role="toolbar"]');
            result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';

            button = root.firstChild.querySelector('button');
            result.innerHTML += isElementHidden(button)? 'PASS<br>': 'FAIL: Button should not be visible.<br>';

            testRunner.notifyDone();
        }, 400);
    }
</script>
</body>