<!--
    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>