test_2d.fill.pattern.imageSmoothingEnabled.html (2769B)
1 <!DOCTYPE HTML> 2 <title>Canvas test: 2d.fill.pattern.imageSmoothingEnabled</title> 3 <!-- Testing: That imageSmoothingEnabled is taken into account when doing pattern fills--> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 6 <body> 7 <canvas id="c" width="128" height="128"><p class="fallback">FAIL (fallback content)</p></canvas> 8 <img id="img"> 9 <script> 10 function isPixel(ctx, x,y, r,g,b,a, pos, colour, d) { 11 var pixel = ctx.getImageData(x, y, 1, 1); 12 var pr = pixel.data[0], 13 pg = pixel.data[1], 14 pb = pixel.data[2], 15 pa = pixel.data[3]; 16 ok(r-d <= pr && pr <= r+d && 17 g-d <= pg && pg <= g+d && 18 b-d <= pb && pb <= b+d && 19 a-d <= pa && pa <= a+d, 20 "pixel "+pos+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d); 21 } 22 23 function isNotPixel(ctx, x,y, r,g,b,a, pos, colour, d) { 24 var pixel = ctx.getImageData(x, y, 1, 1); 25 var pr = pixel.data[0], 26 pg = pixel.data[1], 27 pb = pixel.data[2], 28 pa = pixel.data[3]; 29 ok(!(r-d <= pr && pr <= r+d && 30 g-d <= pg && pg <= g+d && 31 b-d <= pb && pb <= b+d && 32 a-d <= pa && pa <= a+d), 33 "pixel "+pos+" is "+pr+","+pg+","+pb+","+pa+"; did not expect "+colour+" +/- "+d); 34 } 35 36 SimpleTest.waitForExplicitFinish(); 37 addLoadEvent(function () { 38 39 var canvas = document.getElementById('c'); 40 var ctx = canvas.getContext('2d'); 41 42 var img = document.getElementById("img"); 43 img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; 44 45 img.onload = function () { 46 ctx.imageSmoothingEnabled = false; 47 ctx.save(); 48 ctx.fillRect(0, 0, canvas.width, canvas.height); 49 ctx.scale(16, 16); 50 ctx.fillStyle = ctx.createPattern(img, 'no-repeat'); 51 ctx.fillRect(0, 0, 8, 8); 52 ctx.restore(); 53 54 // Check for nearest filtering. 55 isPixel(ctx, 0,0, 0,0,0,255, "0,0", "0,0,0,255", 0); 56 isPixel(ctx, 14,14, 0,0,0,255, "14,14", "0,0,0,255", 0); 57 isPixel(ctx, 15,15, 0,0,0,255, "15,15", "0,0,0,255", 0); 58 isPixel(ctx, 16,16, 255,0,0,255, "16,16", "255,0,0,255", 0); 59 60 ctx.imageSmoothingEnabled = true; 61 ctx.save(); 62 ctx.fillRect(0, 0, canvas.width, canvas.height); 63 ctx.scale(16, 16); 64 ctx.fillStyle = ctx.createPattern(img, 'no-repeat'); 65 ctx.fillRect(0, 0, 8, 8); 66 ctx.restore(); 67 68 // Check that nearest filtering is not happening. 69 isPixel(ctx, 0,0, 0,0,0,255, "0,0", "0,0,0,255", 0); 70 isNotPixel(ctx, 14,14, 0,0,0,255, "14,14", "0,0,0,255", 0); 71 isNotPixel(ctx, 15,15, 0,0,0,255, "15,15", "0,0,0,255", 0); 72 isNotPixel(ctx, 16,16, 255,0,0,255, "16,16", "255,0,0,255", 0); 73 isPixel(ctx, 32,32, 255,0,0,255, "32,32", "255,0,0,255", 0); 74 SimpleTest.finish(); 75 } 76 77 }); 78 </script>