Refactor of various layout tests to use RAF

LayoutTests/svg/repaint/image-with-clip-path.svg

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintAndPixelTest()">
     <script xlink:href="../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
     <text y="-10">Bug 76559: All red should disappear</text>
     <g id="g" transform="translate(0, 0)">
         <defs>
             <clipPath id="p">
                 <rect id="r" x="-10" y="-10" width="20" height="20" />
             </clipPath>
         </defs>
         <image x="-30" y="-30" width="60" height="60" clip-path="url(#p)" xlink:href=""/>
@@ skipping 13 matching lines @@
         r.setAttribute('height', size);
         g.setAttribute("transform","translate(" + offset + ",50)");
         i.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img);
     };
 
     function finishTest() {
         finishRepaintTest();
     }
 
     function nextStep() {
-        i.onload = function() { setTimeout(finishTest, 0); };
+        i.onload = function() { requestAnimationFrame(finishTest); };
         update(200, 50, green);
     }
 
     function repaintTest() {
-        i.onload = function() { setTimeout(nextStep, 0); };
+        // Nested RAF to ensure enough time elapsed for repaint logging to occur
+        i.onload = function() {
+            requestAnimationFrame(function() {
+                requestAnimationFrame(nextStep);
+            });
+        };
         update(50, 100, red);
     }
 </script>
 </svg>