third_party/WebKit/LayoutTests/http/tests/canvas/canvas-filter-svg-external-multiple.html

<canvas id="canvas" width="100" height="100"></canvas>
<script>
function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#0f0';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = '#f00';
  ctx.filter = 'url(resources/blur.svg#blur)';
  ctx.fillRect(10, 10, 20, 20);
  ctx.filter = 'url(resources/hue-rotate.svg#hue-rotate)';
  ctx.fillRect(40, 40, 20, 20);
  ctx.filter = 'url(resources/blur.svg#blur)';
  ctx.fillRect(70, 70, 20, 20);

  if (window.testRunner)
    testRunner.notifyDone();
}

function filterLoaded() {
  loadedFilterCount++;
  if (loadedFilterCount == 2)
    draw();
}

if (window.testRunner)
  testRunner.waitUntilDone();

var loadedFilterCount = 0;

var svgElement = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svgElement.setAttribute('width', '0');
svgElement.setAttribute('height', '0');

var useElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
useElement.addEventListener("load", filterLoaded);
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "resources/blur.svg#blur");
svgElement.appendChild(useElement);

useElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
useElement.addEventListener("load", filterLoaded);
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "resources/hue-rotate.svg#hue-rotate");
svgElement.appendChild(useElement);

document.body.appendChild(svgElement);
</script>