Bug 566045 - Default style for invalid form elements with :invalid. r=dbaron ui-r=limi a2.0=sicking
authorMounir Lamouri <mounir.lamouri@gmail.com>
Wed, 25 Aug 2010 06:40:31 +0200
changeset 51390 a8a30f226ea6505e9bb950221d21648e41908e6d
parent 51389 007c3205aba20a36337cd4435ab942d72dff9b20
child 51391 a758e294ed9ebf2c9f0e60f99bac7811c69ddcdf
push idunknown
push userunknown
push dateunknown
reviewersdbaron, limi
bugs566045
milestone2.0b5pre
Bug 566045 - Default style for invalid form elements with :invalid. r=dbaron ui-r=limi a2.0=sicking
layout/reftests/bugs/345267-1b.html
layout/reftests/css-invalid/button/button-button.html
layout/reftests/css-invalid/button/button-disabled.html
layout/reftests/css-invalid/button/button-dyn-disabled.html
layout/reftests/css-invalid/button/button-dyn-not-disabled.html
layout/reftests/css-invalid/button/button-invalid.html
layout/reftests/css-invalid/button/button-reset.html
layout/reftests/css-invalid/button/button-type-barred.html
layout/reftests/css-invalid/button/button-type-invalid.html
layout/reftests/css-invalid/button/button-valid.html
layout/reftests/css-invalid/button/style.css
layout/reftests/css-invalid/default-style/button-ref.html
layout/reftests/css-invalid/default-style/button.html
layout/reftests/css-invalid/default-style/fieldset-ref.html
layout/reftests/css-invalid/default-style/fieldset.html
layout/reftests/css-invalid/default-style/input-ref.html
layout/reftests/css-invalid/default-style/input.html
layout/reftests/css-invalid/default-style/reftest.list
layout/reftests/css-invalid/default-style/select-ref.html
layout/reftests/css-invalid/default-style/select.html
layout/reftests/css-invalid/default-style/style.css
layout/reftests/css-invalid/default-style/textarea-ref.html
layout/reftests/css-invalid/default-style/textarea.html
layout/reftests/css-invalid/input/input-button.html
layout/reftests/css-invalid/input/input-customerror.html
layout/reftests/css-invalid/input/input-disabled.html
layout/reftests/css-invalid/input/input-dyn-disabled.html
layout/reftests/css-invalid/input/input-dyn-not-disabled.html
layout/reftests/css-invalid/input/input-dyn-not-readonly.html
layout/reftests/css-invalid/input/input-dyn-readonly.html
layout/reftests/css-invalid/input/input-email-invalid.html
layout/reftests/css-invalid/input/input-email-valid.html
layout/reftests/css-invalid/input/input-maxlength-invalid.html
layout/reftests/css-invalid/input/input-maxlength-valid.html
layout/reftests/css-invalid/input/input-pattern-invalid.html
layout/reftests/css-invalid/input/input-pattern-valid.html
layout/reftests/css-invalid/input/input-readonly.html
layout/reftests/css-invalid/input/input-required-invalid.html
layout/reftests/css-invalid/input/input-required-valid.html
layout/reftests/css-invalid/input/input-reset.html
layout/reftests/css-invalid/input/input-type-barred.html
layout/reftests/css-invalid/input/input-type-invalid.html
layout/reftests/css-invalid/input/input-url-invalid.html
layout/reftests/css-invalid/input/input-url-valid.html
layout/reftests/css-invalid/input/input-valid.html
layout/reftests/css-invalid/input/style.css
layout/reftests/css-invalid/reftest.list
layout/reftests/css-invalid/select/select-disabled.html
layout/reftests/css-invalid/select/select-dyn-disabled.html
layout/reftests/css-invalid/select/select-dyn-not-disabled.html
layout/reftests/css-invalid/select/select-invalid.html
layout/reftests/css-invalid/select/select-valid.html
layout/reftests/css-invalid/select/style.css
layout/reftests/css-invalid/textarea/style.css
layout/reftests/css-invalid/textarea/textarea-customerror.html
layout/reftests/css-invalid/textarea/textarea-disabled.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-invalid/textarea/textarea-maxlength-invalid.html
layout/reftests/css-invalid/textarea/textarea-maxlength-valid.html
layout/reftests/css-invalid/textarea/textarea-readonly.html
layout/reftests/css-invalid/textarea/textarea-required-invalid.html
layout/reftests/css-invalid/textarea/textarea-required-valid.html
layout/reftests/css-invalid/textarea/textarea-valid.html
layout/reftests/css-required/css-required-style-2.css
layout/reftests/css-required/css-required-style.css
layout/reftests/css-valid/button/button-button.html
layout/reftests/css-valid/button/button-disabled.html
layout/reftests/css-valid/button/button-dyn-disabled.html
layout/reftests/css-valid/button/button-dyn-not-disabled.html
layout/reftests/css-valid/button/button-invalid.html
layout/reftests/css-valid/button/button-reset.html
layout/reftests/css-valid/button/button-type-barred.html
layout/reftests/css-valid/button/button-type-invalid.html
layout/reftests/css-valid/button/button-valid.html
layout/reftests/css-valid/button/style.css
layout/reftests/css-valid/input/input-button.html
layout/reftests/css-valid/input/input-customerror.html
layout/reftests/css-valid/input/input-disabled.html
layout/reftests/css-valid/input/input-dyn-disabled.html
layout/reftests/css-valid/input/input-dyn-not-disabled.html
layout/reftests/css-valid/input/input-dyn-not-readonly.html
layout/reftests/css-valid/input/input-dyn-readonly.html
layout/reftests/css-valid/input/input-email-invalid.html
layout/reftests/css-valid/input/input-email-valid.html
layout/reftests/css-valid/input/input-maxlength-invalid.html
layout/reftests/css-valid/input/input-maxlength-valid.html
layout/reftests/css-valid/input/input-pattern-invalid.html
layout/reftests/css-valid/input/input-pattern-valid.html
layout/reftests/css-valid/input/input-readonly.html
layout/reftests/css-valid/input/input-required-invalid.html
layout/reftests/css-valid/input/input-required-valid.html
layout/reftests/css-valid/input/input-reset.html
layout/reftests/css-valid/input/input-type-barred.html
layout/reftests/css-valid/input/input-type-invalid.html
layout/reftests/css-valid/input/input-url-invalid.html
layout/reftests/css-valid/input/input-url-valid.html
layout/reftests/css-valid/input/input-valid.html
layout/reftests/css-valid/input/style.css
layout/reftests/css-valid/select/select-disabled.html
layout/reftests/css-valid/select/select-dyn-disabled.html
layout/reftests/css-valid/select/select-dyn-not-disabled.html
layout/reftests/css-valid/select/select-invalid.html
layout/reftests/css-valid/select/select-valid.html
layout/reftests/css-valid/select/style.css
layout/reftests/css-valid/textarea/style.css
layout/reftests/css-valid/textarea/textarea-customerror.html
layout/reftests/css-valid/textarea/textarea-disabled.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
layout/reftests/css-valid/textarea/textarea-maxlength-invalid.html
layout/reftests/css-valid/textarea/textarea-maxlength-valid.html
layout/reftests/css-valid/textarea/textarea-readonly.html
layout/reftests/css-valid/textarea/textarea-required-invalid.html
layout/reftests/css-valid/textarea/textarea-required-valid.html
layout/reftests/css-valid/textarea/textarea-valid.html
layout/style/forms.css
--- a/layout/reftests/bugs/345267-1b.html
+++ b/layout/reftests/bugs/345267-1b.html
@@ -1,10 +1,14 @@
 <!DOCTYPE html>
 <html>
 <body>
