image.smoothing.html (4656B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>OffscreenCanvasRenderingContext2D 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/#the-offscreen-2d-rendering-context"> 7 <script> 8 function createTestImage() { 9 var image = new OffscreenCanvas(100, 50); 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 offscreenCanvas = new OffscreenCanvas(100, 50); 20 var ctx = offscreenCanvas.getContext('2d'); 21 assert_true(ctx.imageSmoothingEnabled); 22 }, "When the context is created, imageSmoothingEnabled must be set to true."); 23 24 test(function() { 25 var offscreenCanvas = new OffscreenCanvas(100, 50); 26 var ctx = offscreenCanvas.getContext('2d'); 27 ctx.imageSmoothingEnabled = false; 28 assert_false(ctx.imageSmoothingEnabled); 29 }, "On getting imageSmoothingEnabled, the user agent must return the last value it was set to."); 30 31 test(function() { 32 var offscreenCanvas = new OffscreenCanvas(100, 50); 33 var ctx = offscreenCanvas.getContext('2d'); 34 var image = createTestImage(); 35 ctx.scale(10, 10); 36 ctx.drawImage(image, 0, 0); 37 var pixels = ctx.getImageData(9, 9, 1, 1).data; 38 assert_not_equals(pixels[0], 0); 39 assert_not_equals(pixels[1], 255); 40 }, "Test that image smoothing is actually on by default."); 41 42 test(function() { 43 var offscreenCanvas = new OffscreenCanvas(100, 50); 44 var ctx = offscreenCanvas.getContext('2d'); 45 ctx.imageSmoothingEnabled = true; 46 var image = createTestImage(); 47 ctx.scale(10, 10); 48 ctx.drawImage(image, 0, 0); 49 var pixels = ctx.getImageData(9, 9, 1, 1).data; 50 assert_not_equals(pixels[0], 0); 51 assert_not_equals(pixels[1], 255); 52 }, "Test that image smoothing works when imageSmoothingEnabled is set to true"); 53 54 test(function() { 55 var offscreenCanvas = new OffscreenCanvas(100, 50); 56 var ctx = offscreenCanvas.getContext('2d'); 57 var image = createTestImage(); 58 ctx.imageSmoothingEnabled = false; 59 ctx.scale(10, 10); 60 ctx.drawImage(image, 0, 0); 61 var pixels = ctx.getImageData(9, 9, 1, 1).data; 62 assert_array_equals(pixels, [0, 255, 0, 255]); 63 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with drawImage()."); 64 65 test(function() { 66 var offscreenCanvas = new OffscreenCanvas(100, 50); 67 var ctx = offscreenCanvas.getContext('2d'); 68 var image = createTestImage(); 69 ctx.imageSmoothingEnabled = false; 70 ctx.scale(10, 10); 71 ctx.fillStyle = ctx.createPattern(image, 'repeat'); 72 ctx.fillRect(0, 0, 10, 10); 73 var pixels = ctx.getImageData(9, 9, 1, 1).data; 74 assert_array_equals(pixels, [0, 255, 0, 255]); 75 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fillRect and createPattern()."); 76 77 test(function() { 78 var offscreenCanvas = new OffscreenCanvas(100, 50); 79 var ctx = offscreenCanvas.getContext('2d'); 80 var image = createTestImage(); 81 ctx.imageSmoothingEnabled = false; 82 ctx.fillStyle = ctx.createPattern(image, 'repeat'); 83 ctx.scale(10, 10); 84 ctx.rect(0, 0, 10, 10); 85 ctx.fill(); 86 var pixels = ctx.getImageData(9, 9, 1, 1).data; 87 assert_array_equals(pixels, [0, 255, 0, 255]); 88 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fill() and createPattern()."); 89 90 test(function() { 91 var offscreenCanvas = new OffscreenCanvas(100, 50); 92 var ctx = offscreenCanvas.getContext('2d'); 93 var image = createTestImage(); 94 ctx.strokeStyle = ctx.createPattern(image, 'repeat'); 95 ctx.lineWidth = 5; 96 ctx.imageSmoothingEnabled = false; 97 ctx.scale(10, 10); 98 ctx.beginPath(); 99 ctx.moveTo(0, 0); 100 ctx.lineTo(10, 10); 101 ctx.stroke(); 102 var pixels = ctx.getImageData(9, 9, 1, 1).data; 103 assert_array_equals(pixels, [0, 255, 0, 255]); 104 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with stroke() and createPattern()."); 105 106 test(function() { 107 var repaints = 5; 108 var offscreenCanvas = new OffscreenCanvas(100, 50); 109 var ctx = offscreenCanvas.getContext('2d'); 110 111 function draw() { 112 ctx.clearRect(0, 0, 10, 10); 113 ctx.setTransform(1, 0, 0, 1, 0, 0); 114 var image = createTestImage(); 115 ctx.imageSmoothingEnabled = false; 116 ctx.scale(10, 10); 117 ctx.drawImage(image, 0, 0); 118 var pixels = ctx.getImageData(9, 9, 1, 1).data; 119 assert_array_equals(pixels, [0, 255, 0, 255]); 120 } 121 122 while (repaints > 0) { 123 draw(); 124 repaints = repaints - 1; 125 } 126 127 }, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) still works after repaints."); 128 </script>