references-in-shadow-trees.html | Explore in Territory

<!DOCTYPE html>
<svg style="display:none;">
    <rect id="useReference" width="200" height="200" fill="red" />
    <path id="pathReference1" d="M0 160 L 100 160" />
    <path id="pathReference2" d="M1000 1000 L 2000 2000" />
    <rect id="filteredRectReference" width="100" height="100" fill="red" />
    <pattern id="patternReference" width="100" height="100" viewBox="0 0 100 100">
        <rect width="100" height="20" fill="red"/>
    </pattern>
</svg>
<template id="template">
    <svg width="200" height="500">
        <defs>
            <rect id="useReference" width="100" height="100" fill="green" />
            <path id="pathReference1" d="M1000 1000 L 2000 2000" />
            <path id="pathReference2" d="M0 160 L 100 160" />
            <rect id="filteredRectReference" width="100" height="100" fill="green" />
            <filter id="filterReference">
                <feImage x="0" y="200" width="100" height="100" xlink:href="#filteredRectReference"/>
            </filter>
            <pattern id="patternReference" width="100" height="100" viewBox="0 0 100 100">
                <rect width="100" height="100" fill="green"/>
            </pattern>
        </defs>
        <use xlink:href="#useReference" />
        <text>
            <textPath xlink:href="#pathReference1" fill="red" font-size="40px">FAIL</textPath>
            <textPath xlink:href="#pathReference2" fill="green" font-size="40px">PASS</textPath>
        </text>
        <rect width="200" height="300" fill="red" filter="url(#filterReference)" />
        <rect y="300" width="100" height="100" fill="url(#patternReference)" />
    </svg>
</template>
<script>
    document.body.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));
</script>
chromium/third_party/blink/web_tests/svg/dom/references-in-shadow-trees.html
