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
|
<!DOCTYPE HTML>
<title>Test ImageBitmap Cropping (Bug 1190210)</title>
<meta charset="utf-8">
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<body>
<script type="text/javascript">
SimpleTest.waitForExplicitFinish();
/**
* [isPixel description]
* @param {[type]} ctx : canvas context
* @param {[type]} x : pixel x coordinate
* @param {[type]} y : pixel y coordinate
* @param {[type]} c : a rgba color code
* @param {[type]} d : error duration
* @return {Promise}
*/
function isPixel(ctx, x, y, c, d) {
var pos = x + "," + y;
var color = c[0] + "," + c[1] + "," + c[2] + "," + c[3];
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(c[0]-d <= pr && pr <= c[0]+d &&
c[1]-d <= pg && pg <= c[1]+d &&
c[2]-d <= pb && pb <= c[2]+d &&
c[3]-d <= pa && pa <= c[3]+d,
"pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+color+" +/- "+d);
}
//
// The pattern of the 320x240.ogv video.
// .------------------------------------------------.
// | 255 | 255 | 0 | 0 | 255 | 255 | 0 |
// | 255 | 255 | 255 | 255 | 0 | 0 | 0 |
// | 255 | 0 | 255 | 0 | 255 | 0 | 255 |
// | | | | | | | |
// ^ ^ ^ ^ ^ ^ ^ ^
// 0 46 92 138 184 230 276 319
//
//
// TEST_BITMAPS is a collection of test cases.
// Each object in the TEST_BITMAPS array is a test case with the following
// properties:
// 1) croppingArea: indicating the cropping area in format (x, y, width, height).
// 2) testedPixels: an array of pixels that is going to be checked.
// Each item in the testedPixels array contains:
// 2.1) "pixel": the coordinate of this pixel (x, y).
// 2.2) "expectedColor": the expected color of this pixel (r, g, b, a).
// 2.3) "tolerance": the acceptable tolerance of pixel values.
//
var TEST_BITMAPS = [
// Cropping area is exactly the same as source surface.
{'croppingArea': [0, 0, 320, 240],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
{"pixel": [50, 0], "expectedColor": [255, 255, 0, 255], "tolerance": 5}]},
// Cropping area completely covers the source surface.
{'croppingArea': [-100, -100, 520, 440],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [519, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [0, 439], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [519, 439], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [100, 100], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
{"pixel": [150, 120], "expectedColor": [255, 255, 0, 255], "tolerance": 5},
{"pixel": [200, 140], "expectedColor": [0, 255, 255, 255], "tolerance": 5}]},
// Cropping area partially covers the left-upper part of the source surface.
{'croppingArea': [-100, -100, 320, 240],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5},
{"pixel": [100, 100], "expectedColor": [255, 255, 255, 255], "tolerance": 5},
{"pixel": [150, 100], "expectedColor": [255, 255, 0, 255], "tolerance": 5}]},
// Cropping area partially covers the middle-upper part of the source surface.
{'croppingArea': [ 100, -100, 220, 240],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5},
{"pixel": [0, 100], "expectedColor": [0, 255, 255, 255], "tolerance": 5},
{"pixel": [150, 100], "expectedColor": [255, 0, 0, 255], "tolerance": 5}]},
// Cropping area partially covers the right-upper part of the source surface.
{'croppingArea': [ 200, -100, 320, 240],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5},
{"pixel": [0, 100], "expectedColor": [255, 0, 255, 255], "tolerance": 5},
{"pixel": [100, 100], "expectedColor": [0, 0, 255, 255], "tolerance": 5}]},
// Cropping area partially covers the left-center part of the source surface.
{'croppingArea': [-100, 100, 320, 120],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5},
{"pixel": [200, 0], "expectedColor": [0, 255, 255, 255], "tolerance": 5},
{"pixel": [250, 10], "expectedColor": [0, 255, 0, 255], "tolerance": 5}]},
// Cropping area partially covers the left-bottom part of the source surface.
{'croppingArea': [-100, 200, 320, 240],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5},
{"pixel": [100, 0], "expectedColor": [0, 60, 136, 255], "tolerance": 5},
{"pixel": [180, 10], "expectedColor": [255, 255, 255, 255], "tolerance": 5}]},
// Cropping area partially covers the middle-bottom part of the source surface.
{'croppingArea': [ 40, 200, 200, 100],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 60, 136, 255], "tolerance": 5},
{"pixel": [100, 20], "expectedColor": [107, 0, 210, 255], "tolerance": 5},
{"pixel": [80, 150], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5}]},
// Cropping area partially covers the right-bottom part of the source surface.
{'croppingArea': [ 160, 100, 300, 300],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 255, 0, 255], "tolerance": 5},
{"pixel": [120, 20], "expectedColor": [0, 0, 255, 255], "tolerance": 5},
{"pixel": [299, 299], "expectedColor": [0, 0, 0, 0 ], "tolerance": 5}]},
// Cropping area is completely outside the source surface. (upper-left)
{'croppingArea': [-500, -500, 20, 20],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [19, 19], "expectedColor": [0, 0, 0, 0], "tolerance": 5}]},
// Cropping area is completely outside the source surface. (upper-right)
{'croppingArea': [ 500, -500, 20, 20],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [19, 19], "expectedColor": [0, 0, 0, 0], "tolerance": 5}]},
// Cropping area is completely outside the source surface. (bottom-left)
{'croppingArea': [-200, 500, 20, 20],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [19, 19], "expectedColor": [0, 0, 0, 0], "tolerance": 5}]},
// Cropping area is completely outside the source surface. (bottom-right)
{'croppingArea': [ 500, 200, 20, 20],
'testedPixels': [{"pixel": [0, 0], "expectedColor": [0, 0, 0, 0], "tolerance": 5},
{"pixel": [19, 19], "expectedColor": [0, 0, 0, 0], "tolerance": 5}]},
];
function failed(ex) {
ok(false, "Promise failure: " + ex);
}
var gImage;
var gVideo;
var gCanvas;
var gCtx;
var gImageData;
var gImageBitmap;
var gPNGBlob;
var gJPEGBlob;
function prepareSources() {
gVideo = document.createElement("video");
gVideo.src = "http://example.com/tests/dom/canvas/test/crossorigin/video.sjs?name=tests/dom/canvas/test/320x240.ogv&type=video/ogg&cors=anonymous";
gVideo.crossOrigin = "anonymous";
gVideo.autoplay = "true"
gCanvas = document.createElement("canvas");
gCtx = gCanvas.getContext("2d");
var resolver;
var promise = new Promise(function(resolve, reject) {
resolver = resolve;
});
// Prepare video.
gVideo.onloadeddata = function() {
ok(gVideo, "[Prepare Sources] gVideo is ok.");
// Prepare canvas.
gCanvas.width = gVideo.videoWidth;
gCanvas.height = gVideo.videoHeight;
gCtx.drawImage(gVideo, 0, 0);
ok(gCanvas, "[Prepare Sources] gCanvas is ok.");
ok(gCtx, "[Prepare Sources] gCtx is ok.");
// Prepare image.
gImage = document.createElement("img");
gImage.src = gCanvas.toDataURL();
var resolverImage;
var promiseImage = new Promise(function(resolve, reject) {
resolverImage = resolve;
});
gImage.onload = function() {
resolverImage(true);
}
// Prepare ImageData.
gImageData = gCtx.getImageData(0, 0, gCanvas.width, gCanvas.height);
ok(gImageData, "[Prepare Sources] gImageData is ok.");
// Prepapre PNG Blob.
var promisePNGBlob = new Promise(function(resolve, reject) {
gCanvas.toBlob(function(blob) {
gPNGBlob = blob;
ok(gPNGBlob, "[Prepare Sources] gPNGBlob is ok.");
resolve(true);
});
});
// Prepare JPEG Blob.
var promiseJPEGBlob = new Promise(function(resolve, reject) {
gCanvas.toBlob(function(blob) {
gJPEGBlob = blob;
ok(gJPEGBlob, "[Prepare Sources] gJPEGBlob is ok.");
resolve(true);
}, "image/jpeg", 0.95);
});
// Prepare ImageBitmap.
var promiseImageBitmap = new Promise(function(resolve, reject) {
var p = createImageBitmap(gVideo);
p.then(function(bitmap) {
gImageBitmap = bitmap;
ok(gImageBitmap, "[Prepare Sources] gImageBitmap is ok.");
resolve(true);
});
});
resolver(Promise.all([
promiseImage,
promisePNGBlob,
promiseJPEGBlob,
promiseImageBitmap
]))
}
return promise;
}
function testCropping_randomTest(source) {
var canvasSrouce = document.createElement("canvas");
var ctxSource = canvasSrouce.getContext("2d");
var p = createImageBitmap(source);
p.then(function(bitmap) {
canvasSrouce.width = bitmap.width;
canvasSrouce.height = bitmap.height;
});
}
function testCropping(source) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
function createBitmap(def) {
return createImageBitmap(source, def.croppingArea[0], def.croppingArea[1], def.croppingArea[2], def.croppingArea[3])
.then(function (bitmap) { def.bitmap = bitmap; }, failed);
};
var promise = new Promise(function(resolve, reject) {
resolve(Promise.all(TEST_BITMAPS.map(createBitmap)))
});
function testPixel(testedPixel) {
isPixel(ctx, testedPixel.pixel[0], testedPixel.pixel[1], testedPixel.expectedColor, testedPixel.tolerance);
};
return promise.then(function() {
TEST_BITMAPS.forEach(function (testCase) {
if (!testCase.bitmap) { return; }
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = testCase.bitmap.width;
canvas.height = testCase.bitmap.height;
ctx.drawImage(testCase.bitmap, 0, 0);
testCase.testedPixels.forEach(testPixel);
});
});
}
function runTests() {
prepareSources().
then( function() { return Promise.all([testCropping(gImage),
testCropping(gVideo),
testCropping(gCanvas),
testCropping(gCtx),
testCropping(gImageData),
testCropping(gImageBitmap),
testCropping(gPNGBlob),
testCropping(gJPEGBlob)]); }).
then(SimpleTest.finish, function(ev) { failed(ev); SimpleTest.finish(); });
}
addLoadEvent(runTests);
</script>
</body>
|
