test_toDataURL_alpha.html (8276B)
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>