2d.layer.blur-from-outside-canvas.no-clipping-expected.html

Enable keyboard shortcuts

<!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.no-clipping</title>

<h1>2d.layer.blur-from-outside-canvas.no-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 = () => {

      // No clipping.

      ctx.drawImage(img, 0, 0);

};

  img.src = 'data:image/svg+xml;base64,' + btoa(svg);

</script>