blob: b348baaf7fcaf67c47d7e8e992e28b9dba643fae [file] [log] [blame]
<!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>