<!DOCTYPE HTML> <html> <head> <title>WebGL in OffscreenCanvas</title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" href="/tests/SimpleTest/test.css"> </head> <body> <canvas id="c" width="64" height="64"></canvas> <canvas id="c2" width="64" height="64"></canvas> <canvas id="c-ref" width="64" height="64"></canvas> <script> SimpleTest.waitForExplicitFinish(); function runTest() { var worker = new Worker("offscreencanvas.js"); ok(worker, "Web worker successfully created"); worker.onmessage = function(evt) { var msg = evt.data || {}; if (msg.type == "test") { ok(msg.result, msg.name); } if (msg.type == "imagebitmap") { // testing toBlob // Fill c-ref with green color. var c = document.getElementById("c-ref"); var ctx = c.getContext("2d"); ctx.rect(0, 0, 64, 64); ctx.fillStyle = "#00FF00"; ctx.fill(); var htmlCanvas = document.getElementById("c"); var bitmapRenderer = htmlCanvas.getContext("bitmaprenderer"); bitmapRenderer.transferFromImageBitmap(msg.bitmap); ok(c.toDataURL() == htmlCanvas.toDataURL(), "imagebitmap should return a 64x64 green square"); // The ownership of msg.bitmap should be transferred to canvas "c" when // we called transferFromImageBitmap. So we test if the ownership is actually // transferred here. var htmlCanvas = document.getElementById("c2"); var bitmapRenderer = htmlCanvas.getContext("bitmaprenderer"); bitmapRenderer.transferFromImageBitmap(msg.bitmap); SimpleTest.doesThrow( function() { c2.toDataURL(); }, "ImageBitmap has been transferred, toDataURL will throw."); worker.terminate(); SimpleTest.finish(); } } worker.postMessage({test: 'webgl_imagebitmap'}); } SpecialPowers.pushPrefEnv({'set': [ ['gfx.offscreencanvas.enabled', true], ['webgl.force-enabled', true], ]}, runTest); </script> </body> </html>