| <!DOCTYPE html> |
| <html> |
| <title>createImageBitmap: clipping to the bitmap</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/html/canvas/resources/canvas-tests.js"></script> |
| <div id="results"></div> |
| <script> |
| const color = 204; |
| function testClip( name, sx, sy, sw, sh, expectedColors, expectedWidth, expectedHeight ) { |
| promise_test(function(t) { |
| return new Promise(function(resolve, reject) { |
| const image = new Image(); |
| image.onload = function() { resolve(image); }; |
| image.onerror = function() { reject(); }; |
| image.src = "/images/green-16x16.png"; |
| }).then(function(image) { |
| return createImageBitmap(image, sx, sy, sw, sh); |
| }).then(function(imageBitmap) { |
| |
| assert_equals(imageBitmap.width, expectedWidth); |
| assert_equals(imageBitmap.height, expectedHeight); |
| |
| const canvas = document.createElement("canvas"); |
| canvas.width = 16; |
| canvas.height = 16; |
| |
| // debug |
| document.getElementById("results").append(canvas); |
| canvas.setAttribute("style", "width: 100px; height: 100px;"); |
| |
| const ctx = canvas.getContext("2d"); |
| ctx.fillStyle = `rgb(${color}, ${color}, ${color})`; |
| ctx.fillRect(0, 0, 20, 20); |
| ctx.drawImage(imageBitmap, 0, 0); |
| |
| for (let [x, y, r, g, b, a] of expectedColors) { |
| _assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`); |
| } |
| }); |
| }, name); |
| } |
| testClip( "simple clip inside", |
| 8, 8, 8, 8, [ |
| [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], |
| [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] |
| ], 8, 8 |
| ); |
| testClip( "clip outside negative", |
| -8, -8, 16, 16, [ |
| [ 4, 4, color,color,color,255], [12, 4, color,color,color,255], |
| [ 4, 12, color,color,color,255], [12, 12, 0,255,0,255] |
| ], 16, 16 |
| ); |
| testClip( "clip outside positive", |
| 8, 8, 16, 16, [ |
| [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], |
| [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] |
| ], 16, 16 |
| ); |
| testClip( "clip inside using negative width and height", |
| 24, 24, -16, -16, [ |
| [ 4, 4, 0,255,0,255], [12, 4, color,color,color,255], |
| [ 4, 12, color,color,color,255], [12, 12, color,color,color,255] |
| ], 16, 16 |
| ); |
| </script> |