Refactor of various layout tests to use RAF

LayoutTests/svg/custom/js-late-mask-and-object-creation.svg

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">  
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg-root" width="100%" height="100%" viewBox="0 0 800 600" onload="runRepaintAndPixelTest()">
 <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
 
 <g id="content"/>
 
 <script>
     window.testIsAsync = true;
     var content = document.getElementById("content");
 
     function repaintTest() {
-        setTimeout(createObject, 0);
+        requestAnimationFrame(createObject);
     }
 
     function createObject()
     {
         var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
         rect.setAttribute("width", "800");
         rect.setAttribute("height", "100");
         rect.setAttribute("y", "100");
         rect.setAttribute("fill", "blue");
         rect.setAttribute("mask", "url(#dynMask)");
 
         content.appendChild(rect);
-        setTimeout(createMask, 0);
+        requestAnimationFrame(createMask);
     }
 
     function createMask()
     {
         var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
         mask.setAttribute("id", "dynMask");
         mask.setAttribute("maskUnits", "userSpaceOnUse");
         mask.setAttribute("x", "0");
         mask.setAttribute("y", "0");
         mask.setAttribute("width", "800");
         mask.setAttribute("height", "300");
 
         var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
         rect.setAttribute("width", "800");
         rect.setAttribute("height", "300");
         rect.setAttribute("fill", "red");
 
         mask.appendChild(rect);
         content.appendChild(mask);
 
         finishRepaintTest();
     }
 </script>
 
 </svg>