The Tor Browser / file comparison
comparison: content/canvas/test/test_toDataURL_alpha.html
content/canvas/test/test_toDataURL_alpha.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8c9c38bd272d |
|---|---|
| 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 | |
| 201 addLoadEvent(runTests); | |
| 202 | |
| 203 </script> | |
| 204 | |
| 205 </html> |
