Bug 768766 - Make css-valid tests use MozReftestInvalidate and mark them as fuzzy. r=roc
authorMatt Woodrow <mwoodrow@mozilla.com>
Wed, 29 Aug 2012 17:48:44 +1200
changeset 108387 39e70f91d826c8599de710a37049051d756c2946
parent 108386 e004a9acf00d936b6f938d1390188b6f9eb94c3a
child 108388 625343f34ca2b6450a9ca698a22074a60851b429
push id82
push usershu@rfrn.org
push dateFri, 05 Oct 2012 13:20:22 +0000
reviewersroc
bugs768766
milestone18.0a1
Bug 768766 - Make css-valid tests use MozReftestInvalidate and mark them as fuzzy. r=roc
layout/reftests/css-invalid/input/input-customerror.html
layout/reftests/css-invalid/input/input-type-invalid.html
layout/reftests/css-invalid/input/reftest.list
layout/reftests/css-invalid/textarea/reftest.list
layout/reftests/css-invalid/textarea/textarea-customerror.html
layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
layout/reftests/css-ui-invalid/input/input-customerror.html
layout/reftests/css-ui-invalid/input/input-type-invalid.html
layout/reftests/css-ui-invalid/input/reftest.list
layout/reftests/css-ui-invalid/textarea/reftest.list
layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-disabled.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-disabled.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-changed.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-not-changed.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
layout/reftests/css-ui-invalid/textarea/textarea-required-invalid-changed.html
layout/reftests/css-ui-valid/input/input-customerror.html
layout/reftests/css-ui-valid/input/input-type-invalid.html
layout/reftests/css-ui-valid/input/reftest.list
layout/reftests/css-ui-valid/select/reftest.list
layout/reftests/css-ui-valid/select/select-required-multiple-valid-changed.html
layout/reftests/css-ui-valid/textarea/reftest.list
layout/reftests/css-ui-valid/textarea/textarea-customerror.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-disabled.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled-changed.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly-changed.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-readonly.html
layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid-changed.html
layout/reftests/css-valid/input/input-customerror.html
layout/reftests/css-valid/input/input-type-invalid.html
layout/reftests/css-valid/input/reftest.list
layout/reftests/css-valid/textarea/reftest.list
layout/reftests/css-valid/textarea/textarea-customerror.html
layout/reftests/css-valid/textarea/textarea-dyn-disabled.html
layout/reftests/css-valid/textarea/textarea-dyn-not-disabled.html
layout/reftests/css-valid/textarea/textarea-dyn-not-readonly.html
layout/reftests/css-valid/textarea/textarea-dyn-readonly.html
--- a/layout/reftests/css-invalid/input/input-customerror.html
+++ b/layout/reftests/css-invalid/input/input-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if input has a custom error, it should be affected by :invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <input class='invalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-type-invalid.html
+++ b/layout/reftests/css-invalid/input/input-type-invalid.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has a custom error when barred from constraint
              validation then move a type candidate for constraint validation,
              it should not be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <input class='invalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/reftest.list
+++ b/layout/reftests/css-invalid/input/reftest.list
@@ -1,10 +1,10 @@
 == input-valid.html input-ref.html
-== input-customerror.html input-ref.html
+fuzzy(11,4) == input-customerror.html input-ref.html
 fails-if(Android) == input-disabled.html input-ref.html
 fails-if(Android) == input-dyn-disabled.html input-ref.html
 == input-dyn-not-disabled.html input-ref.html
 == input-readonly.html input-ref.html
 == input-dyn-readonly.html input-ref.html
 == input-dyn-not-readonly.html input-ref.html
 == input-maxlength-valid.html input-ref.html
 == input-maxlength-invalid.html input-withtext-ref.html
@@ -14,17 +14,17 @@ fails-if(Android) == input-dyn-disabled.
 == input-reset.html input-button-ref.html
 == input-email-invalid.html input-withtext-ref.html
 == input-email-valid.html input-email-ref.html
 == input-url-invalid.html input-withtext-ref.html
 == input-url-valid.html input-url-ref.html
 == input-pattern-valid.html input-withtext-ref.html
 == input-pattern-invalid.html input-withtext-ref.html
 == input-type-barred.html input-button-ref.html
-== input-type-invalid.html input-ref.html
+fuzzy(11,4) == input-type-invalid.html input-ref.html
 == input-disabled-fieldset-1.html input-fieldset-ref.html
 == input-disabled-fieldset-2.html input-fieldset-ref.html
 == input-fieldset-legend.html input-fieldset-legend-ref.html
 == input-radio-required.html input-radio-ref.html
 == input-radio-customerror.html input-radio-ref.html
 == input-radio-dyn-valid-1.html input-radio-checked-ref.html
 == input-radio-dyn-valid-2.html input-radio-ref.html
 == input-radio-nogroup-required-valid.html input-radio-ref.html
