content/test/data/gpu/pixel_canvas2d.html

   1 <!DOCTYPE HTML>
   2
   3 <!-- READ BEFORE UPDATING:
   4 If this test is updated make sure to increment the "revision" value of the
   5 associated test in content/test/gpu/page_sets/pixel_tests.json. This will ensure
   6 that the baseline images are regenerated on the next run.
   7 -->
   8
   9 <html>
  10 <head>
  11 <title>Canvas 2D Test: Red Box over Black Background</title>
  12 <style type="text/css">
  13 .nomargin {
  14   margin: 0px auto;
  15 }
  16 </style>
  17 <script>
  18 var g_swapsBeforeAck = 15;
  19
  20 function main()
  21 {
  22   draw();
  23   waitForFinish();
  24 }
  25
  26 function draw()
  27 {
  28   var canvas = document.getElementById("c");
  29   var c2d = canvas.getContext("2d");
  30   c2d.clearRect(0, 0, canvas.width, canvas.height);
  31   c2d.fillStyle = "rgba(255, 0, 0, 0.5)";
  32   c2d.fillRect(50, 50, 100, 100);
  33 }
  34
  35 function waitForFinish()
  36 {
  37   if (g_swapsBeforeAck == 0) {
  38     domAutomationController.setAutomationId(1);
  39     domAutomationController.send("SUCCESS");
  40   } else {
  41     g_swapsBeforeAck--;
  42     document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
  43     window.webkitRequestAnimationFrame(waitForFinish);
  44   }
  45 }
  46 </script>
  47 </head>
  48 <body onload="main()">
  49 <div style="position:relative; width:200px; height:200px; background-color:black">
  50 </div>
  51 <div id="container" style="position:absolute; top:0px; left:0px">
  52 <canvas id="c" width="200" height="200" class="nomargin"></canvas>
  53 </div>
  54 </body>
  55 </html>