bitmaprenderer-as-imagesource.html (3447B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Canvas's ImageBitmapRenderingContext 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/multipage/scripting.html#the-imagebitmap-rendering-context"> 7 <script> 8 var width = 10; 9 var height = 10; 10 11 function testCanvas(ctx, x, y, r, g, b, a) 12 { 13 var color = ctx.getImageData(x, y, 1, 1).data; 14 assert_array_equals(color, [r, g, b, a]); 15 } 16 17 function consumeImageBitmap(image, t) 18 { 19 var myCanvas = document.createElement('canvas'); 20 myCanvas.width = myCanvas.height = 20; 21 var myCtx = myCanvas.getContext('bitmaprenderer'); 22 myCtx.transferFromImageBitmap(image); 23 24 createImageBitmap(myCanvas).then(t.step_func_done(function(imageBitmap) { 25 // Per spec, when transferFromImageBitmap happens, the transferred 26 // ImageBitmap (|image| here) must determine the intrinsic size of 27 // myCanvas, and hence myCanvas.width/height is ignored. Therefore, 28 // |imageBitmap| should have the same size as the |image|. 29 assert_equals(imageBitmap.width, width); 30 assert_equals(imageBitmap.height, height); 31 32 var dstCanvas = document.createElement('canvas'); 33 dstCanvas.width = dstCanvas.height = 20; 34 var dstCtx = dstCanvas.getContext('2d'); 35 dstCtx.drawImage(myCanvas, 0, 0); 36 testCanvas(dstCtx, 5, 5, 0, 255, 0, 255); 37 testCanvas(dstCtx, 15, 15, 0, 0, 0, 0); 38 })); 39 } 40 41 async_test(function(t) { 42 var canvas = document.createElement("canvas"); 43 canvas.width = width; 44 canvas.height = height; 45 var ctx = canvas.getContext('2d'); 46 ctx.fillStyle = '#0f0'; 47 ctx.fillRect(0, 0, width, height); 48 createImageBitmap(canvas).then(t.step_func(function(image) { 49 consumeImageBitmap(image, t); 50 })); 51 }, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct result'); 52 53 async_test(function(t) { 54 var canvas = document.createElement("canvas"); 55 canvas.width = width; 56 canvas.height = height; 57 var ctx = canvas.getContext('bitmaprenderer'); 58 createImageBitmap(canvas).then(t.step_func_done(function(image) { 59 assert_equals(image.width, width); 60 assert_equals(image.height, height); 61 62 var dstCanvas = document.createElement('canvas'); 63 dstCanvas.width = width; 64 dstCanvas.height = height; 65 var dstCtx = dstCanvas.getContext('2d'); 66 dstCtx.drawImage(canvas, 0, 0); 67 testCanvas(dstCtx, 5, 5, 0, 0, 0, 0); 68 })); 69 }, 'Test that createImageBitmap on a bitmaprenderer canvas that never consumes any source produces correct result'); 70 71 72 async_test(function(t) { 73 var canvas = document.createElement("canvas"); 74 canvas.width = width; 75 canvas.height = height; 76 var ctx = canvas.getContext('bitmaprenderer'); 77 ctx.transferFromImageBitmap(null); 78 createImageBitmap(canvas).then(t.step_func_done(function(image) { 79 assert_equals(image.width, width); 80 assert_equals(image.height, height); 81 82 var dstCanvas = document.createElement('canvas'); 83 dstCanvas.width = width; 84 dstCanvas.height = height; 85 var dstCtx = dstCanvas.getContext('2d'); 86 dstCtx.drawImage(canvas, 0, 0); 87 testCanvas(dstCtx, 5, 5, 0, 0, 0, 0); 88 })); 89 }, 'Test that createImageBitmap on a bitmaprenderer canvas that consumes null produces correct result'); 90 </script>