dom/canvas/test/test_offscreencanvas_toblob.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>WebGL in OffscreenCanvas</title>
   5 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6 <script src="offscreencanvas.js"></script>
   7 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   8 </head>
   9 <body>
  10 <canvas id="c" width="64" height="64"></canvas>
  11 <canvas id="c-mt" width="64" height="64"></canvas>
  12 <canvas id="c-ref" width="64" height="64"></canvas>
  13 <script>
  14
  15 SimpleTest.waitForExplicitFinish();
  16
  17 function testBlob(blob, callback) {
  18   // testing toBlob
  19   // Fill c-ref with green color.
  20   var c = document.getElementById("c-ref");
  21   var ctx = c.getContext("2d");
  22   ctx.rect(0, 0, 64, 64);
  23   ctx.fillStyle = "#00FF00";
  24   ctx.fill();
  25   var reader = new FileReader();
  26   reader.onload = function(e) {
  27     ok(c.toDataURL() == e.target.result, "toBlob should return a 64x64 green square");
  28     callback();
  29   };
  30   reader.readAsDataURL(blob);
  31 }
  32
  33 function runTestOnMainThread() {
  34   var htmlCanvas = document.getElementById("c-mt");
  35   ok(htmlCanvas, "Should have HTML canvas element");
  36
  37   window.onmessage = function(evt) {
  38     var msg = evt.data || {};
  39     if (msg.type == "test") {
  40       ok(msg.result, msg.name);
  41     }
  42     if (msg.type == "blob") {
  43       testBlob(msg.blob, SimpleTest.finish);
  44     }
  45   }
  46
  47   ok(htmlCanvas.transferControlToOffscreen, "HTMLCanvasElement has transferControlToOffscreen function");
  48
  49   var offscreenCanvas = htmlCanvas.transferControlToOffscreen();
  50   ok(offscreenCanvas, "Expected transferControlToOffscreen to succeed");
  51
  52   entryFunction('webgl_toblob', '', offscreenCanvas);
  53 }
  54
  55 function runTest() {
  56
  57   var htmlCanvas = document.getElementById("c");
  58   var worker = new Worker("offscreencanvas.js");
  59
  60   ok(htmlCanvas, "Should have HTML canvas element");
  61   ok(worker, "Web worker successfully created");
  62
  63   worker.onmessage = function(evt) {
  64     var msg = evt.data || {};
  65     if (msg.type == "test") {
  66       ok(msg.result, msg.name);
  67     }
  68     if (msg.type == "blob") {
  69       testBlob(msg.blob, function() {
  70         worker.terminate();
  71         runTestOnMainThread();
  72       });
  73     }
  74   }
  75
  76   ok(htmlCanvas.transferControlToOffscreen, "HTMLCanvasElement has transferControlToOffscreen function");
  77
  78   var offscreenCanvas = htmlCanvas.transferControlToOffscreen();
  79   ok(offscreenCanvas, "Expected transferControlToOffscreen to succeed");
  80
  81   worker.postMessage({test: 'webgl_toblob', canvas: offscreenCanvas}, [offscreenCanvas]);
  82 }
  83
  84 SpecialPowers.pushPrefEnv({'set': [
  85   ['webgl.force-enabled', true],
  86 ]}, runTest);
  87
  88 </script>
  89 </body>
  90 </html>