dom/canvas/test/test_toBlob.html

   1 <!DOCTYPE HTML>
   2 <title>Canvas test: toBlob</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   5 <body>
   6 <canvas id="c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
   7 <script>
   8
   9 function BlobListener(type, canvas, callback, file)
  10 {
  11   is(file.type, type,
  12      "When a valid type is specified that should be returned");
  13   var reader = new FileReader();
  14   reader.onload =
  15     function(e) {
  16       is(e.target.result, canvas.toDataURL(type),
  17   "<canvas>.mozGetAsFile().getAsDataURL() should equal <canvas>.toDataURL()");
  18       callback(canvas);
  19     };
  20   reader.readAsDataURL(file);
  21 }
  22
  23 function test1(canvas)
  24 {
  25   canvas.toBlob(BlobListener.bind(undefined, "image/png", canvas, test2));
  26 }
  27
  28 function test2(canvas)
  29 {
  30   canvas.toBlob(
  31     BlobListener.bind(undefined, "image/jpeg", canvas, SimpleTest.finish),
  32     "image/jpeg");
  33 }
  34
  35 SimpleTest.waitForExplicitFinish();
  36 addLoadEvent(function () {
  37
  38 var canvas = document.getElementById('c');
  39 var ctx = canvas.getContext('2d');
  40 ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
  41
  42 test1(canvas);
  43
  44 });
  45 </script>
  46 <img src="image_yellow75.png" id="yellow75.png" class="resource">
  47