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
|
- name: 2d.canvas.reference
desc: canvas refers back to its canvas
code: |
@assert ctx.canvas === canvas;
t.done();
- name: 2d.canvas.readonly
desc: canvas is readonly
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
var d = ctx.canvas;
@assert offscreenCanvas2 !== d;
ctx.canvas = offscreenCanvas2;
@assert ctx.canvas === d;
t.done();
- name: 2d.getcontext.exists
desc: The 2D context is implemented
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert offscreenCanvas2.getContext('2d') !== null;
t.done();
- name: 2d.getcontext.extraargs.create
desc: The 2D context doesn't throw with extra getContext arguments (new context)
code: |
@assert (new OffscreenCanvas(100, 50)).getContext('2d', false, {}, [], 1, "2") !== null;
@assert (new OffscreenCanvas(100, 50)).getContext('2d', 123) !== null;
@assert (new OffscreenCanvas(100, 50)).getContext('2d', "test") !== null;
@assert (new OffscreenCanvas(100, 50)).getContext('2d', undefined) !== null;
@assert (new OffscreenCanvas(100, 50)).getContext('2d', null) !== null;
@assert (new OffscreenCanvas(100, 50)).getContext('2d', Symbol.hasInstance) !== null;
t.done();
- name: 2d.getcontext.extraargs.cache
desc: The 2D context doesn't throw with extra getContext arguments (cached)
code: |
@assert canvas.getContext('2d', false, {}, [], 1, "2") !== null;
@assert canvas.getContext('2d', 123) !== null;
@assert canvas.getContext('2d', "test") !== null;
@assert canvas.getContext('2d', undefined) !== null;
@assert canvas.getContext('2d', null) !== null;
@assert canvas.getContext('2d', Symbol.hasInstance) !== null;
t.done();
- name: 2d.getcontext.unique
desc: getContext('2d') returns the same object
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert offscreenCanvas2.getContext('2d') === offscreenCanvas2.getContext('2d');
t.done();
- name: 2d.getcontext.shared
desc: getContext('2d') returns objects which share canvas state
code: |
var ctx2 = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx2.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
@assert pixel 50,25 == 0,255,0,255;
t.done();
- name: context.emptystring
desc: getContext with empty string returns null
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext("");
t.done();
- name: context.unrecognised.badname
desc: getContext with unrecognised context name returns null
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext('This is not an implemented context in any real browser');
t.done();
- name: context.unrecognised.badsuffix
desc: Context name "2d" plus a suffix is unrecognised
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext("2d#");
t.done();
- name: context.unrecognised.nullsuffix
desc: Context name "2d" plus a "\0" suffix is unrecognised
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext("2d\0");
t.done();
- name: context.unrecognised.unicode
desc: Context name which kind of looks like "2d" is unrecognised
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext("2\uFF44");
t.done();
- name: context.casesensitive
desc: Context name "2D" is unrecognised; matching is case sensitive
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext('2D');
t.done();
- name: context.arguments.missing
code: |
var offscreenCanvas2 = new OffscreenCanvas(100, 50);
@assert throws TypeError offscreenCanvas2.getContext(); @moz-todo
t.done();
- name: initial.color
desc: Initial state is transparent black
code: |
@assert pixel 20,20 == 0,0,0,0;
t.done();
- name: initial.reset.different
desc: Changing size resets canvas to transparent black
code: |
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
@assert pixel 20,20 == 255,0,0,255;
canvas.width = 50;
@assert pixel 20,20 == 0,0,0,0;
t.done();
- name: initial.reset.same
desc: Setting size (not changing the value) resets canvas to transparent black
code: |
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
@assert pixel 20,20 == 255,0,0,255;
canvas.width = 100;
@assert pixel 20,20 == 0,0,0,0;
t.done();
- name: initial.reset.path
desc: Resetting the canvas state resets the current path
code: |
canvas.width = 100;
ctx.rect(0, 0, 100, 50);
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fill();
@assert pixel 20,20 == 0,0,0,0;
t.done();
- name: initial.reset.clip
desc: Resetting the canvas state resets the current clip region
code: |
canvas.width = 100;
ctx.rect(0, 0, 1, 1);
ctx.clip();
canvas.width = 100;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
@assert pixel 20,20 == 0,255,0,255;
t.done();
- name: initial.reset.transform
desc: Resetting the canvas state resets the current transformation matrix
code: |
canvas.width = 100;
ctx.scale(0.1, 0.1);
canvas.width = 100;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
@assert pixel 20,20 == 0,255,0,255;
t.done();
- name: initial.reset.gradient
desc: Resetting the canvas state does not invalidate any existing gradients
code: |
canvas.width = 50;
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#0f0');
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
@assert pixel 50,25 == 0,255,0,255;
t.done();
- name: initial.reset.pattern
desc: Resetting the canvas state does not invalidate any existing patterns
code: |
canvas.width = 30;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 30, 50);
var p = ctx.createPattern(canvas, 'repeat-x');
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = p;
ctx.fillRect(0, 0, 100, 50);
@assert pixel 50,25 == 0,255,0,255;
t.done();
- name: size.attributes.idl.set.zero
desc: Setting width/height IDL attributes to 0
code: |
canvas.width = 0;
canvas.height = 0;
@assert canvas.width === 0;
@assert canvas.height === 0;
t.done();
- name: size.attributes.idl
desc: Getting/setting width/height IDL attributes
webidl:
- es-unsigned-long
code: |
canvas.width = "100";
canvas.height = "100";
@assert canvas.width === 100;
@assert canvas.height === 100;
canvas.width = "+1.5e2";
canvas.height = "0x96";
@assert canvas.width === 150;
@assert canvas.height === 150;
canvas.width = 301.999;
canvas.height = 301.001;
@assert canvas.width === 301;
@assert canvas.height === 301;
@assert throws TypeError canvas.width = "400x";
@assert throws TypeError canvas.height = "foo";
@assert canvas.width === 301;
@assert canvas.height === 301;
t.done();
- name: size.attributes.default
desc: Default width/height when attributes are missing
code: |
@assert canvas.width === 100;
@assert canvas.height === 50;
t.done();
- name: size.attributes.reflect.setidl
desc: Setting IDL attributes updates IDL and content attributes
code: |
canvas.width = 120;
canvas.height = 60;
@assert canvas.width === 120;
@assert canvas.height === 60;
t.done();
- name: size.attributes.reflect.setidlzero
desc: Setting IDL attributes to 0 updates IDL and content attributes
code: |
canvas.width = 0;
canvas.height = 0;
@assert canvas.width === 0;
@assert canvas.height === 0;
t.done();
- name: size.large
notes: Not sure how reasonable this is, but the spec doesn't say there's an upper
limit on the size.
code: |
var n = 2147483647; // 2^31 - 1, which should be supported by any sensible definition of "long"
canvas.width = n;
canvas.height = n;
@assert canvas.width === n;
@assert canvas.height === n;
t.done();
- name: 2d.text.setFont.mathFont
desc: crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font
code: |
ctx.font = "math serif";
t.done();
|
