| <!DOCTYPE html> |
| <html class="test-wait"> |
| <title>HTML Canvas test: SVG filter using CSS font-relative line-height units</title> |
| <link rel="match" href="svg-filter-lh-rlh-expected.html"/> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| :root { |
| font: 20px Ahem; |
| } |
| </style> |
| <svg width="0" height="0"> |
| <!-- https://html.spec.whatwg.org/multipage/canvas.html#working-with-externally-defined-svg-filters --> |
| <use href="./svg-filter.svg#filter-lh" /> |
| <use href="./svg-filter.svg#filter-rlh" /> |
| </svg |
| ><canvas id="canvas-lh" width="100" height="100"></canvas><br |
| ><canvas id="canvas-rlh" width="100" height="100"></canvas> |
| <script> |
| function use_filter(canvas, filter_id) { |
| const ctx = canvas.getContext("2d"); |
| ctx.font = "40px Ahem"; |
| ctx.filter = `url(./svg-filter.svg#${filter_id})`; |
| ctx.fillStyle = "red"; |
| ctx.fillRect(0, 0, 100, 100); |
| } |
| window.addEventListener("load", async () => { |
| use_filter(document.getElementById("canvas-lh"), "filter-lh"); |
| use_filter(document.getElementById("canvas-rlh"), "filter-rlh"); |
| document.documentElement.classList.remove('test-wait'); |
| }); |
| </script> |
| </html> |