--- a/layout/reftests/css-invalid/textarea/reftest.list
+++ b/layout/reftests/css-invalid/textarea/reftest.list
@@ -1,15 +1,15 @@
 == textarea-valid.html textarea-ref.html
-== textarea-customerror.html textarea-ref.html
+fuzzy(11,4) == textarea-customerror.html textarea-ref.html
 fails-if(Android) == textarea-disabled.html textarea-ref.html
-fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
-== textarea-dyn-not-disabled.html textarea-ref.html
+fuzzy(11,4) fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-disabled.html textarea-ref.html
 == textarea-readonly.html textarea-ref.html
-== textarea-dyn-readonly.html textarea-ref.html
-== textarea-dyn-not-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly.html textarea-ref.html
 == textarea-maxlength-valid.html textarea-ref.html
 == textarea-maxlength-invalid.html textarea-withtext-ref.html
 == textarea-required-valid.html textarea-withtext-ref.html
 == textarea-required-invalid.html textarea-ref.html
 == textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
 == textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
 == textarea-fieldset-legend.html textarea-fieldset-legend-ref.html
--- a/layout/reftests/css-invalid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-invalid/textarea/textarea-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea has a custom error, it should be affected by :invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <textarea class='invalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is disabled and invalid, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <textarea class='notinvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is not disabled and invalid, it is candidate for
              constraint validation and should be affected
              by :invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <textarea class='invalid' id='t' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly, it is candidate for constraint
              validation and should be affected by :invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
+  <body>
     <textarea class='invalid' id='t' readonly required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').readOnly='ro';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
+  <body>
     <textarea class='notinvalid' id='t' required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/input/input-customerror.html
+++ b/layout/reftests/css-ui-invalid/input/input-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if input has a custom error, it should be affected by :-moz-ui-invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <input class='invalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/input/input-type-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-type-invalid.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has a custom error when barred from constraint
              validation then move a type candidate for constraint validation,
              it should not be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <input class='invalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/input/reftest.list
+++ b/layout/reftests/css-ui-invalid/input/reftest.list
@@ -1,10 +1,10 @@
 == input-valid.html input-ref.html
-== input-customerror.html input-ref.html
+fuzzy(64,4) == input-customerror.html input-ref.html
 fails-if(Android) == input-disabled.html input-ref.html
 fails-if(Android) == input-dyn-disabled.html input-ref.html
 == input-dyn-not-disabled.html input-ref.html
 == input-readonly.html input-ref.html
 == input-dyn-readonly.html input-ref.html
 == input-dyn-not-readonly-not-changed.html input-ref.html
 == input-dyn-not-readonly-changed.html input-ref.html
 == input-maxlength-valid.html input-ref.html
@@ -20,17 +20,17 @@ fails-if(Android) == input-dyn-disabled.
 == input-email-valid.html input-email-ref.html
 == input-url-invalid-changed.html input-withtext-ref.html
 == input-url-invalid-default.html input-withtext-ref.html
 == input-url-valid.html input-url-ref.html
 == input-pattern-valid.html input-withtext-ref.html
 == input-pattern-invalid-default.html input-withtext-ref.html
 == input-pattern-invalid-changed.html input-withtext-ref.html
 == input-type-barred.html input-button-ref.html
-== input-type-invalid.html input-ref.html
+fuzzy(64,4) == input-type-invalid.html input-ref.html
 == input-disabled-fieldset-1.html input-fieldset-ref.html
 == input-disabled-fieldset-2.html input-fieldset-ref.html
 == input-fieldset-legend.html input-fieldset-legend-ref.html
 == input-checkbox-required-invalid-changed.html success-ref.html
 == input-checkbox-required-invalid-default.html success-ref.html
 == input-radio-required-invalid-changed.html success-ref.html
 == input-radio-required-invalid-default.html success-ref.html
 == input-file-required-invalid-changed.html input-file-ref.html
--- a/layout/reftests/css-ui-invalid/textarea/reftest.list
+++ b/layout/reftests/css-ui-invalid/textarea/reftest.list
@@ -1,18 +1,18 @@
 == textarea-valid.html textarea-ref.html
-== textarea-customerror.html textarea-ref.html
+fuzzy(11,4) == textarea-customerror.html textarea-ref.html
 fails-if(Android) == textarea-disabled.html textarea-ref.html
-fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
-== textarea-dyn-not-disabled.html textarea-ref.html
+fuzzy(11,4) fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-disabled.html textarea-ref.html
 == textarea-readonly.html textarea-ref.html
-== textarea-dyn-readonly.html textarea-ref.html
-== textarea-dyn-not-readonly-not-changed.html textarea-ref.html
-== textarea-dyn-not-readonly-changed.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly-not-changed.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly-changed.html textarea-ref.html
 == textarea-maxlength-valid.html textarea-ref.html
 == textarea-maxlength-invalid.html textarea-withtext-ref.html
 == textarea-maxlength-default-value-invalid.html textarea-withtext-ref.html
 == textarea-required-valid.html textarea-withtext-ref.html
 == textarea-required-invalid.html textarea-ref.html
-== textarea-required-invalid-changed.html textarea-ref.html
+fuzzy(11,4) == textarea-required-invalid-changed.html textarea-ref.html
 == textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
 == textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
 == textarea-novalidate.html textarea-ref.html
--- a/layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea has a custom error, it should be affected by :-moz-ui-invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <textarea class='invalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-disabled.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is disabled and invalid, it is barred from constraint
              validation and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <textarea class='notinvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-disabled.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is not disabled and invalid, it is candidate for
              constraint validation and should be affected
              by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <textarea class='invalid' id='t' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-changed.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-changed.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.getElementById('t').value = '';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly and has it's value changed,
              it's affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly');
-                document.getElementById('t').value = '';
-                document.documentElement.className='';">
+  <body>
     <textarea class='invalid' id='t' readonly required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-not-changed.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly-not-changed.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly, but doesn't have it's value changed,
              it's not affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
+  <body>
     <textarea class='notinvalid' id='t' readonly required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').readOnly='ro';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
+  <body>
     <textarea class='notinvalid' id='t' required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-invalid/textarea/textarea-required-invalid-changed.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-required-invalid-changed.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').value = '';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea isn't valid and it's value has been changed,
              it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').value = '';
-                document.documentElement.className='';">
+  <body>
     <textarea id='t' class='invalid' required></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-ui-valid/input/input-customerror.html
+++ b/layout/reftests/css-ui-valid/input/input-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if input has a custom error, it should not be affected by :-moz-ui-valid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <input class='notvalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/input/input-type-invalid.html
+++ b/layout/reftests/css-ui-valid/input/input-type-invalid.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has a custom error when barred from constraint
              validation then move a type candidate for constraint validation,
              it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <input class='notvalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/input/reftest.list
+++ b/layout/reftests/css-ui-valid/input/reftest.list
@@ -1,10 +1,10 @@
 == input-valid.html input-ref.html
-== input-customerror.html input-ref.html
+fuzzy(11,4) == input-customerror.html input-ref.html
 fails-if(Android) == input-disabled.html input-ref.html
 fails-if(Android) == input-dyn-disabled.html input-ref.html
 == input-dyn-not-disabled.html input-ref.html
 == input-dyn-not-disabled-changed.html input-ref.html
 == input-readonly.html input-ref.html
 == input-dyn-readonly.html input-ref.html
 == input-dyn-not-readonly.html input-ref.html
 == input-dyn-not-readonly-changed.html input-ref.html
@@ -21,17 +21,17 @@ fails-if(Android) == input-dyn-disabled.
 == input-email-valid-changed.html input-email-ref.html
 == input-url-invalid.html input-withtext-ref.html
 == input-url-valid.html input-url-ref.html
 == input-url-valid-changed.html input-url-ref.html
 == input-pattern-valid.html input-withtext-ref.html
 == input-pattern-valid-changed.html input-withtext-ref.html
 == input-pattern-invalid.html input-withtext-ref.html
 == input-type-barred.html input-button-ref.html
-== input-type-invalid.html input-ref.html
+fuzzy(64,4) == input-type-invalid.html input-ref.html
 == input-disabled-fieldset-1.html input-fieldset-ref.html
 == input-disabled-fieldset-2.html input-fieldset-ref.html
 == input-fieldset-legend.html input-fieldset-legend-ref.html
 == input-checkbox-valid-changed.html success-ref.html
 == input-checkbox-valid-default.html success-ref.html
 == input-file-valid-changed.html input-file-ref.html
 == input-file-valid-default.html input-file-ref.html
 == input-radio-required.html success-ref.html
