test_drawImage_edge_cases.html (1020B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 6 </head> 7 <body onload="doTest()"> 8 <p id="display"> 9 <canvas id="c" width="1" height="1"></canvas> 10 <img id="img" src="image_red.png"> 11 </p> 12 <div id="content" style="display: none"> 13 14 </div> 15 <pre id="test"> 16 <script type="application/javascript"> 17 18 var c = document.getElementById("c"); 19 var ctx = c.getContext("2d"); 20 var img = document.getElementById("img"); 21 22 SimpleTest.waitForExplicitFinish(); 23 24 function doTest() { 25 ctx.drawImage(img, 0, 0); 26 img.src = "image_green-1x1.png"; 27 img.onload = function() { 28 ctx.drawImage(img, 0, 0); 29 var data = ctx.getImageData(0, 0, 1, 1).data; 30 is(data[0], 0, "Red channel should be 0"); 31 is(data[1], 255, "Green channel should be 1.0"); 32 is(data[2], 0, "Blue channel should be 0") 33 is(data[3], 255, "Alpha channel should be opaque"); 34 35 SimpleTest.finish(); 36 } 37 } 38 39 </script> 40 </pre> 41 </body> 42 </html>