Given the following HTML file:
resource.svg looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
The div box in the HTML file will not get filtered.
Replace <feFlood> with <feColorMatrix> and it will work just fine. The reason is probably the following:
We download the SVG file as expected and store the reference to the created SVG document. We have a proper pending resource management. The style resolving process can access the SVG document and more important the SVG fe-primitives just fine.
However, feFlood needs a RenderObject, feColorMatrix doesn't. This is mainly because feFlood has flood-color and flood-opacity: two CSS properties. feColorMatrix doesn't depend on CSS properties and we can get all information from the DOM.
It means, we never create a render tree for the external SVG file. It might even be that the problem existed the whole time. That might explain why certain external SVG filter examples never worked in Safari or Chrome.
We need to create a Render tree for the external SVG filters. Or find a way to have style resolving (with proper updating) without the help of RenderObject.
Currently we don't even call loadExternalDocumentIfNeeded() for reference filters in the CSS filter code path.