| <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, 90, 90); |
| ctx.filter = 'url(resources/blur.svg#blur)'; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(20, 20, 30, 30); |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| 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", draw); |
| useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "resources/blur.svg#blur"); |
| svgElement.appendChild(useElement); |
| document.body.appendChild(svgElement); |
| </script> |