createImageBitmap-bounds.html (2480B)
1 <!DOCTYPE html> 2 <html> 3 <title>createImageBitmap: clipping to the bitmap</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/html/canvas/resources/canvas-tests.js"></script> 7 <div id="results"></div> 8 <script> 9 const color = 204; 10 function testClip( name, sx, sy, sw, sh, expectedColors, expectedWidth, expectedHeight ) { 11 promise_test(function(t) { 12 return new Promise(function(resolve, reject) { 13 const image = new Image(); 14 image.onload = function() { resolve(image); }; 15 image.onerror = function() { reject(); }; 16 image.src = "/images/green-16x16.png"; 17 }).then(function(image) { 18 return createImageBitmap(image, sx, sy, sw, sh); 19 }).then(function(imageBitmap) { 20 21 assert_equals(imageBitmap.width, expectedWidth); 22 assert_equals(imageBitmap.height, expectedHeight); 23 24 const canvas = document.createElement("canvas"); 25 canvas.width = 16; 26 canvas.height = 16; 27 28 // debug 29 document.getElementById("results").append(canvas); 30 canvas.setAttribute("style", "width: 100px; height: 100px;"); 31 32 const ctx = canvas.getContext("2d"); 33 ctx.fillStyle = `rgb(${color}, ${color}, ${color})`; 34 ctx.fillRect(0, 0, 20, 20); 35 ctx.drawImage(imageBitmap, 0, 0); 36 37 for (let [x, y, r, g, b, a] of expectedColors) { 38 _assertPixel(canvas, x,y, r,g,b,a); 39 } 40 }); 41 }, name); 42 } 43 testClip( "simple clip inside", 44 8, 8, 8, 8, [ 45 [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], 46 [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] 47 ], 8, 8 48 ); 49 testClip( "clip outside negative", 50 -8, -8, 16, 16, [ 51 [ 4, 4, color,color,color,255], [12, 4, color,color,color,255], 52 [ 4, 12, color,color,color,255], [12, 12, 0,255,0,255] 53 ], 16, 16 54 ); 55 testClip( "clip outside positive", 56 8, 8, 16, 16, [ 57 [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], 58 [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] 59 ], 16, 16 60 ); 61 testClip( "clip inside using negative width and height", 62 24, 24, -16, -16, [ 63 [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], 64 [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] 65 ], 16, 16 66 ); 67 </script>