createImageBitmap-drawImage.html (3502B)
1 <!DOCTYPE html> 2 <html> 3 <title>createImageBitmap + drawImage test</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 <script src="/common/media.js"></script> 8 <script src="common.sub.js"></script> 9 <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> 10 <body> 11 <script> 12 function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo) 13 { 14 var tolerance = 3; 15 let topLeft = [255, 0, 0, 255]; 16 let topRight = [0, 255, 0, 255]; 17 let bottomLeft = [0, 0, 255, 255]; 18 let bottomRight = [0, 0, 0, 255]; 19 if (sourceIsVideo) { 20 // The source video uses colors in the Rec.601 color space whose 21 // values are close to full red, full green, full blue, and black, 22 // but when converted to sRGB, are somewhat different. 23 topLeft = [247, 37, 0, 255]; 24 topRight = [63, 251, 0, 255]; 25 bottomLeft = [28, 35, 255, 255]; 26 bottomRight = [5, 0, 2, 255]; 27 } 28 const check = (x, y, [r, g, b, a]) => 29 _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance); 30 check(1 * width / 4, 1 * height / 4, topLeft); 31 check(3 * width / 4, 1 * height / 4, topRight); 32 check(1 * width / 4, 3 * height / 4, bottomLeft); 33 check(3 * width / 4, 3 * height / 4, bottomRight); 34 } 35 36 function testDrawImageBitmap(source, args = [], { resizeWidth = 20, resizeHeight = 20 } = {}) 37 { 38 let sourceIsVideo = source instanceof HTMLVideoElement; 39 var canvas = document.createElement("canvas"); 40 canvas.width = resizeWidth; 41 canvas.height = resizeHeight; 42 var ctx = canvas.getContext("2d"); 43 return createImageBitmap(source, ...args).then(imageBitmap => { 44 assert_equals(imageBitmap.width, resizeWidth); 45 assert_equals(imageBitmap.height, resizeHeight); 46 ctx.drawImage(imageBitmap, 0, 0); 47 testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo); 48 }); 49 } 50 51 for (let { name, factory } of imageSourceTypes) { 52 promise_test(function() { 53 return factory().then(function(img) { 54 return testDrawImageBitmap(img); 55 }); 56 }, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap`); 57 58 promise_test(function() { 59 return factory().then(function(img) { 60 const options = { resizeWidth: 10, resizeHeight: 10 }; 61 return testDrawImageBitmap(img, [options], options); 62 }); 63 }, `createImageBitmap from ${name} scaled down, and drawImage on the created ImageBitmap`); 64 65 promise_test(function() { 66 return factory().then(function(img) { 67 const options = { resizeWidth: 40, resizeHeight: 40 }; 68 return testDrawImageBitmap(img, [options], options); 69 }); 70 }, `createImageBitmap from ${name} scaled up, and drawImage on the created ImageBitmap`); 71 72 promise_test(function() { 73 return factory().then(function(img) { 74 const options = { resizeWidth: 10, resizeHeight: 40 }; 75 return testDrawImageBitmap(img, [options], options); 76 }); 77 }, `createImageBitmap from ${name} resized, and drawImage on the created ImageBitmap`); 78 79 promise_test(function() { 80 return factory().then(function(img) { 81 return testDrawImageBitmap(img, [20, 20, -20, -20]); 82 }); 83 }, `createImageBitmap from ${name} with negative sw/sh, and drawImage on the created ImageBitmap`); 84 } 85 </script> 86 </body> 87 </html>