dom/canvas/test/test_offscreencanvas_toimagebitmap.html

   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>