1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/canvas/test/test_toDataURL_alpha.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,205 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 +<title>Canvas test: toDataURL parameters (Bug 564388)</title>
1.8 +<script src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 +<link rel="stylesheet" href="/tests/SimpleTest/test.css">
1.10 +</head>
1.11 +<body>
1.12 +<p>
1.13 +For image types that do not support an alpha channel, the image must be
1.14 +composited onto a solid black background using the source-over operator,
1.15 +and the resulting image must be the one used to create the data: URL.
1.16 +</p>
1.17 +<p> See:
1.18 +<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl">
1.19 +http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl
1.20 +</a>
1.21 +</p>
1.22 +<p>Mozilla
1.23 + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=650720">Bug 650720</a>
1.24 +</p>
1.25 +<p class="output">Output:</p>
1.26 +<!--
1.27 + Author's note:
1.28 + To add more cases to this test:
1.29 + - To add a row (another color value)
1.30 + * Add a row to the table below, using the canvas id format
1.31 + (c<row>-<col>)
1.32 + * Update runTests to include the new row in the loop
1.33 + - To add a column (another image format)
1.34 + * Add a column to the table below, using the canvas id format above
1.35 + * Update runTests to call do_canvas, passing your column number,
1.36 + the image format, and any options to pass to the toDataUrl function
1.37 +
1.38 + Vaguely derived from Philip Taylor's toDataURL.jpeg.alpha test:
1.39 + http://philip.html5.org/tests/canvas/suite/tests/toDataURL.jpeg.alpha.html
1.40 +-->
1.41 +<table>
1.42 + <tr>
1.43 + <th>Type:</th>
1.44 + <th>image/png</th>
1.45 + <th>image/jpeg</th>
1.46 + <th>image/bmp<br />(24 bpp)</th>
1.47 + <th>image/bmp<br />(32 bpp)</th>
1.48 + </tr>
1.49 + <tr>
1.50 + <td id="c1">rgba(128, 255, 128, 0.5)</td>
1.51 + <td><canvas id="c1-1" class="output" width="100" height="50">
1.52 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.53 + <td><canvas id="c1-2" class="output" width="100" height="50">
1.54 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.55 + <td><canvas id="c1-3" class="output" width="100" height="50">
1.56 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.57 + <td><canvas id="c1-4" class="output" width="100" height="50">
1.58 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.59 + </tr>
1.60 + <tr>
1.61 + <td id="c2">rgba(255, 128, 128, 0.75)</td>
1.62 + <td><canvas id="c2-1" class="output" width="100" height="50">
1.63 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.64 + <td><canvas id="c2-2" class="output" width="100" height="50">
1.65 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.66 + <td><canvas id="c2-3" class="output" width="100" height="50">
1.67 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.68 + <td><canvas id="c2-4" class="output" width="100" height="50">
1.69 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.70 + </tr>
1.71 + <tr>
1.72 + <td id="c3">rgba(128, 128, 255, 0.25)</td>
1.73 + <td><canvas id="c3-1" class="output" width="100" height="50">
1.74 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.75 + <td><canvas id="c3-2" class="output" width="100" height="50">
1.76 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.77 + <td><canvas id="c3-3" class="output" width="100" height="50">
1.78 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.79 + <td><canvas id="c3-4" class="output" width="100" height="50">
1.80 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.81 + </tr>
1.82 + <tr>
1.83 + <td id="c4">rgba(255, 255, 255, 1.0)</td>
1.84 + <td><canvas id="c4-1" class="output" width="100" height="50">
1.85 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.86 + <td><canvas id="c4-2" class="output" width="100" height="50">
1.87 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.88 + <td><canvas id="c4-3" class="output" width="100" height="50">
1.89 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.90 + <td><canvas id="c4-4" class="output" width="100" height="50">
1.91 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.92 + </tr>
1.93 + <tr>
1.94 + <td id="c5">rgba(255, 255, 255, 0)</td>
1.95 + <td><canvas id="c5-1" class="output" width="100" height="50">
1.96 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.97 + <td><canvas id="c5-2" class="output" width="100" height="50">
1.98 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.99 + <td><canvas id="c5-3" class="output" width="100" height="50">
1.100 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.101 + <td><canvas id="c5-4" class="output" width="100" height="50">
1.102 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.103 + </tr>
1.104 + <tr>
1.105 + <td id="c6">rgba(0, 0, 0, 1.0)</td>
1.106 + <td><canvas id="c6-1" class="output" width="100" height="50">
1.107 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.108 + <td><canvas id="c6-2" class="output" width="100" height="50">
1.109 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.110 + <td><canvas id="c6-3" class="output" width="100" height="50">
1.111 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.112 + <td><canvas id="c6-4" class="output" width="100" height="50">
1.113 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.114 + </tr>
1.115 + <tr>
1.116 + <td id="c7">rgba(0, 0, 0, 0)</td>
1.117 + <td><canvas id="c7-1" class="output" width="100" height="50">
1.118 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.119 + <td><canvas id="c7-2" class="output" width="100" height="50">
1.120 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.121 + <td><canvas id="c7-3" class="output" width="100" height="50">
1.122 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.123 + <td><canvas id="c7-4" class="output" width="100" height="50">
1.124 + <p class="fallback">FAIL (fallback content)</p></canvas></td>
1.125 + </tr>
1.126 +</table>
1.127 +
1.128 +<script>
1.129 +var finishedTests = [];
1.130 +
1.131 +function isPixel(ctx, x,y, r,g,b,a, d)
1.132 +{
1.133 + var pos = x + "," + y;
1.134 + var colour = r + "," + g + "," + b + "," + a;
1.135 + var pixel = ctx.getImageData(x, y, 1, 1);
1.136 + var pr = pixel.data[0],
1.137 + pg = pixel.data[1],
1.138 + pb = pixel.data[2],
1.139 + pa = pixel.data[3];
1.140 + ok(r-d <= pr && pr <= r+d &&
1.141 + g-d <= pg && pg <= g+d &&
1.142 + b-d <= pb && pb <= b+d &&
1.143 + a-d <= pa && pa <= a+d,
1.144 + "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+
1.145 + "; expected "+colour+" +/- "+d);
1.146 +}
1.147 +
1.148 +
1.149 +function do_canvas(row, col, type, options)
1.150 +{
1.151 + finishedTests[row + '_' + col] = false;
1.152 + var canvas = document.getElementById('c' + row + '-' + col);
1.153 + var ctx = canvas.getContext('2d');
1.154 +
1.155 + ctx.fillStyle = document.getElementById('c' + row).textContent;
1.156 + ctx.fillRect(0, 0, 100, 50);
1.157 + var data = canvas.toDataURL(type, options);
1.158 +
1.159 + ctx.fillStyle = '#000';
1.160 + ctx.fillRect(0, 0, 100, 50);
1.161 + var img = new Image();
1.162 +
1.163 + var color = document.getElementById('c' + row).textContent;
1.164 + color = color.substr(5, color.length - 6); // strip off the 'argb()'
1.165 + var colors = color.replace(' ', '', 'g').split(',');
1.166 + var r = colors[0]*colors[3],
1.167 + g = colors[1]*colors[3],
1.168 + b = colors[2]*colors[3];
1.169 +
1.170 + img.onload = function ()
1.171 + {
1.172 + ctx.drawImage(img, 0, 0);
1.173 + isPixel(ctx, 50,25, r,g,b,255, 8);
1.174 + finishedTests[row + '_' + col] = true;
1.175 + };
1.176 + img.src = data;
1.177 +}
1.178 +
1.179 +function checkFinished()
1.180 +{
1.181 + for (var t in finishedTests) {
1.182 + if (!finishedTests[t]) {
1.183 + setTimeout(checkFinished, 500);
1.184 + return;
1.185 + }
1.186 + }
1.187 + SimpleTest.finish();
1.188 +}
1.189 +
1.190 +function runTests()
1.191 +{
1.192 + for (var row = 1; row <= 7; row++) {
1.193 + do_canvas(row, 1, 'image/png');
1.194 + do_canvas(row, 2, 'image/jpeg');
1.195 + do_canvas(row, 3, 'image/bmp');
1.196 + do_canvas(row, 4, 'image/bmp', '-moz-parse-options:bpp=32');
1.197 + }
1.198 +
1.199 + setTimeout(checkFinished, 500);
1.200 +}
1.201 +
1.202 +SimpleTest.waitForExplicitFinish();
1.203 +
1.204 +addLoadEvent(runTests);
1.205 +
1.206 +</script>
1.207 +
1.208 +</html>
