30 lines
774 B
HTML
30 lines
774 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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>
|
|
<defs>
|
|
<rect id="rect" width="100" height="100" fill="red" />
|
|
</defs>
|
|
</svg>
|
|
<template>
|
|
<svg viewbox="0 0 100 100">
|
|
<defs>
|
|
<rect id="rect" width="100" height="100" fill="green" />
|
|
<filter id="image">
|
|
<feImage href="#rect" />
|
|
</filter>
|
|
</defs>
|
|
<rect id="rect" width="100" height="100" style="filter:url(#image)">
|
|
</svg>
|
|
</template>
|
|
<script>
|
|
|
|
const shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|