<!DOCTYPE html>
<svg width="100" height="100">
  <polygon id="ref" points="20,10 10,30 30,30 40,10" fill="red"></polygon>
  <polygon id="target" points="20,10 10,30 30,30" fill="green"></polygon>
  <polygon id="source" points="20,20" fill="blue"></polygon>
</svg>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
testIsAsync = true;
window.onload = runRepaintTest;

function repaintTest() {
    var moved = document.querySelector('#source').points.removeItem(0);
    document.querySelector('#target').points.appendItem(moved);

    requestAnimationFrame(function() {
        moved.x = 40;
        moved.y = 10;
        if (window.testRunner)
            finishRepaintTest();
    });
}
</script>