<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg>
  <defs>
    <rect x="0" y="0" width="100" height="40" id="target" fill="green" />
    <rect x="100" y="0" width="100" height="40" id="expected" fill="red" />
    <use xlink:href="#target" id="use"/>
  </defs>

  <use y="50" xlink:href="#expected"/>
  <use y="100" xlink:href="#expected"/>

  <use y="50" xlink:href="#target"/>
  <use y="100" xlink:href="#use"/>
</svg>
<script>
runAfterLayoutAndPaint(function() {
  target.animate([{'x': '100px'}, {'x': '100px'}], {fill: 'forwards'});
}, true);
</script>