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
|
<!DOCTYPE html>
<html>
<head>
<style>
.hide {display:none}
.row {display:table-row}
.cell {display:table-cell; padding:10px}
#test-output {display:table}
label {display:row}
</style>
</head>
<body>
<script src="../../resources/js-test.js"></script>
<canvas class="hide" id="source-up-canvas"></canvas>
<canvas class="hide" id="source-down-canvas"></canvas>
<div id="test-output">
<label>Scale Up</label>
<div id="up" class="row">
<div class="cell">
<div id="low-up"></div>
<canvas id="low-up-canvas"></canvas>
</div>
<div class="cell">
<div id="medium-up"></div>
<canvas id="medium-up-canvas"></canvas>
</div>
<div class="cell">
<div id="high-up"></div>
<canvas id="high-up-canvas"></canvas>
</div>
</div>
<label>Scale Down</label>
<div id="down" class="row">
<div class="cell">
<div id="low-down"></div>
<canvas id="low-down-canvas"></canvas>
</div>
<div class="cell">
<div id="medium-down"></div>
<canvas id="medium-down-canvas"></canvas>
</div>
<div class="cell">
<div id="high-down"></div>
<canvas id="high-down-canvas"></canvas>
</div>
</div>
</div>
<script>
if (window.testRunner)
window.testRunner.dumpAsTextWithPixelResults();
drawCanvas("source", "up", drawPicture);
drawCanvas("source", "down", drawWord);
qualities = ["low", "medium", "high"];
scales = ["up", "down"];
for (var i = 0; i < scales.length; i++) {
for (var j = 0; j < qualities.length; j++) {
drawCanvas(qualities[j], scales[i], copyPicture);
}
}
function drawCanvas(quality, scale, drawFunc) {
var id = quality + "-" + scale;
var canvas = document.getElementById(id + "-canvas");
var context = canvas.getContext("2d");
var testCaseTitle = document.getElementById(id);
if (testCaseTitle) {
testCaseTitle.innerHTML = quality;
}
drawFunc(canvas, context, quality, scale);
}
function copyPicture(canvas, context, quality, scale) {
var source = document.getElementById("source-" + scale + "-canvas");
canvas.width = 100;
canvas.height = 100;
context.imageSmoothingQuality = quality;
context.drawImage(source, 0, 0, canvas.width, canvas.height);
}
function drawWord(canvas, context) {
canvas.width = 1800;
canvas.height = 1800;
context.font = '250pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hello World!', canvas.width/2, canvas.height/2);
}
function drawPicture(canvas, context) {
canvas.width = 5;
canvas.height = 5;
var image = context.createImageData(canvas.width, canvas.height);
function drawBlackDot(x, y, col) {
var offset = y * 4 * canvas.width + x * 4;
image.data[offset + 0] = col[0]; // R
image.data[offset + 1] = col[1] ; // G
image.data[offset + 2] = col[2] ; // B
image.data[offset + 3] = 225; // Alpha
}
var imageData = [
['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',],
['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',],
['b', 'w', 'b', 'w', 'b',],
]
var nameToColor = {
'w' : [255,255,255],
'b' : [0,0,0],
}
for (var x = 0 ; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
drawBlackDot(x, y, nameToColor[imageData[x][y]]);
}
}
context.putImageData(image, 0, 0);
}
</script>
</body>
</html>
|
