| <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> |
