| <!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"> |
| <source src="resources/canvas_video.mp4" type='video/mp4' /> |
| <source src="resources/canvas_video.webm" type='video/webm' /> |
| <source src="resources/canvas_video.ogv" type='video/ogg' /> |
| </video></div> |
| <script type="application/x-javascript"> |
| function drawImage(context, compositeIndex, alpha) { |
| context.globalCompositeOperation = compositeTypes[compositeIndex]; |
| if (alpha) |
| context.globalAlpha = 0.5; |
| var videoElement = document.getElementById('video'); |
| context.drawImage(videoElement, 10, 10); |
| } |
| |
| function setupTest() {} |
| |
| var video = document.getElementById("video"); |
| video.addEventListener("playing", playVideo, true); |
| video.play(); |
| |
| function playVideo() { |
| video.removeEventListener("playing", playVideo, true); |
| // We cannot read pixel after drawing a video because of SecurityError: |
| // The canvas has been tainted by cross-origin data. |
| runTest("dumpAsTextWithPixelResults") |
| } |
| </script> |
| </body> |
| </html> |