--- a/layout/reftests/css-ui-valid/select/reftest.list
+++ b/layout/reftests/css-ui-valid/select/reftest.list
@@ -6,13 +6,13 @@ needs-focus == select-dyn-disabled.html 
 needs-focus == select-dyn-not-disabled.html select-ref.html
 needs-focus == select-required-invalid.html select-required-ref.html
 needs-focus == select-required-valid-1.html select-required-ref.html
 needs-focus == select-required-valid-2.html select-required-ref.html
 needs-focus == select-required-valid-changed-1.html select-required-ref.html
 needs-focus == select-required-valid-changed-2.html select-required-ref.html
 needs-focus == select-required-multiple-invalid.html select-required-multiple-ref.html
 needs-focus == select-required-multiple-valid.html select-required-multiple-ref.html
-needs-focus == select-required-multiple-valid-changed.html select-required-multiple-ref.html
+fuzzy(64,4) needs-focus == select-required-multiple-valid-changed.html select-required-multiple-ref.html
 fails-if(Android) needs-focus == select-disabled-fieldset-1.html select-fieldset-ref.html
 fails-if(Android) needs-focus == select-disabled-fieldset-2.html select-fieldset-ref.html
 needs-focus == select-fieldset-legend.html select-fieldset-legend-ref.html
 needs-focus == select-novalidate.html select-required-ref.html
--- a/layout/reftests/css-ui-valid/select/select-required-multiple-valid-changed.html
+++ b/layout/reftests/css-ui-valid/select/select-required-multiple-valid-changed.html
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('s').options[0].selected = false;
+        document.getElementById('s').options[1].selected = false;
+        document.getElementById('s').options[0].selected = true;
+        document.getElementById('s').options[1].selected = true;
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if select is required and has at least one option selected and the
              selection did changed, :-moz-ui-valid should not apply. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('s').options[0].selected = false;
-                document.getElementById('s').options[1].selected = false;
-                document.getElementById('s').options[0].selected = true;
-                document.getElementById('s').options[1].selected = true;
-                document.documentElement.className = '';">
+  <body>
     <select id='s' class='valid' required multiple>
       <option selected></option>
       <option selected>foo</option>
     </select>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/reftest.list
+++ b/layout/reftests/css-ui-valid/textarea/reftest.list
@@ -1,20 +1,20 @@
 == textarea-valid.html textarea-ref.html
-== textarea-customerror.html textarea-ref.html
+fuzzy(11,4) == textarea-customerror.html textarea-ref.html
 fails-if(Android) == textarea-disabled.html textarea-ref.html
-fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
-== textarea-dyn-not-disabled.html textarea-ref.html
-== textarea-dyn-not-disabled-changed.html textarea-ref.html
+fuzzy(11,4) fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-disabled.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-disabled-changed.html textarea-ref.html
 == textarea-readonly.html textarea-ref.html
-== textarea-dyn-readonly.html textarea-ref.html
-== textarea-dyn-not-readonly.html textarea-ref.html
-== textarea-dyn-not-readonly-changed.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly-changed.html textarea-ref.html
 == textarea-maxlength-valid.html textarea-ref.html
-== textarea-maxlength-valid-changed.html textarea-ref.html
+fuzzy(11,4) == textarea-maxlength-valid-changed.html textarea-ref.html
 == textarea-maxlength-invalid.html textarea-withtext-ref.html
 == textarea-required-valid.html textarea-withtext-ref.html
 == textarea-required-valid-changed.html textarea-withtext-ref.html
 == textarea-required-invalid.html textarea-ref.html
 == textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
 == textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
 == textarea-fieldset-legend.html textarea-fieldset-legend-ref.html
 == textarea-novalidate.html textarea-withtext-ref.html
--- a/layout/reftests/css-ui-valid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea has a custom error, it should not be affected by :-moz-ui-valid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-disabled.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').disabled='true';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is disabled, it is barred from constraint validation
              and should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').disabled='true'; document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled-changed.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled-changed.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('disabled');
+        document.getElementById('t').value = '';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is not disabled and its value has been modifie,
              it should be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('disabled');
-                document.getElementById('t').value = '';
-                document.documentElement.className='';">
+  <body>
     <textarea class='valid' id='t' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
@@ -1,10 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('disabled');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is not disabled but its value hasn't been modified,
              it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('disabled');
-                document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly-changed.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly-changed.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.getElementById('t').value = '';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly and its value has been modified,
              it should be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly');
-                document.getElementById('t').value = '';
-                document.documentElement.className='';">
+  <body>
     <textarea class='valid' id='t' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
@@ -1,10 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly but its value hasn't been modified,
              it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly');
-                document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-readonly.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').readOnly='ro';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid-changed.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid-changed.html
@@ -1,11 +1,19 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').value = '';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is valid and its value has been modified,
              it should be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').value = '';
-                document.documentElement.className = '';">
+  <body>
     <textarea id='t' class='valid' maxlength="2"></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-customerror.html
