42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!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="text1">FAIL FAIL</text>
|
|
<text id="text2">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="#text1"></tref>
|
|
</text>
|
|
</svg>
|
|
</template>
|
|
<script>
|
|
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
const shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));
|
|
|
|
window.onload = () => {
|
|
requestAnimationFrame(() => {
|
|
shadowRoot.querySelector('tref').setAttribute('href', '#text2');
|
|
if (window.testRunner)
|
|
requestAnimationFrame(() => testRunner.notifyDone());
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|