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 108450 a736bb8d45aa49ed340138e057be4d3f99106a29
parent 108449 61672a211aac75481bc8174edb8f045c04df6b39
child 108451 ec48fbf9dd69bf44e3bb81df35f463ba08347c16
push id23564
push useremorley@mozilla.com
push dateFri, 28 Sep 2012 23:09:34 +0000
treeherdermozilla-central@b62b229a4d41 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs768766
milestone18.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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>