+  <style>
+    /* Override the default :invalid style. */
+    :invalid { -moz-box-shadow: none; }
+  </style>
   <input size="20" maxlength="2">
   <script>
     document.body.offsetWidth;
     document.getElementsByTagName("input")[0].value = "abcde";
   </script>
 </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-button.html
+++ b/layout/reftests/css-invalid/button/button-button.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is of the button type, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
-    <button id='b' type='button'></button>
+    <button class='notinvalid' id='b' type='button'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-disabled.html
+++ b/layout/reftests/css-invalid/button/button-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button is disabled, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button disabled></button>
+    <button class='notinvalid' disabled></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-dyn-disabled.html
+++ b/layout/reftests/css-invalid/button/button-dyn-disabled.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is disabled and invalid, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <button id='b'></button>
+    <button class='notinvalid' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-dyn-not-disabled.html
+++ b/layout/reftests/css-invalid/button/button-dyn-not-disabled.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is not disabled and invalid, it is candidate for
              constraint validation and should be affected
              by :invalid pseudo-class. -->
-  <style>
-    button { background-color: red; }
-    button:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <button id='b' disabled></button>
+    <button class='invalid' id='b' disabled></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-invalid.html
+++ b/layout/reftests/css-invalid/button/button-invalid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button has a custom error, it should not be affected by :invalid
              pseudo-class. -->
