dom/canvas/test/test_toDataURL_alpha.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Canvas test: toDataURL parameters (Bug 564388)</title>
   5 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   7 </head>
   8 <body>
   9 <p>
  10 For image types that do not support an alpha channel, the image must be
  11 composited onto a solid black background using the source-over operator,
  12 and the resulting image must be the one used to create the data: URL.
  13 </p>
  14 <p> See:
  15 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl">
  16 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl
  17 </a>
  18 </p>
  19 <p>Mozilla
  20     <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=650720">Bug 650720</a>
  21 </p>
  22 <p class="output">Output:</p>
  23 <!--
  24     Author's note:
  25     To add more cases to this test:
  26     - To add a row (another color value)
  27       * Add a row to the table below, using the canvas id format
  28         (c<row>-<col>)
  29       * Update runTests to include the new row in the loop
  30     - To add a column (another image format)
  31       * Add a column to the table below, using the canvas id format above
  32       * Update runTests to call do_canvas, passing your column number,
  33         the image format, and any options to pass to the toDataUrl function
  34
  35     Vaguely derived from Philip Taylor's toDataURL.jpeg.alpha test:
  36     http://philip.html5.org/tests/canvas/suite/tests/toDataURL.jpeg.alpha.html
  37 -->
  38 <table>
  39     <tr>
  40         <th>Type:</th>
  41         <th>image/png</th>
  42         <th>image/jpeg</th>
  43         <th>image/bmp<br />(24 bpp)</th>
  44         <th>image/bmp<br />(32 bpp)</th>
  45     </tr>
  46     <tr>
  47         <td id="c1">rgba(128, 255, 128, 0.5)</td>
  48         <td><canvas id="c1-1" class="output" width="100" height="50">
  49             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  50         <td><canvas id="c1-2" class="output" width="100" height="50">
  51             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  52         <td><canvas id="c1-3" class="output" width="100" height="50">
  53             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  54         <td><canvas id="c1-4" class="output" width="100" height="50">
  55             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  56     </tr>
  57     <tr>
  58         <td id="c2">rgba(255, 128, 128, 0.75)</td>
  59         <td><canvas id="c2-1" class="output" width="100" height="50">
  60             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  61         <td><canvas id="c2-2" class="output" width="100" height="50">
  62             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  63         <td><canvas id="c2-3" class="output" width="100" height="50">
  64             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  65         <td><canvas id="c2-4" class="output" width="100" height="50">
  66             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  67     </tr>
  68     <tr>
  69         <td id="c3">rgba(128, 128, 255, 0.25)</td>
  70         <td><canvas id="c3-1" class="output" width="100" height="50">
  71             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  72         <td><canvas id="c3-2" class="output" width="100" height="50">
  73             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  74         <td><canvas id="c3-3" class="output" width="100" height="50">
  75             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  76         <td><canvas id="c3-4" class="output" width="100" height="50">
  77             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  78     </tr>
  79     <tr>
  80         <td id="c4">rgba(255, 255, 255, 1.0)</td>
  81         <td><canvas id="c4-1" class="output" width="100" height="50">
  82             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  83         <td><canvas id="c4-2" class="output" width="100" height="50">
  84             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  85         <td><canvas id="c4-3" class="output" width="100" height="50">
  86             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  87         <td><canvas id="c4-4" class="output" width="100" height="50">
  88             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  89     </tr>
  90     <tr>
  91         <td id="c5">rgba(255, 255, 255, 0)</td>
  92         <td><canvas id="c5-1" class="output" width="100" height="50">
  93             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  94         <td><canvas id="c5-2" class="output" width="100" height="50">
  95             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  96         <td><canvas id="c5-3" class="output" width="100" height="50">
  97             <p class="fallback">FAIL (fallback content)</p></canvas></td>
  98         <td><canvas id="c5-4" class="output" width="100" height="50">
  99             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 100     </tr>
 101     <tr>
 102         <td id="c6">rgba(0, 0, 0, 1.0)</td>
 103         <td><canvas id="c6-1" class="output" width="100" height="50">
 104             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 105         <td><canvas id="c6-2" class="output" width="100" height="50">
 106             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 107         <td><canvas id="c6-3" class="output" width="100" height="50">
 108             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 109         <td><canvas id="c6-4" class="output" width="100" height="50">
 110             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 111     </tr>
 112     <tr>
 113         <td id="c7">rgba(0, 0, 0, 0)</td>
 114         <td><canvas id="c7-1" class="output" width="100" height="50">
 115             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 116         <td><canvas id="c7-2" class="output" width="100" height="50">
 117             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 118         <td><canvas id="c7-3" class="output" width="100" height="50">
 119             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 120         <td><canvas id="c7-4" class="output" width="100" height="50">
 121             <p class="fallback">FAIL (fallback content)</p></canvas></td>
 122     </tr>
 123 </table>
 124
 125 <script>
 126 var finishedTests = [];
 127
 128 function isPixel(ctx, x,y, r,g,b,a, d)
 129 {
 130     var pos = x + "," + y;
 131     var colour = r + "," + g + "," + b + "," + a;
 132     var pixel = ctx.getImageData(x, y, 1, 1);
 133     var pr = pixel.data[0],
 134         pg = pixel.data[1],
 135         pb = pixel.data[2],
 136         pa = pixel.data[3];
 137     ok(r-d <= pr && pr <= r+d &&
 138        g-d <= pg && pg <= g+d &&
 139        b-d <= pb && pb <= b+d &&
 140        a-d <= pa && pa <= a+d,
 141        "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+
 142          "; expected "+colour+" +/- "+d);
 143 }
 144
 145
 146 function do_canvas(row, col, type, options)
 147 {
 148     finishedTests[row + '_' + col] = false;
 149     var canvas = document.getElementById('c' + row + '-' + col);
 150     var ctx = canvas.getContext('2d');
 151
 152     ctx.fillStyle = document.getElementById('c' + row).textContent;
 153     ctx.fillRect(0, 0, 100, 50);
 154     var data = canvas.toDataURL(type, options);
 155
 156     ctx.fillStyle = '#000';
 157     ctx.fillRect(0, 0, 100, 50);
 158     var img = new Image();
 159
 160     var color = document.getElementById('c' + row).textContent;
 161     color = color.substr(5, color.length - 6); // strip off the 'argb()'
 162     var colors = color.replace(/ /g, '').split(',');
 163     var r = colors[0]*colors[3],
 164         g = colors[1]*colors[3],
 165         b = colors[2]*colors[3];
 166
 167     img.onload = function ()
 168     {
 169         ctx.drawImage(img, 0, 0);
 170         isPixel(ctx, 50,25, r,g,b,255, 8);
 171         finishedTests[row + '_' + col] = true;
 172     };
 173     img.src = data;
 174 }
 175
 176 function checkFinished()
 177 {
 178     for (var t in finishedTests) {
 179         if (!finishedTests[t]) {
 180             setTimeout(checkFinished, 500);
 181             return;
 182         }
 183     }
 184     SimpleTest.finish();
 185 }
 186
 187 function runTests()
 188 {
 189     for (var row = 1; row <= 7; row++) {
 190         do_canvas(row, 1, 'image/png');
 191         do_canvas(row, 2, 'image/jpeg');
 192         do_canvas(row, 3, 'image/bmp');
 193         do_canvas(row, 4, 'image/bmp', '-moz-parse-options:bpp=32');
 194     }
 195
 196     setTimeout(checkFinished, 500);
 197 }
 198
 199 SimpleTest.waitForExplicitFinish();
 200 SimpleTest.requestFlakyTimeout("untriaged");
 201
 202 addLoadEvent(runTests);
 203
 204 </script>
 205
 206 </html>