<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>HTML OffscreenCanvas Test: the 'fontVariantCaps' property</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fontvariantcaps">
<link rel="match" href="reference/fontVariantCaps-1-ref.html">
<meta name="assert" content="text rendering respects the fontVariantCaps property">

<canvas id="canvas1"></canvas>
<br>
<canvas id="canvas2"></canvas>

<script>
const testContent = `
  ctx.font = "32px serif";
  ctx.fontVariantCaps = "small-caps";
  ctx.fillText("Hello World", 20, 100);
`;

// Draw to the first canvas using a worker:
const canvas1 = document.getElementById("canvas1");
const offscreen1 = canvas1.transferControlToOffscreen();
const workerScript = `
  onmessage = (evt) => {
    const canvas = evt.data.canvas;
    const ctx = canvas.getContext("2d");

    ${testContent}

    self.postMessage("done");
  };
`;

const blob = new Blob([workerScript], {type: 'application/javascript'});
const worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', function(e) {
  if (e.data == "done") {
    // Draw to the second using a main-thread OffscreenCanvas:
    const offscreen2 = new OffscreenCanvas(300, 150);
    const ctx = offscreen2.getContext("2d");

    eval(testContent);

    document.getElementById("canvas2")
            .getContext("bitmaprenderer")
            .transferFromImageBitmap(offscreen2.transferToImageBitmap());

    document.documentElement.classList.remove("reftest-wait");
  }
}, false);

worker.postMessage({ canvas: offscreen1 }, [offscreen1]);
</script>