-  <style>
-    button { background-color: red; }
-    button:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
-    <button id='b'></button>
+    <button class='invalid' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-reset.html
+++ b/layout/reftests/css-invalid/button/button-reset.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is of the reset type, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
-    <button id='b' type='reset'></button>
+    <button class='notinvalid' id='b' type='reset'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-type-barred.html
+++ b/layout/reftests/css-invalid/button/button-type-barred.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if a button has is candidate for constraint validation then change
              its type to be barred from constraint validation, it should not be
              affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var b = document.getElementById('b');
       b.setCustomValidity('foo');
       b.type = 'button';
       document.documentElement.className='';
     }
   </script>
   <body onload="document.getElementById('b').type='button'; document.documentElement.className='';">
-    <button type='submit' id='b'></button>
+    <button class='notinvalid' type='submit' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-type-invalid.html
+++ b/layout/reftests/css-invalid/button/button-type-invalid.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if a button has a custom error when barred from constraint
              validation then move a type candidate for constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: red; }
-    button:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var b = document.getElementById('b');
       b.setCustomValidity('foo');
       b.type = 'submit';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <button type='button' id='b'></button>
+    <button class='invalid' type='button' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-invalid/button/button-valid.html
+++ b/layout/reftests/css-invalid/button/button-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button has no custom error and is not barred from constraint
              validation, it should be affected by :invalid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button></button>
