<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
window.testIsAsync = true;
window.onload = runRepaintAndPixelTest;

function repaintTest() {
  runAfterLayoutAndPaint(function() {
    document.querySelector('#r').setAttribute('fill', 'green');
    if (window.testRunner)
      finishRepaintTest();
  });
};
</script>
<style>
g {
  outline: 50px solid lightblue;
}
rect#r {
  outline: 50px solid blue;
}
</style>
<svg width="500" height="500">
  <g transform="translate(50 50)">
    <rect width="400" height="100"/>
    <rect y="300" width="400" height="100"/>
    <rect id="r" x="100" y="100" width="200" height="200" fill="blue"/>
  </g>
</svg>