blob: 424c18c9fbd2a2d3650aa4268d55ce9856497645 [file] [log] [blame]
<!DOCTYPE html>
<html>
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=3800-4000" />
<style>
#host {
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div id="host"></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="blue-gradient">
<stop offset="0" stop-color="blue" />
</radialGradient>
<radialGradient id="gradientUse" fill="red" href="#blue-gradient" />
<rect id="rect" width="100" height="100" fill="url(#gradientUse)" />
</svg>
</template>
<script>
window.onload = () => {
if (window.testRunner)
testRunner.waitUntilDone();
const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));
requestAnimationFrame(() => {
shadowRoot.querySelector('#gradientUse').setAttribute('href', '#gradient');
if (window.testRunner)
testRunner.notifyDone();
});
}
</script>
</body>
</html>