diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual')
3 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html new file mode 100644 index 0000000000..d183f6940d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="test-wait"> +<title>HTML Canvas reference: SVG filter using CSS font-relative line-height units</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +:root { + font: 20px Ahem; +} + +div { + display: inline-block; + width: 100px; + height: 100px; + background: green; +} + +.r { + background: red; +} +</style> +<div><div class="r" style="width: 48px;"></div></div><br> +<div><div class="r" style="width: 24px;"></div></div> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html new file mode 100644 index 0000000000..b61193fb9f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html @@ -0,0 +1,32 @@ +<!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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg new file mode 100644 index 0000000000..a783a3eb15 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg @@ -0,0 +1,10 @@ +<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + <filter id="filter-lh"> + <feFlood result="floodFill" x="1lh" y="0" width="100" height="100" flood-color="green" /> + <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" /> + </filter> + <filter id="filter-rlh"> + <feFlood result="floodFill" x="1rlh" y="0" width="100" height="100" flood-color="green" /> + <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" /> + </filter> +</svg> |