<!DOCTYPE html>
<html>
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=3800-4400" />
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="host" style="width: 100px; height: 100px;"></div>
<svg>
    <radialGradient id="gradient">
        <stop offset="0%" stop-color="red" />
    </radialGradient>
</svg>
<template>
    <svg viewbox="0 0 100 100">
        <radialGradient id="gradient">
            <stop offset="0%" stop-color="green" />
        </radialGradient>
        <radialGradient id="gradientUse" fill="red" href="#gradient"></radialGradient>
        <rect id="rect" width="100" height="100" fill="url(#gradientUse)">
    </svg>
</template>
<script>

const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));

</script>
</body>
</html>
