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
|
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<script>
description("Ensure correct behavior of drawImage with ImageBitmaps constructed from ImageBitmaps that are constructed from images (not pinned to memory) and canvases (pinned to memory).");
window.jsTestIsAsync = true;
function shouldBeFilled(x, y, w, h) {
shouldBeGreen(x+2, y+2);
shouldBeGreen(x+w-3, y+h-3);
shouldBeGreen(x+w/2, y+h/2);
shouldBeClear(x-2, y-2);
shouldBeClear(x+w+2, y+h+2);
}
function shouldBeGreen(x, y) {
d = ctx.getImageData(x, y, 1, 1).data;
shouldBe("d[0]", "0");
shouldBe("d[1]", "255");
shouldBe("d[2]", "0");
shouldBe("d[3]", "255");
}
function shouldBeClear(x, y) {
// should be transparent black pixels
d = ctx.getImageData(x, y, 1, 1).data;
shouldBe("d[0]", "0");
shouldBe("d[1]", "0");
shouldBe("d[2]", "0");
shouldBe("d[3]", "0");
}
function shouldNotBeCalled() {
testFailed("Promise was rejected.");
finishJSTest();
}
function clearContext(context) {
context.clearRect(0, 0, 50, 50);
}
var image;
var imageWidth = 20;
var imageHeight = 20;
var aCanvas = document.createElement("canvas");
aCanvas.width = imageWidth;
aCanvas.height = imageHeight;
var aCtx = aCanvas.getContext("2d");
aCtx.fillStyle = 'rgb(0, 255, 0)';
aCtx.fillRect(0, 0, 20, 20);
var canvas = document.createElement("canvas");
canvas.setAttribute("width", "50");
canvas.setAttribute("height", "50");
var ctx = canvas.getContext("2d");
image = new Image();
image.onload = imageLoaded;
image.src = aCanvas.toDataURL();
function imageLoaded() {
var bitmapFromImage, bitmapFromCanvas;
var p1 = createImageBitmap(image, -10, -10, 20, 20).then(function(imageBitmap) { bitmapFromImage = imageBitmap });
var p2 = createImageBitmap(aCanvas, 10, 10, 20, 20).then(function(imageBitmap) { bitmapFromCanvas = imageBitmap });
Promise.all([p1, p2]).then(function() {
checkBitmaps(bitmapFromImage, bitmapFromCanvas);
}, shouldNotBeCalled);
}
function checkBitmaps(bitmapFromImage, bitmapFromCanvas) {
var funcs = [];
var p1 = createImageBitmap(bitmapFromImage).then(function(imageBitmap) {
funcs[0] = checkDrawnToRect(imageBitmap, 10, 10, 10, 10);
});
var p2 = createImageBitmap(bitmapFromImage, -10, -10, 30, 30).then(function(imageBitmap) {
funcs[1] = checkDrawnToRect(imageBitmap, 20, 20, 10, 10);
});
var p3 = createImageBitmap(bitmapFromImage, 10, 10, 20, 20).then(function(imageBitmap) {
funcs[2] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
});
var p4 = createImageBitmap(bitmapFromCanvas).then(function(imageBitmap) {
funcs[3] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
});
var p5 = createImageBitmap(bitmapFromCanvas, -15, -10, 35, 40).then(function(imageBitmap) {
funcs[4] = checkDrawnToRect(imageBitmap, 15, 10, 10, 10);
});
var p6 = createImageBitmap(bitmapFromCanvas, 5, 5, 10, 10).then(function(imageBitmap) {
funcs[5] = checkDrawnToRect(imageBitmap, 0, 0, 5, 5);
});
Promise.all([p1, p2, p3, p4, p5, p6]).then(function() {
for (var i = 0; i < funcs.length; ++i)
funcs[i]();
finishJSTest();
}, shouldNotBeCalled);
}
function checkDrawnToRect(bitmap, x, y, w, h) {
// x, y, w, h are the expected location of the green square
var imageBitmap = bitmap;
var x1 = x;
var y1 = y;
var w1 = w;
var h1 = h;
return function() {
clearContext(ctx);
ctx.drawImage(imageBitmap, 0, 0);
shouldBeFilled(x1, y1, w1, h1);
clearContext(ctx);
ctx.drawImage(imageBitmap, 10, 10, 40, 40);
// scale up w and h as necessary
var w2 = w1 * 40.0 / imageBitmap.width;
var h2 = h1 * 40.0 / imageBitmap.height;
// x and y are transformed
var x2 = x1 * w2 / w1 + 10;
var y2 = y1 * h2 / h1 + 10;
shouldBeFilled(x2, y2, w2, h2);
clearContext(ctx);
ctx.drawImage(imageBitmap, 0, 0, 50, 50);
// scale up w and h as necessary
var w3 = w1 * 50.0 / imageBitmap.width;
var h3 = h1 * 50.0 / imageBitmap.height;
// x and y are transformed
var x3 = x1 * w3 / w1;
var y3 = y1 * h3 / h1;
shouldBeFilled(x3, y3, w3, h3);
clearContext(ctx);
ctx.imageSmoothingEnabled=false;
ctx.drawImage(imageBitmap, x1, y1, w1, h1, 0, 0, 50, 50);
shouldBeFilled(0, 0, 50, 50);
}
}
</script>
</body>
</html>
|
