<!DOCTYPE html>
<p>This tests if media controls play button is properly updated accroding to mouse clicks</p>
<video controls></video>
<script src=media-file.js></script>
<script src=media-controls.js></script>
<script>
function timeLineValue()
{
    var timeline = mediaControlsElement(internals.shadowRoot(video).firstChild.firstChild, '-webkit-media-controls-timeline');
    if (!timeline)
        throw "Failed to find -webkit-media-controls-timeline";

    return timeline.value;
}

function click()
{
    if (!window.testRunner)
        return;

    eventSender.mouseDown();
    eventSender.mouseUp();
}

function canplaythrough()
{
    if (!window.testRunner)
        return;

    window.testRunner.waitUntilDone();

    var playButtonCoords;
    try {
        playButtonCoords = mediaControlsButtonCoordinates(video, "play-button");
    } catch (exception) {
        window.testRunner.notifyDone();
        return;
    }

    eventSender.mouseMoveTo(playButtonCoords[0], playButtonCoords[1]);
    setTimeout(click, 0);
}

function pause()
{
    if (!window.testRunner)
        return;

    window.testRunner.notifyDone();
}

function playing()
{
    setTimeout(click, 0);
}

var video;
var requirePixelDump = true;

onload = function() {
    findMediaElement();
    video.src = findMediaFile("video", "content/test");

    waitForEvent("canplaythrough", canplaythrough);
    waitForEvent("playing", playing);
    waitForEvent("pause", pause);
    waitForEventAndFail("error");
}
</script>
<script src=video-test.js></script>