OffscreenCanvas-text-rendering-in-worker.html

<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='400' height='400'></canvas>
<script id='worker' type='text/worker'>
  var ofc = new OffscreenCanvas(400, 400);
  var ctx = ofc.getContext("2d");

  ctx.font = "italic 12px sans-serif";
  ctx.fillStyle = "red";
  ctx.fillText("it's", 10, 10);

  ctx.font = "bold 30px sans-serif";
  ctx.fillStyle = "orange";
  ctx.textAlign = "center";
  ctx.fillText("SUNNY", 80, 50);

  ctx.textBaseline = "top";
  ctx.textAlign = "left";
  ctx.font = "italic 50px serif";
  var p = ctx.measureText("outside");

  ctx.fillStyle = "purple";
  ctx.fillRect(50, 70, p.width, 50);
  ctx.strokeStyle = "white";
  ctx.strokeText("outside", 50, 70);

  ctx.fillStyle = "black";
  ctx.filter = "drop-shadow(0 1ex black)";
  ctx.font = "italic bold 16px courier";
  ctx.fillText("isn't it?", 10, 130);

  var im = ofc.transferToImageBitmap();
  self.postMessage(im, [im]);
</script>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}

var blob = new Blob([document.getElementById('worker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));

worker.addEventListener('message', ev => {
  var im = ev.data;
  var ctx = document.getElementById("output").getContext("bitmaprenderer");
  ctx.transferFromImageBitmap(im);
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-text-rendering-in-worker.html
