blob: f1eae7fbf69825bc8e1c551d3b7a1724d5bbb4ba [file] [log] [blame]
<!DOCTYPE HTML>
<script>
document.registerElement("x-g", { extends: "g", prototype: {
__proto__: SVGGElement.prototype,
createdCallback: function() {
var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
greenBox.setAttribute('width', '20');
greenBox.setAttribute('height', '20');
greenBox.setAttribute('fill', 'green');
this.createShadowRoot().appendChild(greenBox);
}
}
});
document.registerElement("x-green", { extends: "g", prototype: {
__proto__: SVGGElement.prototype,
createdCallback: function() {
var shadow = this.createShadowRoot();
var style = document.createElement('style');
style.appendChild(document.createTextNode(':host::shadow * { fill: green; }'));
shadow.appendChild(style);
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '20');
rect.setAttribute('height', '20');
shadow.appendChild(rect);
}
}
});
document.registerElement("x-pass", { extends: "text", prototype: {
__proto__: SVGTextElement.prototype,
createdCallback: function() {
this.innerHTML = this.innerHTML.replace('FAIL', 'PASS');
}
}
});
</script>
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
<g is="x-g">
<rect width="100" height="100" fill="red"></rect>
</g>
</svg><br>
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="use-green" width="20" height="20" fill="green"></rect>
</defs>
<use xlink:href="#use-green"></use>
</svg><br>
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
<g is="x-green">
<rect width="100" height="100" fill="red"></rect>
</g>
</svg><br>
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
<text is="x-pass" font-size="10px" y="20">FAIL</text>
</svg>