filter-reference-in-shadow-tree.html

<!DOCTYPE html>
<style>
    body {
        margin: 0;
    }
</style>
<svg style="display:none;">
    <rect id="filteredRectReference" width="100" height="100" fill="red" />
    <filter id="filterReference">
        <feImage x="0" y="0" width="100" height="10" xlink:href="#filteredRectReference"/>
    </filter>
</svg>
<template id="template">
    <div style="width: 100px; height: 100px; background-color: red; -webkit-filter: url(#filterReference);"></div>
    <svg width="100" height="100">
        <defs>
            <rect id="filteredRectReference" width="100" height="100" fill="green" />
            <filter id="filterReference">
                <feImage x="0" y="0" width="100" height="100" xlink:href="#filteredRectReference"/>
            </filter>
        </defs>
    </svg>
</template>
<script>
    document.body.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));
</script>

chromium/third_party/blink/web_tests/svg/dom/filter-reference-in-shadow-tree.html