<!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="c-ref" width="64" height="64"></canvas> <script> SimpleTest.waitForExplicitFinish(); function testToDataURL() { // testing toDataURL // 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"); ok(c.toDataURL() == htmlCanvas.toDataURL(), "toDataURL should return a 64x64 green square"); } function runTest() { var htmlCanvas = document.getElementById("c"); var worker = new Worker("offscreencanvas.js"); ok(htmlCanvas, "Should have HTML canvas element"); 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 == "finish") { testToDataURL(); worker.terminate(); SimpleTest.finish(); } } ok(htmlCanvas.transferControlToOffscreen, "HTMLCanvasElement has transferControlToOffscreen function"); var offscreenCanvas = htmlCanvas.transferControlToOffscreen(); ok(offscreenCanvas, "Expected transferControlToOffscreen to succeed"); worker.postMessage({test: 'webgl', canvas: offscreenCanvas}, [offscreenCanvas]); } SpecialPowers.pushPrefEnv({'set': [ ['gfx.offscreencanvas.enabled', true], ['webgl.force-enabled', true], ]}, runTest); </script> </body> </html>