Convert svg repaint tests to pixel test only repaint

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="startTest()" width="1000" height="600">
-    <script xlink:href="../../fast/repaint/resources/repaint.js" type="text/javascript"></script>
+    <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=""/>
     </g>
 <script>
     var green = "data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
     var red = "data:image/gif;base64,R0lGODlhAQABAIAAAP8AAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
 
     var count = 0;
     function startTest() {
         if (count == 0)
-            runRepaintTest();
+            runRepaintAndPixelTest();
         count = count + 1;
     }
 
     var r = document.querySelector('#r');
     var g = document.querySelector('#g');
     var i = document.querySelector('image');
     var update = function(offset, size, img) {
         r.setAttribute('x', -size / 2);
         r.setAttribute('y', -size / 2);
         r.setAttribute('width', size);
@@ skipping 16 matching lines @@
         i.onload = function() { setTimeout(finishTest, 0); };
         update(200, 50, green);
     }
 
     function repaintTest() {
         i.onload = function() { setTimeout(nextStep, 0); };
         update(50, 100, red);
     }
 </script>
 </svg>