LayoutTests/fast/canvas/toDataURL-supportedTypes.html

   1 <html>
   2 <head>
   3     <style>
   4         img { border: 1px solid black; }
   5         pre { display: inline-block; margin: 5px; }
   6     </style>
   7     <script>
   8         if (window.layoutTestController)
   9             layoutTestController.dumpAsText();
  10
  11         function draw()
  12         {
  13             var canvas = document.getElementById("canvas");
  14             var ctx = canvas.getContext("2d");
  15
  16             ctx.fillStyle = "rgb(200,0,0)";
  17             ctx.fillRect(10, 10, 55, 50);
  18             ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  19             ctx.fillRect(30, 30, 55, 50);
  20
  21             testToDataURL();
  22         }
  23
  24         // Default list of supported image formats.
  25         var supportedMIMETypes = [
  26             "image/png",
  27             "image/jpeg",
  28             "image/gif",
  29         ];
  30
  31         function testToDataURL()
  32         {
  33             // Test supported MIME types
  34             for (var i in supportedMIMETypes) {
  35                 testMIMEType(supportedMIMETypes[i]);
  36             }
  37
  38             // Test no MIME type
  39             testMIMEType();
  40             testMIMEType(null);
  41             testMIMEType(undefined);
  42
  43             // Test other formats that we don't support
  44             testMIMEType("image/x-webkitbitmap");
  45         }
  46
  47         function testMIMEType(mime)
  48         {
  49             var canvas = document.getElementById("canvas");
  50
  51             var hadArgument = arguments.length;
  52             var url;
  53             if (!hadArgument)
  54                 url = canvas.toDataURL();
  55             else
  56                 url = canvas.toDataURL(mime);
  57
  58             var image = document.createElement("img");
  59             image.src = url;
  60             var usedMIMEType = url.substring(5, url.search(/;/));
  61             document.body.appendChild(image);
  62             var info = document.createElement("pre");
  63             info.appendChild(document.createTextNode("Given MIMEType: " + (hadArgument ? mime : "")));
  64             info.appendChild(document.createTextNode("\n"));
  65             info.appendChild(document.createTextNode("Used MIMEType: " + usedMIMEType));
  66             info.appendChild(document.createTextNode("\n"));
  67             info.appendChild(document.createTextNode((mime == usedMIMEType) ? "MIME types are the SAME." :  "MIME types DIFFER."));
  68             info.appendChild(document.createTextNode("\n\n"));
  69
  70             document.body.appendChild(info);
  71             document.body.appendChild(document.createElement("hr"));
  72         }
  73     </script>
  74 </head>
  75 <body onload="draw();">
  76     <canvas id="canvas" width="150" height="150"></canvas> The Actual Canvas <br><hr>
  77 </body>
  78 </html>