<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        height: 100px;
        width: 100px;
        background-color: red;
      }
      .changed {
        background-color: green;
      }
      pre {
        color: transparent;
      }
    </style>
  </head>
  <body>
    <svg width="100%" height="300">
      <g transform="translate(50, 50)">
        <foreignobject width="100" height="100" stroke="blue">
          <div class="box"/>
        </foreignobject>
      </g>
    </svg>
    <script>
      if (window.testRunner)
        testRunner.dumpAsText(true);

      function changeBackground() {
        var elements = document.getElementsByClassName("box");
        elements[0].classList.add('changed');
        
        if (window.testRunner && window.internals) {
          var dummy = document.body.offsetTop;
          var repaintRects = window.internals.repaintRectsAsText();
          window.internals.stopTrackingRepaints();

          var pre = document.createElement('pre');
          document.body.appendChild(pre);
          pre.innerHTML = repaintRects;
          testRunner.notifyDone();
        }
      }
      
      if (window.testRunner && window.internals) {
        window.internals.startTrackingRepaints();
        testRunner.waitUntilDone();
      }
    
      setTimeout(changeBackground, 20);
    </script>
  </body>
</html>