1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
|
# Copyright (c) 2010 Philip Taylor
# Released under the BSD license and W3C Test Suite License: see LICENSE.txt
framed: |
<!DOCTYPE html>
<title>Canvas test: %(name)s</title>
<script src="../tests.js"></script>
<link rel="stylesheet" href="../tests.css">
%(fonts)s<body class="framed show_output">
<h1>
<a href="%(name)s.html" target="_parent">%(name_wrapped)s</a>
</h1>
<p><a href="#" id="show_output" onclick="document.body.className += ' show_output'; return false">[show output]</a>
%(fonthack)s<p class="output">Actual output:</p>
<canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
%(expected)s
<ul id="d"></ul>
<script>
_addTest(function(canvas, ctx) {
%(code)s
});
</script>
%(images)s
standalone: |
<!DOCTYPE html>
<title>Canvas test: %(name)s</title>
<script src="../tests.js"></script>
<link rel="stylesheet" href="../tests.css">
<link rel="prev" href="%(prev)s.html" title="%(prev)s">
<link rel="next" href="%(next)s.html" title="%(next)s">
%(fonts)s<body class="show_output">
<p>
<a href="%(prev)s.html" accesskey="p" title="[p] %(prev)s"><</a>
<a href="index.html">[index]</a>
<a href="%(next)s.html" accesskey="n" title="[n] %(next)s">></a>
<h1>%(backrefs)s</h1>
<p class="desc">%(desc)s</p>
<div class="refs">References:
<ul>
%(refs)s
</ul>
</div>
%(notes)s
%(fonthack)s<p class="output">Actual output:</p>
<canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
%(expected)s
<ul id="d"></ul>
<script>
_addTest(function(canvas, ctx) {
%(code)s
});
</script>
%(images)s
minimal: |
<!DOCTYPE html>
<html class="minimal">
<title>Canvas test: %(name)s</title>
<script src="../tests.js"></script>
<link rel="stylesheet" href="../tests.css">
<link rel="prev" href="minimal.%(prev)s.html" title="%(prev)s">
<link rel="next" href="minimal.%(next)s.html" title="%(next)s">
%(fonts)s<body>
<p id="passtext">Pass</p>
<p id="failtext">Fail</p>
<!-- TODO: handle "script did not run" case -->
%(fonthack)s<p class="output">These images should be identical:</p>
<canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
%(expected)s
<ul id="d"></ul>
<script>
_addTest(function(canvas, ctx) {
%(code)s
});
</script>
%(images)s
w3c: |
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: %(name)s</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
%(fonts)s<body class="show_output">
<h1>%(name)s</h1>
<p class="desc">%(desc)s</p>
%(notes)s
%(fonthack)s<p class="output">Actual output:</p>
<canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
%(expected)s
<ul id="d"></ul>
<script>
var t = async_test("%(escaped_desc)s");
_addTest(function(canvas, ctx) {
%(code)s
});
</script>
%(scripts)s%(images)s
mochitest: |
<!DOCTYPE HTML>
<title>%(mochi_name_fn)s</title>
%(mochi_desc)s<script src="/MochiKit/MochiKit.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
%(fonts)s<body><!-- [[[ test_%(mochi_name)s.html ]]] -->
<p>Canvas test: %(mochi_name)s</p>
%(mochi_desc)s%(fonthack)s<canvas id="c" %(canvas)s>%(fallback)s</canvas>
<script>
function %(mochi_name_fn)s() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
%(mochi_code)s
}
</script>
%(mochi_images)s
mochitest.isPixel: |
function isPixel(ctx, x,y, r,g,b,a, pos, colour, d) {
var pixel = ctx.getImageData(x, y, 1, 1);
var pr = pixel.data[0],
pg = pixel.data[1],
pb = pixel.data[2],
pa = pixel.data[3];
ok(r-d <= pr && pr <= r+d &&
g-d <= pg && pg <= g+d &&
b-d <= pb && pb <= b+d &&
a-d <= pa && pa <= a+d,
"pixel "+pos+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d);
}
mochitest.todo_isPixel: |
function todo_isPixel(ctx, x,y, r,g,b,a, pos, colour, d) {
var pixel = ctx.getImageData(x, y, 1, 1);
var pr = pixel.data[0],
pg = pixel.data[1],
pb = pixel.data[2],
pa = pixel.data[3];
todo(r-d <= pr && pr <= r+d &&
g-d <= pg && pg <= g+d &&
b-d <= pb && pb <= b+d &&
a-d <= pa && pa <= a+d,
"pixel "+pos+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d);
}
mochitest.deferTest: |
function deferTest() {
_deferred = true;
}
mochitest.wrapFunction: |
function wrapFunction(f) {
return function () {
f.apply(null, arguments);
SimpleTest.finish();
}
}
mochitest.exception: |
var _thrown_outer = false;
try {
%s
} catch (e) {
_thrown_outer = true;
}
todo(!_thrown_outer, 'should not throw exception');
mochitest.Makefile: |
#
# ***** BEGIN LICENSE BLOCK *****
# Version: MPL 1.1/GPL 2.0/LGPL 2.1
#
# The contents of this file are subject to the Mozilla Public License Version
# 1.1 (the "License"); you may not use this file except in compliance with
# the License. You may obtain a copy of the License at
# http://www.mozilla.org/MPL/
#
# Software distributed under the License is distributed on an "AS IS" basis,
# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
# for the specific language governing rights and limitations under the
# License.
#
# The Original Code is mozilla.org code.
#
# The Initial Developer of the Original Code is
# Mozilla Corporation.
# Portions created by the Initial Developer are Copyright (C) 2007
# the Initial Developer. All Rights Reserved.
#
# Contributor(s):
# Philip Taylor <philip.taylor@cl.cam.ac.uk>
#
# Alternatively, the contents of this file may be used under the terms of
# either of the GNU General Public License Version 2 or later (the "GPL"),
# or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
# in which case the provisions of the GPL or the LGPL are applicable instead
# of those above. If you wish to allow use of your version of this file only
# under the terms of either the GPL or the LGPL, and not to allow others to
# use your version of this file under the terms of the MPL, indicate your
# decision by deleting the provisions above and replace them with the notice
# and other provisions required by the GPL or the LGPL. If you do not delete
# the provisions above, a recipient may use your version of this file under
# the terms of any one of the MPL, the GPL or the LGPL.
#
# ***** END LICENSE BLOCK *****
DEPTH = ../../..
topsrcdir = @top_srcdir@
srcdir = @srcdir@
VPATH = @srcdir@
relativesrcdir = content/canvas/test
include $(DEPTH)/config/autoconf.mk
include $(topsrcdir)/config/rules.mk
index.frame: |
<!DOCTYPE html>
<title>Canvas tests - %(category)s.*</title>
<link rel="stylesheet" href="../frame.css">
<p><a href="index.html">[index]</a>
<h1>%(backrefs)s.*</h1>
<p>
# FF trunk doesn't do onload in object, so use iframe instead
#index.frame.item: |-
# <object width="200" height="220" data="framed.%s.html">(object fallback)</object><!--
# -->
index.frame.item: |-
<iframe width="200" height="220" src="framed.%s.html">(iframe fallback)</iframe><!--
-->
index.w3c.frame: |
<!DOCTYPE html>
<title>Canvas tests - %(category)s.*</title>
<link rel="stylesheet" href="/common/canvas-frame.css">
<p><a href="index.html">[index]</a>
<h1>%(backrefs)s.*</h1>
<p>
index.w3c.frame.item: |-
<iframe width="320" height="240" src="%s.html">(iframe fallback)</iframe><!--
-->
index: |
<!DOCTYPE html>
<title>Canvas tests - index</title>
<link rel="stylesheet" href="../index.css">
<script>
function expand(obj) {
obj.parentNode.className = obj.parentNode.className ? "" : "expand";
return false;
}
</script>
<h1><code><canvas></code> tests</h1>
<p>Developed by <a href="mailto:excors@gmail.com">Philip Taylor</a>.
Last updated %(updated)s.
<p>Based on the <a
href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">HTML</a>
Draft Standard — 22 February 2010. See also the <a
href="spec.html">annotated specification</a>.
<p>See <a href="results.html">test results</a> for some browsers.
(Generated semi-automatically via the <a
href="../reportgenentry.html">report generator</a>.)
<p>You may want to <a href="../source.tar.bz2">download the source
code/data</a> (e.g. to create an offline copy of the tests).
<h2>Test cases</h2>
<p>For each test, a green background indicates success, red indicates
failure, blue indicates a need to manually confirm the output is as
expected.
<p>The versions in the report generator are the most visually minimalist.
The category links below show the actual and expected renderings, and any
error messages. The individual test pages have links to relevant parts of
the specification and extra notes.
<p>There may be many inaccuracies: tests that do not notice when part of
the output is incorrect; tests that are too intolerant of acceptable
renderings differences, or make other unreasonable assumptions; tests that
were written for an outdated version of the specification, and tests that
are just wrong. Also a number of features are not tested, most notably text
rendering. Please contact me (<a
href="mailto:excors@gmail.com">email</a>, <a
href="http://wiki.whatwg.org/wiki/IRC">IRC</a>, etc) if you find any
problems.
index.w3c: |
<!DOCTYPE html>
<title>Canvas tests - index</title>
<link rel="stylesheet" href="/common/canvas-index.css">
<h1><code><canvas></code> tests</h1>
index.category.item: |
<li><h3><a href="index.%s.html">%s.*</a></h3><p>%d test%s <a href="#" onclick="return expand(this)">expand</a></p>
index.w3c.category.item: |
<li><h3><a href="index.%s.html">%s.*</a></h3><p>%d test%s</p>
reportgen: |
<!DOCTYPE html>
<title>Canvas tests - report generator</title>
<link rel="stylesheet" href="../reportgen.css">
<script src="../reportgen.js"></script>
<p>This is mainly for my own use, so it is not designed to be user-friendly.
If anyone else wants to use it for some reason, just wait
until "tests not yet loaded" and "tests not yet completed" get down to zero, then click the
pass/fail button for any test it shows where it cannot work out the answer (or use the
<kbd>y</kbd>/<kbd>n</kbd> keys to choose for the magenta-highlighted case), then use the
buttons at the bottom to collect all the results.
<form id="f">
<p><label for="loading">Tests not yet loaded:</label> <input id="loading" value="0" readonly>
<p><label for="waiting">Tests not yet completed:</label> <input id="waiting" value="0" readonly>
<p><button type="button" onclick="showUnfinished()">Show uncompleted tests</button>
<button type="button" onclick="showAll()">Show all tests</button>
<button type="button" onclick="reloadAll()">Reload test cases serially</button>
<!--<button type="button" onclick="avoidFrameLimit()">HACK: work around frame limit</button>
<button type="button" onclick="makeObjects()">HACK: s/iframe/object/</button>-->
<hr>
<p><label for="passed">Detected passes:</label> <input id="passed" value="0" readonly>
<p><label for="failed">Detected fails:</label> <input id="failed" value="0" readonly>
<hr>
<table>
<tr>
<th>Test name
<th>Test case
<th>Pass?
<th>Fail?
<th>Notes
<script>
createTable( [
%(items)s
] );
</script>
</table>
</form>
<hr>
<form method="post" action="../submitresults.cgi">
<button type="button" onclick="document.getElementById('report').value = genreport()">Generate test report</button><br>
<textarea name="report" id="report" cols="100" rows="10"></textarea><br>
<input type="submit" value="Submit results"> (Submissions will tend to be ignored unless there
is a good reason why they won't be, so don't use this form unless there is such a reason.)
</form>
results: |
<!DOCTYPE html>
<title>Canvas tests - results</title>
<link rel="stylesheet" href="../results.css">
<table>
<col id="col1">
<tr>
<th>Test
|
