1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Canvas 2D Test: Red Box over Black Background</title> 5 <style type="text/css"> 6 .nomargin { 7 margin: 0px auto; 8 } 9 </style> 10 <script> 11 var g_swapsBeforeAck = 15; 12 13 function main() 14 { 15 draw(); 16 waitForFinish(); 17 } 18 19 function draw() 20 { 21 var canvas = document.getElementById("c"); 22 var c2d = canvas.getContext("2d"); 23 c2d.clearRect(0, 0, canvas.width, canvas.height); 24 c2d.fillStyle = "rgba(255, 0, 0, 0.5)"; 25 c2d.fillRect(50, 50, 100, 100); 26 } 27 28 function waitForFinish() 29 { 30 if (g_swapsBeforeAck == 0) { 31 domAutomationController.setAutomationId(1); 32 domAutomationController.send("SUCCESS"); 33 } else { 34 g_swapsBeforeAck--; 35 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; 36 window.webkitRequestAnimationFrame(waitForFinish); 37 } 38 } 39 </script> 40 </head> 41 <body onload="main()"> 42 <div style="position:relative; width:200px; height:200px; background-color:black"> 43 </div> 44 <div id="container" style="position:absolute; top:0px; left:0px"> 45 <canvas id="c" width="200" height="200" class="nomargin"></canvas> 46 </div> 47 </body> 48 </html> 49
