| <!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="mismatch" href="2d.text.fontVariantCaps2-unexpected.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 = "small-caps 32px serif"; |
| 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> |
| |
