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