Refactor of various layout tests to use RAF

LayoutTests/svg/custom/use-detach.svg

 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250" onload="runRepaintAndPixelTest()">
   <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
+  <script xlink:href="../../resources/run-after-display.js"/>
   <script type="text/javascript">
   <![CDATA[
     window.testIsAsync = true;
     function repaintTest() {
       var elem = document.getElementById('use');
       elem.setAttributeNS(null,'display','inline');
-      window.setTimeout("step2()", 0);
+      runAfterDisplay(step2);
     }
     function step2() {
       var elem = document.getElementById('use');
       elem.setAttributeNS(null,'display','none');
-      window.setTimeout("step3()", 0);
+      runAfterDisplay(step3);
     }
     function step3() {
       var elem = document.getElementById('use');
       elem.setAttributeNS(null,'display','inline');
       finishRepaintTest();
     }
   ]]>
   </script>
   <g transform="matrix(1 0 0 1 5 5)">
     <defs>
       <text id="use_text" x="50" y="31" font-size="12" text-anchor="middle">use</text>
       <circle id="use_circle" r="5" cx="50" cy="40" fill="#ff0000"/>
 
     </defs>
     <g id="use" stroke="#000000" fill="#000000" display="none">
       <use xlink:href="#use_text"/>
       <use xlink:href="#use_circle"/>
     </g>
     <rect x="0" y="0" width="100" height="50" opacity="0.2"/>
   </g>
   <g transform="matrix(1 0 0 1 10 70)">
     <text font-family="'Courier'" font-size="12">
 
       <tspan x="0" y="0">For this test case to be successful, the</tspan>
       <tspan x="0" y="15">box above must show text and a circle. </tspan>
       <tspan x="0" y="30">Bug 14927</tspan>
     </text>
   </g>
 </svg>