<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.layer.global-states.filter.blending</title>
<h1>2d.layer.global-states.filter.blending</h1>
<p class="desc">Checks that layers with filters correctly use global render states.</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%">
        <feColorMatrix
            type="matrix"
            values="0.393 0.769 0.189 0 0
                    0.349 0.686 0.168 0 0
                    0.272 0.534 0.131 0 0
                    0 0 0 1 0" />
        <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
        </feComponentTransfer>
        <feDropShadow dx="5" dy="5" flood-color="#81e" />
      </filter>
      <g filter="url(#filter)">
        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
      </g>
    </svg>`;

  const img = new Image();
  img.width = 200;
  img.height = 200;
  img.onload = () => {
    ctx.fillStyle = 'rgba(0, 0, 255, 1)';

    var circle = new Path2D();
    circle.arc(90, 90, 45, 0, 2 * Math.PI);
    ctx.fill(circle);

    ctx.globalCompositeOperation = 'multiply';

    ctx.drawImage(img, 0, 0);
  };
  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
</script>