+    <button class='notinvalid'</button>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/button/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+button:invalid {
+  -moz-box-shadow: none;
+}
+
+button.notinvalid {
+  background-color: green;
+}
+button.notinvalid:invalid {
+  background-color: red;
+}
+
+button.invalid {
+  background-color: red;
+}
+button.invalid:invalid {
+  background-color: green;
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/button-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <button class='invalid-ref'></button>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/button.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <button id='e'></button>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/fieldset-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <fieldset class='barred-ref'></fieldset>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/fieldset.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <fieldset id='e'></fieldset>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/input-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='invalid-ref'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/input.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <input id='e'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/reftest.list
@@ -0,0 +1,5 @@
+== input.html input-ref.html
+== button.html button-ref.html
+== textarea.html textarea-ref.html
+== select.html select-ref.html
+== fieldset.html fieldset-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/select-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <select class='invalid-ref'></select>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/select.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <select id='e'></select>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/style.css
@@ -0,0 +1,6 @@
+.invalid-ref {
+  -moz-box-shadow: 0 0 2px 1px red;
+}
+
+.barred-ref {
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/textarea-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea class='invalid-ref'></textarea>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/default-style/textarea.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <textarea id='e'></textarea>
+  </body>
+</html>
--- a/layout/reftests/css-invalid/input/input-button.html
+++ b/layout/reftests/css-invalid/input/input-button.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is of button type, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='button'>
+    <input class='notinvalid' type='button'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-customerror.html
+++ b/layout/reftests/css-invalid/input/input-customerror.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input has a custom error, it should be affected by :invalid
              pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
-    <input id='t'>
+    <input class='invalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-disabled.html
+++ b/layout/reftests/css-invalid/input/input-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is disabled, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input disabled>
+    <input class='notinvalid' disabled>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-dyn-disabled.html
+++ b/layout/reftests/css-invalid/input/input-dyn-disabled.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is disabled and invalid, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('i');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <input id='i'>
+    <input class='notinvalid' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-dyn-not-disabled.html
+++ b/layout/reftests/css-invalid/input/input-dyn-not-disabled.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is not disabled and invalid, it is candidate for
              constraint validation and should be affected
              by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('i');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <input id='i' disabled>
+    <input class='invalid' id='i' disabled>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-dyn-not-readonly.html
+++ b/layout/reftests/css-invalid/input/input-dyn-not-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is no longer readonly, it is candidate for constraint
              validation and should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').removeAttribute('readonly'); document.documentElement.className='';">
-    <input id='i' readonly required>
+    <input class='invalid' id='i' readonly required>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-dyn-readonly.html
+++ b/layout/reftests/css-invalid/input/input-dyn-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is readonly, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').readOnly='ro'; document.documentElement.className='';">
-    <input id='i' required>
+    <input class='notinvalid' id='i' required>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-email-invalid.html
+++ b/layout/reftests/css-invalid/input/input-email-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='email' value='foo'>
+    <input class='invalid' type='email' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-email-valid.html
+++ b/layout/reftests/css-invalid/input/input-email-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='email' value='foo@bar.com'>
+    <input class='notinvalid' type='email' value='foo@bar.com'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-maxlength-invalid.html
+++ b/layout/reftests/css-invalid/input/input-maxlength-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').value='foo'; document.documentElement.className='';">
-    <input maxlength="2" id='i'>
+    <input class='invalid' maxlength="2" id='i'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-maxlength-valid.html
+++ b/layout/reftests/css-invalid/input/input-maxlength-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and is not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input maxlength="2">
+    <input class='notinvalid' maxlength="2">
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-pattern-invalid.html
+++ b/layout/reftests/css-invalid/input/input-pattern-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input pattern='bar' value='foo'>
+    <input class='invalid' pattern='bar' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-pattern-valid.html
+++ b/layout/reftests/css-invalid/input/input-pattern-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input pattern='foo' value='foo'>
+    <input class='notinvalid' pattern='foo' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-readonly.html
+++ b/layout/reftests/css-invalid/input/input-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is readonly, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input readonly>
+    <input class='notinvalid' readonly>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-required-invalid.html
+++ b/layout/reftests/css-invalid/input/input-required-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input required>
+    <input class='invalid' required>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-required-valid.html
+++ b/layout/reftests/css-invalid/input/input-required-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input value='foo' required>
+    <input class='notinvalid' value='foo' required>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-reset.html
+++ b/layout/reftests/css-invalid/input/input-reset.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is of reset type, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <!-- Setting value to the empty string let us check against input-button-ref.html -->
-    <input type='reset' value=''>
+    <input class='notinvalid' type='reset' value=''>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-type-barred.html
+++ b/layout/reftests/css-invalid/input/input-type-barred.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has is candidate for constraint validation then change
              its type to be barred from constraint validation, it should not be
              affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').type='button'; document.documentElement.className='';">
-    <input id='i'>
+    <input class='notinvalid' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-type-invalid.html
+++ b/layout/reftests/css-invalid/input/input-type-invalid.html
@@ -1,22 +1,19 @@
 <!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. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <input type='button' id='i'>
+    <input class='invalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-invalid/input/input-url-invalid.html
+++ b/layout/reftests/css-invalid/input/input-url-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='url' value='foo'>
+    <input class='invalid' type='url' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-url-valid.html
+++ b/layout/reftests/css-invalid/input/input-url-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='url' value='http://mozilla.org/'>
+    <input class='notinvalid' type='url' value='http://mozilla.org/'>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/input/input-valid.html
+++ b/layout/reftests/css-invalid/input/input-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and is not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input>
+    <input class='notinvalid'>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/input/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+input:invalid {
+  -moz-box-shadow: none;
+}
+
+input.notinvalid {
+  background-color: green;
+}
+input.notinvalid:invalid {
+  background-color: red;
+}
+
+input.invalid {
+  background-color: red;
+}
+input.invalid:invalid {
+  background-color: green;
+}
--- a/layout/reftests/css-invalid/reftest.list
+++ b/layout/reftests/css-invalid/reftest.list
@@ -1,8 +1,11 @@
 # :invalid should not apply on fieldset (always barred from constraint validation)
 include fieldset/reftest.list
 
 # :invalid should apply on the following elements
 include button/reftest.list
 include input/reftest.list
 include select/reftest.list
 include textarea/reftest.list
+
+# default :invalid style
+include default-style/reftest.list
--- a/layout/reftests/css-invalid/select/select-disabled.html
+++ b/layout/reftests/css-invalid/select/select-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select is disabled, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
-    <select id='s' disabled></select>
+    <select class='notinvalid' id='s' disabled></select>
   </body>
 </html>
--- a/layout/reftests/css-invalid/select/select-dyn-disabled.html
+++ b/layout/reftests/css-invalid/select/select-dyn-disabled.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select is disabled and invalid, it is barred from constraint
              validation and should not be affected by :invalid pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('s');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <select id='s'></select>
+    <select class='notinvalid' id='s'></select>
   </body>
 </html>
--- a/layout/reftests/css-invalid/select/select-dyn-not-disabled.html
+++ b/layout/reftests/css-invalid/select/select-dyn-not-disabled.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select is not disabled and invalid, it is candidate for
              constraint validation and should be affected
              by :invalid pseudo-class. -->
-  <style>
-    select { background-color: red; }
-    select:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('s');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <select id='s' disabled></select>
+    <select class='invalid' id='s' disabled></select>
   </body>
 </html>
--- a/layout/reftests/css-invalid/select/select-invalid.html
+++ b/layout/reftests/css-invalid/select/select-invalid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select has a custom error, it should be affected by :invalid
              pseudo-class. -->
-  <style>
-    select { background-color: red; }
-    select:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
-    <select id='s'></select>
+    <select class='invalid' id='s'></select>
   </body>
 </html>
--- a/layout/reftests/css-invalid/select/select-valid.html
+++ b/layout/reftests/css-invalid/select/select-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select has no custom error and is not barred from constraint
              validation, it should not be affected by :invalid pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <select></select>
+    <select class='notinvalid'></select>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/select/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+select:invalid {
+  -moz-box-shadow: none;
+}
+
+select.notinvalid {
+  background-color: green;
+}
+select.notinvalid:invalid {
+  background-color: red;
+}
+
+select.invalid {
+  background-color: red;
+}
+select.invalid:invalid {
+  background-color: green;
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-invalid/textarea/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+textarea:invalid {
+  -moz-box-shadow: none;
+}
+
+textarea.notinvalid {
+  background-color: green;
+}
+textarea.notinvalid:invalid {
+  background-color: red;
+}
+
+textarea.invalid {
+  background-color: red;
+}
+textarea.invalid:invalid {
+  background-color: green;
+}
--- a/layout/reftests/css-invalid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-invalid/textarea/textarea-customerror.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea has a custom error, it should be affected by :invalid
              pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
-    <textarea id='t'></textarea>
+    <textarea class='invalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-disabled.html
+++ b/layout/reftests/css-invalid/textarea/textarea-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is disabled, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea disabled></textarea>
+    <textarea class='notinvalid' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
@@ -1,21 +1,18 @@
 <!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. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.disabled = 'true';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <textarea id='t'></textarea>
+    <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,22 +1,19 @@
 <!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. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('t');
       e.setCustomValidity('foo');
       e.removeAttribute('disabled');
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <textarea id='t' disabled></textarea>
+    <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,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is no longer readonly, it is candidate for constraint
              validation and should be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
-    <textarea id='t' readonly required></textarea>
+    <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,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
-    <textarea id='t' required></textarea>
+    <textarea class='notinvalid' id='t' required></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-maxlength-invalid.html
+++ b/layout/reftests/css-invalid/textarea/textarea-maxlength-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').value='foo'; document.documentElement.className='';">
-    <textarea maxlength="2" id='t'></textarea>
+    <textarea class='invalid' maxlength="2" id='t'></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/textarea/textarea-maxlength-valid.html
+++ b/layout/reftests/css-invalid/textarea/textarea-maxlength-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and is not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea maxlength="2"></textarea>
+    <textarea class='notinvalid' maxlength="2"></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/textarea/textarea-readonly.html
+++ b/layout/reftests/css-invalid/textarea/textarea-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea readonly></textarea>
+    <textarea class='notinvalid' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-invalid/textarea/textarea-required-invalid.html
+++ b/layout/reftests/css-invalid/textarea/textarea-required-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:invalid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea required></textarea>
+    <textarea class='invalid' required></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/textarea/textarea-required-valid.html
+++ b/layout/reftests/css-invalid/textarea/textarea-required-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea required>foo</textarea>
+    <textarea class='notinvalid' required>foo</textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-invalid/textarea/textarea-valid.html
+++ b/layout/reftests/css-invalid/textarea/textarea-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and is not barred from constraint validation,
              it should not be affected by :invalid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:invalid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea></textarea>
+    <textarea class='notinvalid'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-required/css-required-style-2.css
+++ b/layout/reftests/css-required/css-required-style-2.css
@@ -1,8 +1,13 @@
 input, textarea, select, button,
 *:optional {
   visibility: hidden;
 }
 
 input[required]:required {
   visibility: visible;
 }
+
+/* Override the default style. */
+:invalid {
+  -moz-box-shadow: none;
+}
--- a/layout/reftests/css-required/css-required-style.css
+++ b/layout/reftests/css-required/css-required-style.css
@@ -1,8 +1,13 @@
 input, textarea, select, button,
 *:optional {
   visibility: hidden;
 }
 
 *:required {
   visibility: visible;
 }
+
+/* Override the default style. */
+:invalid {
+  -moz-box-shadow: none;
+}
--- a/layout/reftests/css-valid/button/button-button.html
+++ b/layout/reftests/css-valid/button/button-button.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button is of the button type, it is barred from constraint
              validation and should not be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button type='button'></button>
+    <button class='notvalid' type='button'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-disabled.html
+++ b/layout/reftests/css-valid/button/button-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button disabled></button>
+    <button class='notvalid' disabled></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-dyn-disabled.html
+++ b/layout/reftests/css-valid/button/button-dyn-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').disabled='true'; document.documentElement.className='';">
-    <button id='b'></button>
+    <button class='notvalid' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-dyn-not-disabled.html
+++ b/layout/reftests/css-valid/button/button-dyn-not-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button is not disabled, it is candidate for constraint validation
              and should be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: red; }
-    button:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').removeAttribute('disabled'); document.documentElement.className='';">
-    <button id='b' disabled></button>
+    <button class='valid' id='b' disabled></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-invalid.html
+++ b/layout/reftests/css-valid/button/button-invalid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button has a custom error, it should not be affected by :valid
              pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
-    <button id='b'></button>
+    <button class='notvalid' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-reset.html
+++ b/layout/reftests/css-valid/button/button-reset.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button is of the reset type, it is barred from constraint
              validation and should not be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button type='reset'></button>
+    <button class='notvalid' type='reset'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-type-barred.html
+++ b/layout/reftests/css-valid/button/button-type-barred.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if a button has is candidate for constraint validation then change
              its type to be barred from constraint validation, it should not be
              affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').type='button'; document.documentElement.className='';">
-    <button type='submit' id='b'></button>
+    <button class='notvalid' type='submit' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-type-invalid.html
+++ b/layout/reftests/css-valid/button/button-type-invalid.html
@@ -1,22 +1,19 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if a button 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. -->
-  <style>
-    button { background-color: green; }
-    button:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var b = document.getElementById('b');
       b.setCustomValidity('foo');
       b.type = 'submit';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <button type='button' id='b'></button>
+    <button class='notvalid' type='button' id='b'></button>
   </body>
 </html>
--- a/layout/reftests/css-valid/button/button-valid.html
+++ b/layout/reftests/css-valid/button/button-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if button has no custom error and is not barred from constraint
              validation, it should be affected by :valid pseudo-class. -->
-  <style>
-    button { background-color: red; }
-    button:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <button></button>
+    <button class='valid'></button>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-valid/button/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+button:invalid {
+  -moz-box-shadow: none;
+}
+
+button.notvalid {
+  background-color: green;
+}
+button.notvalid:valid {
+  background-color: red;
+}
+
+button.valid {
+  background-color: red;
+}
+button.valid:valid {
+  background-color: green;
+}
--- a/layout/reftests/css-valid/input/input-button.html
+++ b/layout/reftests/css-valid/input/input-button.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is of button type, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='button'>
+    <input class='notvalid' type='button'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-customerror.html
+++ b/layout/reftests/css-valid/input/input-customerror.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input has a custom error, it should not be affected by :valid
              pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
-    <input id='t'>
+    <input class='notvalid' id='t'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-disabled.html
+++ b/layout/reftests/css-valid/input/input-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input disabled>
+    <input class='notvalid' disabled>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-dyn-disabled.html
+++ b/layout/reftests/css-valid/input/input-dyn-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').disabled='true'; document.documentElement.className='';">
-    <input id='i'>
+    <input class='notvalid' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-dyn-not-disabled.html
+++ b/layout/reftests/css-valid/input/input-dyn-not-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is not disabled, it is candidate for constraint validation
              and should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').removeAttribute('disabled'); document.documentElement.className='';">
-    <input id='i' disabled>
+    <input class='valid' id='i' disabled>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-dyn-not-readonly.html
+++ b/layout/reftests/css-valid/input/input-dyn-not-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is no longer readonly, it is candidate for constraint
              validation and should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').removeAttribute('readonly'); document.documentElement.className='';">
-    <input id='i' readonly>
+    <input class='valid' id='i' readonly>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-dyn-readonly.html
+++ b/layout/reftests/css-valid/input/input-dyn-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input is readonly, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').readOnly='ro'; document.documentElement.className='';">
-    <input id='i'>
+    <input class='notvalid' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-email-invalid.html
+++ b/layout/reftests/css-valid/input/input-email-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='email' value='foo'>
+    <input class='notvalid' type='email' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-email-valid.html
+++ b/layout/reftests/css-valid/input/input-email-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='email' value='foo@bar.com'>
+    <input class='valid' type='email' value='foo@bar.com'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-maxlength-invalid.html
+++ b/layout/reftests/css-valid/input/input-maxlength-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').value='foo'; document.documentElement.className='';">
-    <input maxlength="2" id='i'>
+    <input class='notvalid' maxlength="2" id='i'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-maxlength-valid.html
+++ b/layout/reftests/css-valid/input/input-maxlength-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and is not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input maxlength="2">
+    <input class='valid' maxlength="2">
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-pattern-invalid.html
+++ b/layout/reftests/css-valid/input/input-pattern-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input pattern='bar' value='foo'>
+    <input class='notvalid' pattern='bar' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-pattern-valid.html
+++ b/layout/reftests/css-valid/input/input-pattern-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input pattern='foo' value='foo'>
+    <input class='valid' pattern='foo' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-readonly.html
+++ b/layout/reftests/css-valid/input/input-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is readonly, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input readonly>
+    <input class='notvalid' readonly>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-required-invalid.html
+++ b/layout/reftests/css-valid/input/input-required-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input required>
+    <input class='notvalid' required>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-required-valid.html
+++ b/layout/reftests/css-valid/input/input-required-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input value='foo' required>
+    <input class='valid' value='foo' required>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-reset.html
+++ b/layout/reftests/css-valid/input/input-reset.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is of reset type, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <!-- Setting value to the empty string let us check against input-button-ref.html -->
-    <input type='reset' value=''>
+    <input class='notvalid' type='reset' value=''>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-type-barred.html
+++ b/layout/reftests/css-valid/input/input-type-barred.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if an input has is candidate for constraint validation then change
              its type to be barred from constraint validation, it should not be
              affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').type='button'; document.documentElement.className='';">
-    <input id='i'>
+    <input class='notvalid' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-type-invalid.html
+++ b/layout/reftests/css-valid/input/input-type-invalid.html
@@ -1,22 +1,19 @@
 <!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. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var i = document.getElementById('i');
       i.setCustomValidity('foo');
       i.type = 'text';
       document.documentElement.className='';
     }
   </script>
   <body onload="onLoadHandler();">
-    <input type='button' id='i'>
+    <input class='notvalid' type='button' id='i'>
   </body>
 </html>
--- a/layout/reftests/css-valid/input/input-url-invalid.html
+++ b/layout/reftests/css-valid/input/input-url-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: green; }
-    input:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='url' value='foo'>
+    <input class='notvalid' type='url' value='foo'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-url-valid.html
+++ b/layout/reftests/css-valid/input/input-url-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input type='url' value='http://mozilla.org/'>
+    <input class='valid' type='url' value='http://mozilla.org/'>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/input/input-valid.html
+++ b/layout/reftests/css-valid/input/input-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input is valid and is not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    input { background-color: red; }
-    input:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input>
+    <input class='valid'>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-valid/input/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+input:invalid {
+  -moz-box-shadow: none;
+}
+
+input.notvalid {
+  background-color: green;
+}
+input.notvalid:valid {
+  background-color: red;
+}
+
+input.valid {
+  background-color: red;
+}
+input.valid:valid {
+  background-color: green;
+}
--- a/layout/reftests/css-valid/select/select-disabled.html
+++ b/layout/reftests/css-valid/select/select-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <select disabled></select>
+    <select class='notvalid' disabled></select>
   </body>
 </html>
