Bug 474669. Use reftest invalidation support to improve the SVG dynamic reftests. r=roc

layout/reftests/svg/dynamic-clipPath-01.svg

@@ -4,7 +4,7 @@
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      class="reftest-wait"
-     onload="setTimeout(doTest,500)"
+     onload="startTest()"
      xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>Testing that dynamic changes to the element for a given ID are reflected in clip-path</title>
   <defs>
@@ -80,6 +80,12 @@
   <rect x="90%" width="11%" height="100%" fill="lime"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     // check that changing an id to "r2" lets u2 find it
     var r2 = document.getElementById("x");

layout/reftests/svg/dynamic-gradient-contents-01.svg

@@ -4,7 +4,7 @@
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
      xmlns:xlink="http://www.w3.org/1999/xlink"
-     onload="setTimeout(doTest, 500)">
+     onload="startTest()">
   <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title>
   <style>
     .foo stop { stop-color:lime; }
@@ -19,6 +19,12 @@
   <rect id="u1" width="100%" height="100%" fill="url(#g)"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     document.getElementById("g").setAttribute("class", "foo");
     document.documentElement.removeAttribute("class");

layout/reftests/svg/dynamic-mask-contents-01.svg

@@ -2,7 +2,7 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
-<svg xmlns="http://www.w3.org/2000/svg" onload="setTimeout(doTest,500)" class="reftest-wait">
+<svg xmlns="http://www.w3.org/2000/svg" onload="startTest()" class="reftest-wait">
   <style>
   .foo .maskrect { fill:white; }
   </style>
@@ -16,6 +16,12 @@
   <rect id="rect" width="100%" height="100%" fill="lime" mask="url(#m1)"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     document.getElementById("d").setAttribute("class", "foo");
     document.documentElement.removeAttribute("class");

layout/reftests/svg/dynamic-pattern-01.svg

@@ -3,7 +3,7 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
-     xmlns:xlink="http://www.w3.org/1999/xlink" onload="setTimeout(doTest,500)">
+     xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()">
   <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title>
 
   <rect id="u1" x="10%" width="11%" height="100%" fill="url(#r1)"/>
@@ -70,6 +70,12 @@
   <rect x="90%" width="11%" height="100%" fill="lime"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     // check that changing an id to "r2" lets u2 find it
     var r2 = document.getElementById("x");

layout/reftests/svg/dynamic-pattern-02.svg

@@ -3,7 +3,7 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
-     xmlns:xlink="http://www.w3.org/1999/xlink" onload="setTimeout(doTest,500)">
+     xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()">
   <title>Testing that href changes are live</title>
   <defs>
     <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse">
@@ -18,6 +18,12 @@
   <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     document.getElementById("r1").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r2");
     document.documentElement.removeAttribute("class");

layout/reftests/svg/dynamic-pattern-contents-01.svg

@@ -3,7 +3,7 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
-     xmlns:xlink="http://www.w3.org/1999/xlink" onload="setTimeout(doTest,500)">
+     xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()">
   <title>Testing that style changes are reflected in patterns</title>
   <style>
     .foo { fill:lime; }
@@ -21,6 +21,12 @@
   <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     document.getElementById("d").setAttribute("class", "foo");
     document.documentElement.removeAttribute("class");

layout/reftests/svg/dynamic-pattern-contents-02.svg

@@ -3,7 +3,7 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
-     xmlns:xlink="http://www.w3.org/1999/xlink" onload="setTimeout(doTest,500)">
+     xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()">
   <title>Testing that ID-map changes are tracked by pattern inheritance</title>
   <defs>
     <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse" xlink:href="#r2">
