<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below with "PASS" in the middle.</p>
<div id="host" style="width: 100px; height: 100px;"></div>
<svg>
    <defs>
        <text id="text">FAIL FAIL FAIL</text>
    </defs>
</svg>
<template>
    <svg viewbox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <text id="text">PASS</text>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill="green"></rect>
        <text x="0" y="0">
            <tref alignment-baseline="middle" y="50" xlink:href="#text"></tref>
        </text>
    </svg>
</template>
<script>

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

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