content/test/data/gpu/pixel_canvas2d.html

   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>