43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<!--
|
|
Ensure that when a <use> element inside an inline SVG references another
|
|
target SVG element, which has not been defined yet, gets its shadow DOM
|
|
tree updated once the target element is created. Updating the shadow DOM
|
|
tree of the <use> element should update the corresponding shadow render
|
|
tree as well.
|
|
|
|
https://bugs.webkit.org/show_bug.cgi?id=139451
|
|
-->
|
|
<html>
|
|
<body>
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<!-- Early target elements' definition -->
|
|
<defs>
|
|
<g id="yellow-lime-rect">
|
|
<rect x="0" y="0" width="100" height="50" fill="yellow"/>
|
|
<use xlink:href="#lime-rect"/>
|
|
</g>
|
|
</defs>
|
|
|
|
<!-- draw two red rectangles -->
|
|
<rect x="10" y="10" width="100" height="50" fill="red"/>
|
|
<rect x="120" y="10" width="100" height="50" fill="red"/>
|
|
|
|
<!-- Overdraw the two red rectangles with two other lime rectangles -->
|
|
<use x="10" y="10" xlink:href="#yellow-lime-rect"/>
|
|
<use x="120" y="10" xlink:href="#orange-lime-rect"/>
|
|
|
|
<!-- Late target elements' definition -->
|
|
<defs>
|
|
<g id="orange-lime-rect">
|
|
<rect x="0" y="0" width="100" height="50" fill="orange"/>
|
|
<use xlink:href="#lime-rect"/>
|
|
</g>
|
|
<g id="lime-rect">
|
|
<rect x="0" y="0" width="100" height="50" fill="lime"/>
|
|
</g>
|
|
</defs>
|
|
</svg>
|
|
</body>
|
|
</html>
|