@@ -18,6 +18,12 @@
   <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+
   function doTest() {
     document.getElementById("r0").setAttribute("id", "r2");
     document.documentElement.removeAttribute("class");

layout/reftests/svg/dynamic-textPath-01.svg

@@ -2,7 +2,7 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait" onload="setTimeout(doTest,10)" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait" onload="startTest()" xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>Testing that dynamic changes to the element for a given ID are reflected in textPath</title>
   <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458010 -->
   <defs>
@@ -14,6 +14,12 @@
   </text>
 
   <script>
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
+  
   function doTest() {
     // check that changing an id to "m1" lets l1 find it
     var x = document.getElementById("x");

layout/reftests/svg/foreignObject-ancestor-style-change-01.svg

@@ -3,7 +3,7 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-     onload="handle_load();" class="reftest-wait">
+     onload="startTest()" class="reftest-wait">
 
   <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=381285 -->
 
@@ -16,22 +16,17 @@
 
   <script>
 
-function handle_load()
-{
-  setTimeout(change_font_size, 50); // allow some time for layout and rendering
-}
-
-function change_font_size()
-{
-  document.getElementById('g').style.fontSize = '16px';
-  setTimeout(notify_test_finished, 50); // allow some time for layout and rendering
-}
-
-function notify_test_finished()
-{
-  document.documentElement.removeAttribute('class');
-}
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
 
+  function doTest() {
+    document.getElementById('g').style.fontSize = '16px';
+    
+    document.documentElement.removeAttribute('class');
+  }
   </script>
 
   <g id="g" style="font-size: 26px;">

layout/reftests/svg/foreignObject-change-transform-01.svg

@@ -5,7 +5,7 @@
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:html="http://www.w3.org/1999/xhtml"
      class="reftest-wait"
-     onload="setTimeout(remove_transform, 100);">
+     onload="startTest()">
 
   <title>Testcase for changing the 'transform' on foreignObject</title>
 
@@ -13,21 +13,21 @@
 
   <script type="application/javascript">
 
-// The foreignObject is inverted so that it is outside the viewport. After
-// 100 ms (to give the red rect a chance to render), the transform on the
+// The foreignObject is inverted so that it is outside the viewport.
+// After the rect has rendered the transform on the 
 // foreignObject is removed and the green div should fill the viewport.
 
-function remove_transform()
-{
-  document.getElementById('fo').setAttribute('transform', '');
-  setTimeout(finish_test, 100); // give the user agent some time to repaint
-}
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
 
-function finish_test()
-{
-  document.documentElement.removeAttribute('class');
-}
+  function doTest() {
+    document.getElementById('fo').setAttribute('transform', '');
 
+    document.documentElement.removeAttribute('class');
+  }
   </script>
   <rect width="100%" height="100%" fill="red"/>
   <foreignObject id="fo" width="100%" height="100%" transform="scale(-1)">

layout/reftests/svg/foreignObject-move-repaint-01.svg

@@ -5,7 +5,7 @@
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:html="http://www.w3.org/1999/xhtml"
      class="reftest-wait"
-     onload="setTimeout(move_foreignObject, 100);">
+     onload="startTest()">
 
   <title>Testcase for repaint of the area previously covered by a foreignObject</title>
 
@@ -13,21 +13,21 @@
 
   <script type="application/javascript">
 
-// The green rect is initially covered by the red div. After 100 ms (to give
-// the div a chance to render), the foreignObject (and thus div) is moved out
+// The green rect is initially covered by the red div. After the div
+// has rendered the foreignObject (and thus div) is moved out
 // of the viewport which should then be filled by the green rect as a result.
 
-function move_foreignObject()
-{
-  document.getElementById('fo').setAttribute('y', '100%');
-  setTimeout(finish_test, 100); // give the user agent some time to repaint
-}
+  function startTest() {
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    // in case we're not gecko
+    setTimeout(doTest, 5000);
+  }
 
-function finish_test()
-{
-  document.documentElement.removeAttribute('class');
-}
+  function doTest() {
+    document.getElementById('fo').setAttribute('y', '100%');
 
+    document.documentElement.removeAttribute('class');
+  }
   </script>
 
   <rect width="100%" height="100%" fill="red"/>