115 lines
3.5 KiB
HTML
115 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
|
|
<script src="../../resources/js-test.js"></script>
|
|
<canvas id="source"></canvas>
|
|
|
|
<script>
|
|
|
|
description("Tests for the imageSmoothingQuality attribute.");
|
|
|
|
if (window.internals)
|
|
internals.settings.setCanvasUsesAcceleratedDrawing(false);
|
|
|
|
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] = 255; // Alpha
|
|
}
|
|
|
|
for (var x = 0; x < source.width; x++) {
|
|
drawBlackDot(x, 1)
|
|
drawBlackDot(x, 2);
|
|
}
|
|
|
|
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 data[3];
|
|
}
|
|
|
|
debug("");
|
|
|
|
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');
|
|
shouldBe("highContext.imageSmoothingQuality", "'high'");
|
|
|
|
debug("");
|
|
shouldNotBe("lowData", "mediumData");
|
|
shouldNotBe("mediumData", "highData");
|
|
shouldNotBe("lowData", "highData");
|
|
|
|
debug("");
|
|
shouldBeGreaterThanOrEqual("sampleAlpha(lowData)", "sampleAlpha(mediumData)");
|
|
shouldBeGreaterThanOrEqual("sampleAlpha(mediumData)", "sampleAlpha(highData)");
|
|
|
|
debug("");
|
|
var defaultContext = sourceContext;
|
|
shouldBe("defaultContext.imageSmoothingQuality", "'low'");
|
|
|
|
debug("");
|
|
shouldBe("highContext.imageSmoothingEnabled = false; highContext.imageSmoothingQuality", "'high'");
|
|
shouldBe("highContext.imageSmoothingQuality = 'medium'; highContext.imageSmoothingQuality", "'medium'");
|
|
|
|
debug("");
|
|
evalAndLog("highContext.imageSmoothingEnabled = true; highContext.imageSmoothingQuality = 'high';");
|
|
var highCanvas = document.getElementById("highCanvas");
|
|
testInvalidInput("scaleImageData(highCanvas, '3223')");
|
|
testInvalidInput("scaleImageData(highCanvas, 'bad_input')");
|
|
testInvalidInput("scaleImageData(highCanvas, 'LOW')");
|
|
testInvalidInput("scaleImageData(highCanvas, 'Medium')");
|
|
|
|
debug("");
|
|
evalAndLog("highContext.save(); highContext.imageSmoothingQuality = 'medium';");
|
|
shouldBe("highContext.restore(); highContext.imageSmoothingQuality", "'high'");
|
|
shouldBe("scaleImageData(highCanvas, highCanvas.imageSmoothingQuality);", "highData");
|
|
|
|
debug("");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|