| <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> |