canvas-imageSmoothingQuality.html | Explore in Territory

<html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<canvas id="source"></canvas>
<canvas id="default"></canvas>
<script>

var source = document.createElement('canvas');
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 sampleAlpha(data){
    return JSON.parse(data)[3]
}

test(function(t) {
    // On getting, must return the last value it was set to.");
    var lowData = scaleTestResults("low");
    var lowContext = document.getElementById("lowCanvas").getContext('2d');
    assert_equals(lowContext.imageSmoothingQuality, 'low');
    
    var mediumData = scaleTestResults("medium");
    var mediumContext = document.getElementById("mediumCanvas").getContext('2d');
    assert_equals(mediumContext.imageSmoothingQuality, 'medium');
    
    var highData = scaleTestResults("high");
    var highContext = document.getElementById("highCanvas").getContext('2d');
    var highCanvas = document.getElementById("highCanvas");
    assert_equals(highContext.imageSmoothingQuality, 'high');
    
    lowContext.imageSmoothingEnabled = false;
    var noFilterData = scaleImageData(lowCanvas, lowCanvas.imageSmoothingQuality);
   
    // No filtering uses kNone quality, while with imageSmoothingEnabled we use the
    // same quality.
    assert_false(noFilterData === mediumData);
    
    // On setting, it must be set to the new value.
    highContext.imageSmoothingQuality = 'medium';
    assert_equals(highContext.imageSmoothingQuality, 'medium');
    highContext.imageSmoothingQuality = 'high';
    assert_equals(highContext.imageSmoothingQuality, 'high');
    
    // When the CanvasRenderingContext2D object is created, the attribute must be set to 'low'.
    assert_equals(document.getElementById("default").getContext("2d").imageSmoothingQuality, 'low');
    
    // ImageSmoothingQuality can be set without real effect when imageSmoothingEnabled is false.
    highContext.imageSmoothingEnabled = false;
    assert_equals(highContext.imageSmoothingQuality, 'high');
    assert_equals(scaleImageData(highCanvas, highCanvas.imageSmoothingQuality),
                 noFilterData);
    highContext.imageSmoothingQuality = 'medium';
    assert_equals(highContext.imageSmoothingQuality, 'medium');
    assert_equals(scaleImageData(highCanvas, highCanvas.imageSmoothingQuality),
                 noFilterData);
    
    // Invalid Input is not accepted.
    highContext.imageSmoothingEnabled = true;
    highContext.imageSmoothingQuality = 'high';
    scaleImageData(highCanvas, '3223');
    assert_equals(highContext.imageSmoothingQuality, 'high');
    scaleImageData(highCanvas, 'bad_input');
    assert_equals(highContext.imageSmoothingQuality, 'high');
    scaleImageData(highCanvas, 'LOW');
    assert_equals(highContext.imageSmoothingQuality, 'high');
    scaleImageData(highCanvas, 'Medium');
    assert_equals(highContext.imageSmoothingQuality, 'high');
    
    
    // The save() and restore() should work.
    highContext.save();
    highContext.imageSmoothingQuality = 'medium';
    assert_equals(highContext.imageSmoothingQuality, 'medium');
    assert_equals(scaleImageData(highCanvas, highCanvas.imageSmoothingQuality), mediumData);
    highContext.restore();
    assert_equals(highContext.imageSmoothingQuality, 'high');
    assert_equals(scaleImageData(highCanvas, highCanvas.imageSmoothingQuality), highData);
    
    }, 'Tests for the imageSmoothingQuality attribute.');
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-imageSmoothingQuality.html
