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
|
<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<canvas id="source"></canvas>
<canvas id="default"></canvas>
<script>
description("Tests for the imageSmoothingQuality attribute.");
var source = document.getElementById("source");
source.width = 60;
source.height = 12;
var sourceContext = source.getContext("2d");
var sourceImage = sourceContext.createImageData(source.width, source.height);
function drawBlackDot(x, y) {
var offset = y * 4 * source.width + x * 4;
sourceImage.data[offset + 0] = 0 ; // R
sourceImage.data[offset + 1] = 0 ; // G
sourceImage.data[offset + 2] = 0 ; // B
sourceImage.data[offset + 3] = 202 - y ; // Alpha
}
for (var x = 0; x < source.width; x++) {
for (var y = 1; y < 3; y++) {
drawBlackDot(x, y);
}
}
sourceContext.putImageData(sourceImage, 0, 0);
function scaleTestResults(quality){
var canvas = document.createElement("canvas");
canvas.id = quality + "Canvas";
document.body.appendChild(canvas);
canvas.width = sourceImage.width / 4;
canvas.height = sourceImage.height / 4;
return scaleImageData(canvas, quality);
}
function scaleImageData(destinationCanvas, quality) {
var context = destinationCanvas.getContext("2d");
if (quality)
context.imageSmoothingQuality = quality;
context.drawImage(source, 0, 0, destinationCanvas.width,
destinationCanvas.height);
var data = context.getImageData(0, 0, 1, 1).data;
context.clearRect(0, 0, destinationCanvas.width, destinationCanvas.height);
return JSON.stringify(data);
}
function testInvalidInput(badInput){
shouldNotThrow(badInput);
shouldBe("highContext.imageSmoothingQuality", "'high'");
}
function sampleAlpha(data){
return JSON.parse(data)[3]
}
debug("On getting, must return the last value it was set to.");
var lowData = scaleTestResults("low");
var lowContext = document.getElementById("lowCanvas").getContext('2d');
shouldBe("lowContext.imageSmoothingQuality", "'low'");
var mediumData = scaleTestResults("medium");
var mediumContext = document.getElementById("mediumCanvas").getContext('2d');
shouldBe("mediumContext.imageSmoothingQuality", "'medium'");
var highData = scaleTestResults("high");
var highContext = document.getElementById("highCanvas").getContext('2d');
var highCanvas = document.getElementById("highCanvas");
shouldBe("highContext.imageSmoothingQuality", "'high'");
lowContext.imageSmoothingEnabled = false;
var noFilterData = scaleImageData(lowCanvas, lowCanvas.imageSmoothingQuality);
debug("");
shouldNotBe("lowData", "mediumData");
// Skia uses mipmaps when downscaling, for both high and medium quality
shouldBe("mediumData", "highData");
shouldNotBe("lowData", "highData");
debug("");
shouldBeGreaterThan("sampleAlpha(noFilterData)", "sampleAlpha(lowData)");
shouldBeGreaterThan("sampleAlpha(lowData)", "sampleAlpha(mediumData)");
// Skia uses mipmaps when downscaling, for both high and medium quality
shouldBe("sampleAlpha(mediumData)", "sampleAlpha(highData)");
debug("\n\nOn setting, it must be set to the new value.");
evalAndLog("highContext.imageSmoothingQuality = 'medium';");
shouldBe("highContext.imageSmoothingQuality", "'medium'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality);",
"mediumData");
evalAndLog("highContext.imageSmoothingQuality = 'high';");
shouldBe("highContext.imageSmoothingQuality", "'high'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality);",
"highData");
debug("\n\nWhen the CanvasRenderingContext2D object is created, " +
"the attribute must be set to 'low'.");
shouldBe('document.getElementById("default").getContext("2d").' +
'imageSmoothingQuality', "'low'");
debug("\n\nImageSmoothingQuality can be set without real effect when " +
"imageSmoothingEnabled is false.");
evalAndLog("highContext.imageSmoothingEnabled = false;");
shouldBe("highContext.imageSmoothingQuality", "'high'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality)",
"noFilterData");
evalAndLog("highContext.imageSmoothingQuality = 'medium'");
shouldBe("highContext.imageSmoothingQuality", "'medium'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality)",
"noFilterData");
debug("\n\nInvalid Input is not accpeted.");
evalAndLog("highContext.imageSmoothingEnabled = true; " +
"highContext.imageSmoothingQuality = 'high';");
testInvalidInput("scaleImageData(highCanvas, '3223')");
testInvalidInput("scaleImageData(highCanvas, 'bad_input')");
testInvalidInput("scaleImageData(highCanvas, 'LOW')");
testInvalidInput("scaleImageData(highCanvas, 'Medium')");
debug("\n\nThe save() and restore() should work.");
evalAndLog("highContext.save(); highContext.imageSmoothingQuality = 'medium';");
shouldBe("highContext.imageSmoothingQuality", "'medium'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality);",
"mediumData");
shouldBe("highContext.restore(); highContext.imageSmoothingQuality", "'high'");
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality);",
"highData");
debug("");
</script>
</body>
</html>
|
