test_offscreencanvas_toimagebitmap.html (5868B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>WebGL in OffscreenCanvas</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 8 </head> 9 <body> 10 <canvas id="c1" width="64" height="64"></canvas> 11 <canvas id="c2" width="64" height="64"></canvas> 12 <canvas id="c_ref" width="64" height="64"></canvas> 13 <script> 14 15 function testWorker(onFinished) { 16 var worker = new Worker("offscreencanvas.js"); 17 18 ok(worker, "Web worker successfully created"); 19 20 worker.onmessage = function(evt) { 21 var msg = evt.data || {}; 22 //console.log('onmessage', {evt}, msg.type, msg.result, msg.name); 23 if (msg.type == "test") { 24 ok(msg.result, msg.name); 25 } 26 if (msg.type == "imagebitmap") { 27 // testing toBlob 28 // Fill c_ref with green color. 29 var ctx = c_ref.getContext("2d"); 30 ctx.rect(0, 0, 64, 64); 31 ctx.fillStyle = "#00FF00"; 32 ctx.fill(); 33 34 var bitmapRenderer = c1.getContext("bitmaprenderer"); 35 bitmapRenderer.transferFromImageBitmap(msg.bitmap); 36 37 ok(c1.toDataURL() == c_ref.toDataURL(), 38 "c1.toDataURL MUST return a 64x64 green square"); 39 40 // The ownership of msg.bitmap should be transferred to canvas c1 when 41 // we called transferFromImageBitmap, marking msg.bitmap as "detached". 42 // Ensure that transferFromImageBitmap again should throw. 43 var bitmapRenderer = c2.getContext("bitmaprenderer"); 44 45 let didThrow = false; 46 try { 47 bitmapRenderer.transferFromImageBitmap(msg.bitmap) 48 } catch (e) { 49 didThrow = true; 50 } 51 ok(didThrow, 'transferFromImageBitmap(detached) must throw'); 52 ok(c1.toDataURL() == c_ref.toDataURL(), 53 "c2.toDataURL MUST NOT return a 64x64 green square"); 54 55 worker.terminate(); 56 onFinished(); 57 } 58 } 59 60 worker.postMessage({test: 'webgl_imagebitmap'}); 61 } 62 63 function expectEq(name, expected, was, when) { 64 let msg = `${name} was ${was}`; 65 if (when) { 66 msg = `[${when}] ` + msg; 67 } 68 let eq = (was == expected); 69 if (!eq) { 70 if (typeof(expected) == 'number') { 71 eq = (Math.abs(was - expected) < 0.000001); 72 } 73 } 74 if (!eq) { 75 msg = msg + `, expected ${expected}`; 76 } 77 ok(eq, msg); 78 } 79 function expectMemberEq(obj, key, expected, when) { 80 const was = obj[key]; 81 expectEq(`${obj}.${key}`, expected, was, when); 82 } 83 function expectEachMemberEq(obj, expectedByKeyMap, when) { 84 for (const [key,expected] of Object.entries(expectedByKeyMap)) { 85 expectMemberEq(obj, key, expected, when); 86 } 87 } 88 89 function note(text) { 90 console.log(text); 91 ok(true, text); 92 } 93 94 function invoke(fn) { return fn(); } 95 96 invoke(async () => { 97 SimpleTest.waitForExplicitFinish(); 98 99 await new Promise(go => 100 SpecialPowers.pushPrefEnv({'set': [ 101 ['webgl.force-enabled', true], 102 ]}, go)); 103 104 console.log('await testWorker...'); 105 await new Promise(go => testWorker(go)); 106 107 // - 108 109 const [W, H] = [5, 7]; 110 111 note('Begin canvas2d transferToImageBitmap tests...'); 112 { 113 const oc = new OffscreenCanvas(W, H); 114 const c2d = oc.getContext('2d'); 115 116 c2d.fillStyle = '#00ff00'; 117 c2d.fillRect(0, 0, W, H); 118 { 119 const idata = c2d.getImageData(0, 0, W, H); 120 expectEq('getImageData.data.slice(0, 4)', '[0,255,0,255]', 121 `[${idata.data.slice(0,4).join(',')}]`, 'after fillRect'); 122 } 123 124 // - 125 126 const NON_DEFAULT_STATE_2D = { 127 direction: 'rtl', 128 fillStyle: '#aaaaaa', 129 font: '13px serif', 130 fontKerning: 'none', 131 globalAlpha: 0.42, 132 globalCompositeOperation: 'xor', 133 imageSmoothingEnabled: false, 134 imageSmoothingQuality: 'high', 135 lineCap: 'round', 136 lineDashOffset: 4.2, 137 lineJoin: 'round', 138 lineWidth: 3.14, 139 miterLimit: 1.0, 140 shadowBlur: 1, 141 shadowColor: '#bbbbbb', 142 shadowOffsetX: 2, 143 shadowOffsetY: 3, 144 strokeStyle: '#cccccc', 145 textAlign: 'right', 146 textBaseline: 'middle', 147 }; 148 Object.assign(c2d, NON_DEFAULT_STATE_2D); 149 expectEachMemberEq(c2d, NON_DEFAULT_STATE_2D, 'before transferToImageBitmap'); 150 151 const beforeTtibData = c2d.getImageData(0, 0, W, H); 152 const ib = oc.transferToImageBitmap(); 153 const afterTtibData = c2d.getImageData(0, 0, W, H); 154 155 // Same state afterwards 156 expectEachMemberEq(oc, {width: W, height: H}, 'after transferToImageBitmap'); 157 expectEachMemberEq(c2d, NON_DEFAULT_STATE_2D, 'after transferToImageBitmap'); 158 // But bitmap cleared afterwards 159 let was = `[${afterTtibData.data.slice(0, 4).join(',')}]`; 160 expectEq('getImageData.data.slice(0, 4)', '[0,0,0,0]', was, 'after transferToImageBitmap'); 161 } 162 163 note('Begin webgl transferToImageBitmap tests...'); 164 { 165 const oc = new OffscreenCanvas(W, H); 166 const gl = oc.getContext('webgl', {preserveDrawingBuffer:true}); 167 168 gl.clearColor(0, 1, 0, 1); 169 gl.clear(gl.COLOR_BUFFER_BIT); 170 const p = new Uint8Array(4); 171 gl.readPixels(0,0,1,1, gl.RGBA, gl.UNSIGNED_BYTE, p); 172 expectEq('gl.readPixels(0,0,1,1)', '[0,255,0,255]', 173 `[${p.slice(0,4).join(',')}]`, 'after gl.clear'); 174 175 // - 176 177 const buf = gl.createBuffer(); 178 gl.bindBuffer(gl.ARRAY_BUFFER, buf); 179 expectEq(`ARRAY_BUFFER_BINDING`, buf, 180 gl.getParameter(gl.ARRAY_BUFFER_BINDING), 'before transferToImageBitmap'); 181 182 const ib = oc.transferToImageBitmap(); 183 184 // Same state afterwards 185 expectEachMemberEq(oc, {width: W, height: H}, 'after transferToImageBitmap'); 186 expectEq(`ARRAY_BUFFER_BINDING`, buf, 187 gl.getParameter(gl.ARRAY_BUFFER_BINDING), 'after transferToImageBitmap'); 188 // But bitmap cleared afterwards 189 gl.readPixels(0,0,1,1, gl.RGBA, gl.UNSIGNED_BYTE, p); 190 expectEq('gl.readPixels(0,0,1,1)', '[0,0,0,0]', 191 `[${p.slice(0,4).join(',')}]`, 'after transferToImageBitmap'); 192 } 193 194 note('Tests complete.'); 195 SimpleTest.finish(); 196 }); 197 198 </script> 199 </body> 200 </html>