imagesmoothing.html (4359B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CanvasRenderingContext2D imageSmoothingEnabled test</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing"> 7 <script> 8 function createTestImage() { 9 var image = document.createElement('canvas'); 10 var imgctx = image.getContext('2d'); 11 imgctx.fillStyle = "#F00"; 12 imgctx.fillRect(0, 0, 2, 2); 13 imgctx.fillStyle = "#0F0"; 14 imgctx.fillRect(0, 0, 1, 1); 15 return image; 16 } 17 18 test(function() { 19 var ctx = document.createElement('canvas').getContext('2d'); 20 assert_true(ctx.imageSmoothingEnabled); 21 }, "When the canvas context is created, imageSmoothingEnabled must be set to true."); 22 23 test(function() { 24 var ctx = document.createElement('canvas').getContext('2d'); 25 ctx.imageSmoothingEnabled = false; 26 assert_false(ctx.imageSmoothingEnabled); 27 }, "On getting imageSmoothingEnabled, the user agent must return the last value it was set to."); 28 29 test(function() { 30 var ctx = document.createElement('canvas').getContext('2d'); 31 var image = createTestImage(); 32 ctx.scale(10, 10); 33 ctx.drawImage(image, 0, 0); 34 var pixels = ctx.getImageData(9, 9, 1, 1).data; 35 assert_not_equals(pixels[0], 0); 36 assert_not_equals(pixels[1], 255); 37 }, "Test that image smoothing is actually on by default and just the attribute value."); 38 39 test(function() { 40 var ctx = document.createElement('canvas').getContext('2d'); 41 ctx.imageSmoothingEnabled = true; 42 var image = createTestImage(); 43 ctx.scale(10, 10); 44 ctx.drawImage(image, 0, 0); 45 var pixels = ctx.getImageData(9, 9, 1, 1).data; 46 assert_not_equals(pixels[0], 0); 47 assert_not_equals(pixels[1], 255); 48 }, "Test that image smoothing works when imageSmoothingEnabled is set to true"); 49 50 test(function() { 51 var ctx = document.createElement('canvas').getContext('2d'); 52 var image = createTestImage(); 53 ctx.imageSmoothingEnabled = false; 54 ctx.scale(10, 10); 55 ctx.drawImage(image, 0, 0); 56 var pixels = ctx.getImageData(9, 9, 1, 1).data; 57 assert_array_equals(pixels, [0, 255, 0, 255]); 58 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with drawImage()."); 59 60 test(function() { 61 var ctx = document.createElement('canvas').getContext('2d'); 62 var image = createTestImage(); 63 ctx.imageSmoothingEnabled = false; 64 ctx.scale(10, 10); 65 ctx.fillStyle = ctx.createPattern(image, 'repeat'); 66 ctx.fillRect(0, 0, 10, 10); 67 var pixels = ctx.getImageData(9, 9, 1, 1).data; 68 assert_array_equals(pixels, [0, 255, 0, 255]); 69 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fillRect and createPattern()."); 70 71 test(function() { 72 var ctx = document.createElement('canvas').getContext('2d'); 73 var image = createTestImage(); 74 ctx.imageSmoothingEnabled = false; 75 ctx.fillStyle = ctx.createPattern(image, 'repeat'); 76 ctx.scale(10, 10); 77 ctx.rect(0, 0, 10, 10); 78 ctx.fill(); 79 var pixels = ctx.getImageData(9, 9, 1, 1).data; 80 assert_array_equals(pixels, [0, 255, 0, 255]); 81 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fill() and createPattern()."); 82 83 test(function() { 84 var ctx = document.createElement('canvas').getContext('2d'); 85 var image = createTestImage(); 86 ctx.strokeStyle = ctx.createPattern(image, 'repeat'); 87 ctx.lineWidth = 5; 88 ctx.imageSmoothingEnabled = false; 89 ctx.scale(10, 10); 90 ctx.beginPath(); 91 ctx.moveTo(0, 0); 92 ctx.lineTo(10, 10); 93 ctx.stroke(); 94 var pixels = ctx.getImageData(9, 9, 1, 1).data; 95 assert_array_equals(pixels, [0, 255, 0, 255]); 96 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with stroke() and createPattern()."); 97 98 test(function() { 99 var repaints = 5; 100 var ctx = document.createElement('canvas').getContext('2d'); 101 102 function draw() { 103 ctx.clearRect(0, 0, 10, 10); 104 ctx.setTransform(1, 0, 0, 1, 0, 0); 105 var image = createTestImage(); 106 ctx.imageSmoothingEnabled = false; 107 ctx.scale(10, 10); 108 ctx.drawImage(image, 0, 0); 109 var pixels = ctx.getImageData(9, 9, 1, 1).data; 110 assert_array_equals(pixels, [0, 255, 0, 255]); 111 } 112 113 while (repaints > 0) { 114 draw(); 115 repaints = repaints - 1; 116 } 117 118 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) still works after repaints."); 119 </script>