content/canvas/test/test_toDataURL_alpha.html@deefc01c0e14
content/canvas/test/test_toDataURL_alpha.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
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
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>
125 <script>
126 var finishedTests = [];
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 }
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');
152 ctx.fillStyle = document.getElementById('c' + row).textContent;
153 ctx.fillRect(0, 0, 100, 50);
154 var data = canvas.toDataURL(type, options);
156 ctx.fillStyle = '#000';
157 ctx.fillRect(0, 0, 100, 50);
158 var img = new Image();
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];
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 }
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 }
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 }
196 setTimeout(checkFinished, 500);
197 }
199 SimpleTest.waitForExplicitFinish();
201 addLoadEvent(runTests);
203 </script>
205 </html>
