blob: 1823f789839a973121269406f387ae8a66b6f8e1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping</title>
<h1>2d.layer.blur-from-outside-canvas.with-clipping</h1>
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
<canvas id="canvas" width="200" height="200">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const svg = `
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"
color-interpolation-filters="sRGB">
<filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
</filter>
<g filter="url(#filter)">
<rect x="201" y="50" width="100" height="100" fill="turquoise"/>
<rect x="50" y="201" width="100" height="100" fill="indigo"/>
<rect x="-101" y="50" width="100" height="100" fill="orange"/>
<rect x="50" y="-101" width="100" height="100" fill="brown"/>
</g>
</svg>`;
const img = new Image();
img.width = 200;
img.height = 200;
img.onload = () => {
const clipRegion = new Path2D();
clipRegion.rect(20, 20, 160, 160);
ctx.clip(clipRegion);
ctx.drawImage(img, 0, 0);
};
img.src = 'data:image/svg+xml;base64,' + btoa(svg);
</script>
|
