context-creation-with-alpha.html (2452B)
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 testImageBitmap(image, opts, expectedR, expectedG, expectedB, expectedA) 12 { 13 var dstCanvas = document.createElement('canvas'); 14 dstCanvas.width = width; 15 dstCanvas.height = height; 16 var dstCtx = dstCanvas.getContext('bitmaprenderer', opts); 17 dstCtx.transferFromImageBitmap(image); 18 19 var myCanvas = document.createElement('canvas'); 20 myCanvas.width = width; 21 myCanvas.height = height; 22 var myCtx = myCanvas.getContext('2d'); 23 myCtx.drawImage(dstCanvas, 0, 0); 24 var color = myCtx.getImageData(5, 5, 1, 1).data; 25 assert_array_approx_equals(color, [expectedR, expectedG, expectedB, expectedA],1); 26 } 27 28 promise_test(function() { 29 var srcCanvas = document.createElement('canvas'); 30 srcCanvas.width = width; 31 srcCanvas.height = height; 32 var ctx = srcCanvas.getContext('2d'); 33 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 34 ctx.fillRect(0, 0, width, height); 35 return createImageBitmap(srcCanvas).then(function(image) { 36 testImageBitmap(image, {alpha: false}, 0, 255, 0, 128); 37 }); 38 }, "Test that an ImageBitmapRenderingContext with alpha disabled makes the canvas opaque"); 39 40 promise_test(function() { 41 var srcCanvas = document.createElement('canvas'); 42 srcCanvas.width = width; 43 srcCanvas.height = height; 44 var ctx = srcCanvas.getContext('2d'); 45 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 46 ctx.fillRect(0, 0, width, height); 47 return createImageBitmap(srcCanvas).then(function(image) { 48 testImageBitmap(image, {alpha: true}, 0, 255, 0, 128); 49 }); 50 }, "Test that an ImageBitmapRenderingContext with alpha enabled preserves the alpha"); 51 52 promise_test(function() { 53 var srcCanvas = document.createElement('canvas'); 54 srcCanvas.width = width; 55 srcCanvas.height = height; 56 var ctx = srcCanvas.getContext('2d'); 57 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 58 ctx.fillRect(0, 0, width, height); 59 return createImageBitmap(srcCanvas).then(function(image) { 60 testImageBitmap(image, {}, 0, 255, 0, 128); 61 }); 62 }, "Test that the 'alpha' context creation attribute is true by default"); 63 64 </script>