<html>
<head>
  <title>Test controls on transformed video</title>
  <style type="text/css" media="screen">
    video {
      margin: 50px;
      -webkit-transform: rotate(20deg);
    }
  </style>
</head>
<body>
    <video controls></video>
    <p>Test controls on transformed video.</p>
    <p>This test only runs in DRT!</p>
    <script src=media-file.js></script>
    <script src=video-test.js></script>
    <script src=media-controls.js></script>
    <script>
        testExpected("video.controls", null, '!=');
        waitForEvent('canplaythrough', function () {
            if (window.eventSender) {
                // Find the play button and click the middle of its bounding box.
                var playCoords;
                try {
                    playCoords = mediaControlsButtonCoordinates(video, "play-button");
                } catch (exception) {
                    failTest(exception.description);
                    return;
                }
                var clickX = playCoords[0];
                var clickY = playCoords[1];
                eventSender.mouseMoveTo(clickX, clickY);
                eventSender.mouseDown();
                eventSender.mouseUp();
            }
            testExpected("video.paused", false);
            endTest();
        } );
        video.src = findMediaFile("video", "content/test");
    </script>
</body>
</html>