<!DOCTYPE html>
<html>
<head>
    <title>video-orientation-canvas</title>
    <script>requirePixelDump = true;</script>
    <script src="video-test.js"></script>
    <script>
        window.addEventListener('load', async event => {
            video1 = document.createElement('video');
            video1.src = 'content/no-rotation.mp4';
            await waitFor(video1, 'canplay', true);

            var canvas1 = document.querySelector('#canvas1');
            canvas1.height = video1.videoWidth;
            canvas1.width = video1.videoHeight;
            let context1 = canvas1.getContext('2d');
            context1.translate(video1.videoHeight, 0);
            context1.rotate(90 * Math.PI / 180);
            context1.drawImage(video1, 0, 0);

            var canvas2 = document.querySelector('#canvas2');
            canvas2.height = video1.videoHeight;
            canvas2.width = video1.videoWidth;
            let context2 = canvas2.getContext('2d');
            context2.translate(video1.videoWidth, video1.videoHeight);
            context2.rotate(180 * Math.PI / 180);
            context2.drawImage(video1, 0, 0);

            var canvas3 = document.querySelector('#canvas3');
            canvas3.height = video1.videoWidth;
            canvas3.width = video1.videoHeight;
            let context3 = canvas3.getContext('2d');
            context3.translate(0, video1.videoWidth);
            context3.rotate(270 * Math.PI / 180);
            context3.drawImage(video1, 0, 0);

            endTest();
        });
    </script>
</head>
<body>
    <canvas id=canvas1></canvas>
    <canvas id=canvas2></canvas>
    <canvas id=canvas3></canvas>
</body>
</html>