+++ b/layout/reftests/css-valid/input/input-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if input has a custom error, it should not be affected by :valid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <input class='notvalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-type-invalid.html
+++ b/layout/reftests/css-valid/input/input-type-invalid.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has a custom error when barred from constraint
              validation then move a type candidate for constraint validation,
              it should not be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
-    function onLoadHandler()
+    function doTest()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
   </script>
-  <body onload="onLoadHandler();">
+  <body>
     <input class='notvalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/reftest.list
+++ b/layout/reftests/css-valid/input/reftest.list
@@ -1,10 +1,10 @@
 == input-valid.html input-ref.html
-== input-customerror.html input-ref.html
+fuzzy(64,4) == input-customerror.html input-ref.html
 fails-if(Android) == input-disabled.html input-ref.html
 fails-if(Android) == input-dyn-disabled.html input-ref.html
 == input-dyn-not-disabled.html input-ref.html
 == input-readonly.html input-ref.html
 == input-dyn-readonly.html input-ref.html
 == input-dyn-not-readonly.html input-ref.html
 == input-maxlength-valid.html input-ref.html
 == input-maxlength-invalid.html input-withtext-ref.html
@@ -14,17 +14,17 @@ fails-if(Android) == input-dyn-disabled.
 == input-reset.html input-button-ref.html
 == input-email-invalid.html input-withtext-ref.html
 == input-email-valid.html input-email-ref.html
 == input-url-invalid.html input-withtext-ref.html
 == input-url-valid.html input-url-ref.html
 == input-pattern-valid.html input-withtext-ref.html
 == input-pattern-invalid.html input-withtext-ref.html
 == input-type-barred.html input-button-ref.html
-== input-type-invalid.html input-ref.html
+fuzzy(64,4) == input-type-invalid.html input-ref.html
 == input-disabled-fieldset-1.html input-fieldset-ref.html
 == input-disabled-fieldset-2.html input-fieldset-ref.html
 == input-fieldset-legend.html input-fieldset-legend-ref.html
 == input-radio-required.html success-ref.html
 == input-radio-customerror.html success-ref.html
 == input-radio-dyn-valid-1.html success-ref.html
 == input-radio-dyn-valid-2.html success-ref.html
 == input-radio-nogroup-required-valid.html success-ref.html
--- a/layout/reftests/css-valid/textarea/reftest.list
+++ b/layout/reftests/css-valid/textarea/reftest.list
@@ -1,15 +1,15 @@
 == textarea-valid.html textarea-ref.html
-== textarea-customerror.html textarea-ref.html
+fuzzy(11,4) == textarea-customerror.html textarea-ref.html
 fails-if(Android) == textarea-disabled.html textarea-ref.html
-fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
-== textarea-dyn-not-disabled.html textarea-ref.html
+fuzzy(11,4) fails-if(Android) == textarea-dyn-disabled.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-disabled.html textarea-ref.html
 == textarea-readonly.html textarea-ref.html
-== textarea-dyn-readonly.html textarea-ref.html
-== textarea-dyn-not-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-readonly.html textarea-ref.html
+fuzzy(11,4) == textarea-dyn-not-readonly.html textarea-ref.html
 == textarea-maxlength-valid.html textarea-ref.html
 == textarea-maxlength-invalid.html textarea-withtext-ref.html
 == textarea-required-valid.html textarea-withtext-ref.html
 == textarea-required-invalid.html textarea-ref.html
 == textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
 == textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
 == textarea-fieldset-legend.html textarea-fieldset-legend-ref.html
--- a/layout/reftests/css-valid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-valid/textarea/textarea-customerror.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').setCustomValidity('foo');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea has a custom error, it should not be affected by :valid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-valid/textarea/textarea-dyn-disabled.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').disabled='true';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').disabled='true'; document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-valid/textarea/textarea-dyn-not-disabled.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('disabled');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is not disabled, it is candidate for constraint validation
              and should be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('disabled'); document.documentElement.className='';">
+  <body>
     <textarea class='valid' id='t' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-dyn-not-readonly.html
+++ b/layout/reftests/css-valid/textarea/textarea-dyn-not-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').removeAttribute('readonly');
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is no longer readonly, it is candidate for constraint
              validation and should be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
+  <body>
     <textarea class='valid' id='t' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-dyn-readonly.html
+++ b/layout/reftests/css-valid/textarea/textarea-dyn-readonly.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
+  <head>
+    <script>
+      function doTest() {
+        document.getElementById('t').readOnly='ro';
+        document.documentElement.className='';
+      }
+      document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+  </head>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
+  <body>
     <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>