<!doctype html>
<html>
<head>
<title>Test drawImage(video) with canvas with different composite modes.</title>
<script src="resources/canvas-composite-image-common.js"></script>
<style type="text/css">
body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
canvas { border: 1px solid #999; }
div { margin: 10px; }
#output h1 { font-size: medium; font-weight: normal; }
#output h2 { font-size: small; font-weight: normal; }
#output div { font-size: small; margin: 0px; }
#output .pass { color: green; }
#output .fail { color: rgb(255, 0, 0); }
#output .error { color: rgb(255, 0, 64); }
td { padding: 2px 5px; }
table { border-collapse: collapse; }
</style>
</head>
<body>
<div>Test Results</div>
<div><table id='outputtable'></table></div>
<div>Test Video</div>
<div><video id="video"></video></div>
<script type="application/x-javascript">
function drawImage(context, compositeIndex, alpha) {
context.globalCompositeOperation = compositeTypes[compositeIndex];
context.shadowOffsetX = -2;
context.shadowOffsetY = 2;
context.shadowBlur = 8;
context.shadowColor = "purple";
if (alpha)
context.globalAlpha = 0.5;
var videoElement = document.getElementById('video');
context.drawImage(videoElement, 10, 10);
}
function setupTest() {}
var video = document.getElementById("video");
video.requestVideoFrameCallback(runTest);
video.src = "resources/canvas_video.webm";
video.play();
</script>
</body>
</html>