--- a/layout/reftests/css-valid/select/select-dyn-disabled.html
+++ b/layout/reftests/css-valid/select/select-dyn-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').disabled='true'; document.documentElement.className='';">
-    <select id='s'></select>
+    <select class='notvalid' id='s'></select>
   </body>
 </html>
--- a/layout/reftests/css-valid/select/select-dyn-not-disabled.html
+++ b/layout/reftests/css-valid/select/select-dyn-not-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select is not disabled, it is candidate for constraint validation
              and should be affected by :valid pseudo-class. -->
-  <style>
-    select { background-color: red; }
-    select:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').removeAttribute('disabled'); document.documentElement.className='';">
-    <select id='s' disabled></select>
+    <select class='valid' id='s' disabled></select>
   </body>
 </html>
--- a/layout/reftests/css-valid/select/select-invalid.html
+++ b/layout/reftests/css-valid/select/select-invalid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select has a custom error, it should not be affected by :valid
              pseudo-class. -->
-  <style>
-    select { background-color: green; }
-    select:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
-    <select id='s'></select>
+    <select class='notvalid' id='s'></select>
   </body>
 </html>
--- a/layout/reftests/css-valid/select/select-valid.html
+++ b/layout/reftests/css-valid/select/select-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select has no custom error and is not barred from constraint
              validation, it should be affected by :valid pseudo-class. -->
