dom/canvas/test/test_drawImage_edge_cases.html

   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>