test_offscreencanvas_basic_webgl.html

Enable keyboard shortcuts

<!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>