-  <style>
-    select { background-color: red; }
-    select:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <select></select>
+    <select class='valid'></select>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-valid/select/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+select:invalid {
+  -moz-box-shadow: none;
+}
+
+select.notvalid {
+  background-color: green;
+}
+select.notvalid:valid {
+  background-color: red;
+}
+
+select.valid {
+  background-color: red;
+}
+select.valid:valid {
+  background-color: green;
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-valid/textarea/style.css
@@ -0,0 +1,18 @@
+/* Override default style */
+textarea:invalid {
+  -moz-box-shadow: none;
+}
+
+textarea.notvalid {
+  background-color: green;
+}
+textarea.notvalid:valid {
+  background-color: red;
+}
+
+textarea.valid {
+  background-color: red;
+}
+textarea.valid:valid {
+  background-color: green;
+}
--- a/layout/reftests/css-valid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-valid/textarea/textarea-customerror.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea has a custom error, it should not be affected by :valid
              pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').setCustomValidity('foo'); document.documentElement.className='';">
-    <textarea id='t'></textarea>
+    <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-disabled.html
+++ b/layout/reftests/css-valid/textarea/textarea-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea disabled></textarea>
+    <textarea class='notvalid' disabled></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-valid/textarea/textarea-dyn-disabled.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is disabled, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').disabled='true'; document.documentElement.className='';">
-    <textarea id='t'></textarea>
+    <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,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is not disabled, it is candidate for constraint validation
              and should be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').removeAttribute('disabled'); document.documentElement.className='';">
-    <textarea id='t' disabled></textarea>
+    <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,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is no longer readonly, it is candidate for constraint
              validation and should be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
-    <textarea id='t' readonly></textarea>
+    <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,12 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea :valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').readOnly='ro'; document.documentElement.className='';">
-    <textarea id='t'></textarea>
+    <textarea class='notvalid' id='t'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-maxlength-invalid.html
+++ b/layout/reftests/css-valid/textarea/textarea-maxlength-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').value='foo'; document.documentElement.className='';">
-    <textarea maxlength="2" id='t'></textarea>
+    <textarea class='notvalid' maxlength="2" id='t'></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/textarea/textarea-maxlength-valid.html
+++ b/layout/reftests/css-valid/textarea/textarea-maxlength-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and is not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea maxlength="2"></textarea>
+    <textarea class='valid' maxlength="2"></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/textarea/textarea-readonly.html
+++ b/layout/reftests/css-valid/textarea/textarea-readonly.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is readonly, it is barred from constraint validation
              and should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea readonly></textarea>
+    <textarea class='notvalid' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-valid/textarea/textarea-required-invalid.html
+++ b/layout/reftests/css-valid/textarea/textarea-required-invalid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should not be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: green; }
-    textarea:valid { background-color: red; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea required></textarea>
+    <textarea class='notvalid' required></textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/textarea/textarea-required-valid.html
+++ b/layout/reftests/css-valid/textarea/textarea-required-valid.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea required>foo</textarea>
+    <textarea class='valid' required>foo</textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-valid/textarea/textarea-valid.html
+++ b/layout/reftests/css-valid/textarea/textarea-valid.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea is valid and is not barred from constraint validation,
              it should be affected by :valid pseudo-class. -->
-  <style>
-    textarea { background-color: red; }
-    textarea:valid { background-color: green; }
-  </style>
+  <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea></textarea>
+    <textarea class='valid'></textarea>
   </body>
 </html>
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -615,16 +615,26 @@ optgroup:before {
   * directionality. Otherwise filenames containing right-to-left characters
   * will be reordered with chaotic results.
   */
 input[type="file"] > input[type="text"] {
   direction: ltr !important;
   text-align: inherit;
 }
 
+/**
+ * Set default style for invalid elements.
+ * <output> is the only element which may not follow this rule (but color: red).
+ * However it is barred from constraint validation per the specifications so, at
+ * least for now, it will not be affected by :invalid.
+ */
+:invalid {
+  -moz-box-shadow: 0 0 2px 1px red;
+}
+
 @media print {
   input, textarea, select, button {
     -moz-user-input: none !important;
   }
 
   input[type="file"] { height: 2em; }
 }