postMessage_cross_domain_image_transfer_2d.sub.htm (1972B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/common/get-host-info.sub.js"></script> 5 <body> 6 <script> 7 // Create a 2D canvas filled in solid gray. 8 var size = 4; 9 var sourceCanvas = document.createElement('canvas'); 10 sourceCanvas.width = sourceCanvas.height = size; 11 var ctx = sourceCanvas.getContext('2d'); 12 ctx.fillStyle = "gray"; 13 ctx.fillRect(0, 0, size, size); 14 const expectedPixels = "{\"0\":128,\"1\":128,\"2\":128,\"3\":255,\"4\":128,\"5\":128,\"6\":128,\"7\":255,\"8\":128,\"9\":128,\"10\":128,\"11\":255,\"12\":128,\"13\":128,\"14\":128,\"15\":255,\"16\":128,\"17\":128,\"18\":128,\"19\":255,\"20\":128,\"21\":128,\"22\":128,\"23\":255,\"24\":128,\"25\":128,\"26\":128,\"27\":255,\"28\":128,\"29\":128,\"30\":128,\"31\":255,\"32\":128,\"33\":128,\"34\":128,\"35\":255,\"36\":128,\"37\":128,\"38\":128,\"39\":255,\"40\":128,\"41\":128,\"42\":128,\"43\":255,\"44\":128,\"45\":128,\"46\":128,\"47\":255,\"48\":128,\"49\":128,\"50\":128,\"51\":255,\"52\":128,\"53\":128,\"54\":128,\"55\":255,\"56\":128,\"57\":128,\"58\":128,\"59\":255,\"60\":128,\"61\":128,\"62\":128,\"63\":255}"; 15 16 const {ORIGIN, REMOTE_ORIGIN, HTTP_NOTSAMESITE_ORIGIN} = get_host_info(); 17 for (let origin of [ORIGIN, REMOTE_ORIGIN, HTTP_NOTSAMESITE_ORIGIN]) { 18 promise_test(async t => { 19 let imageBitmap = await createImageBitmap(sourceCanvas); 20 21 let frame = document.createElement('iframe'); 22 frame.src = origin + '/webmessaging/support/cross-domain-image-receive.htm'; 23 document.body.appendChild(frame); 24 await new Promise(resolve => { frame.onload = e => resolve(); }); 25 26 frame.contentWindow.postMessage({image: imageBitmap}, "*", [imageBitmap]); 27 let reply = await new Promise(resolve => { 28 window.addEventListener('message', e => resolve(e.data), {once: true}); 29 }); 30 assert_equals(reply, expectedPixels); 31 }, `sending 2D canvas ImageBitmap to ${origin}`); 32 } 33 </script> 34 </body>