<!DOCTYPE html>
<title>Test "controls" on transformed video.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<style>
video {
    margin: 50px;
    transform: rotate(20deg);
}
</style>
<video controls></video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    assert_true(video.controls);

    video.oncanplaythrough = t.step_func_done(function() {
        // Find the play button and click the middle of its bounding box.
        var playCoords = elementCoordinates(enabledPlayButton(video));
        eventSender.mouseMoveTo(playCoords[0], playCoords[1]);
        eventSender.mouseDown();
        eventSender.mouseUp();
        assert_false(video.paused);
    });

    video.src = "content/test.ogv";
});
</script>