Bug 605124 (2/5) - Make :-moz-ui-invalid follow rules for :invalid. r=bz a=bsmedberg
authorMounir Lamouri <mounir.lamouri@gmail.com>
Wed, 24 Nov 2010 00:48:51 +0100
changeset 58144 f88a334e605e9aab7eda0d14d69788d4ac3c5c15
parent 58143 80c5a5c971b9889a55576d5eeb2d008d59f6c283
child 58145 15b5a12e17ac6e2dd3cf4829aa381b44be160ea2
push id1
push usershaver@mozilla.com
push dateTue, 04 Jan 2011 17:58:04 +0000
reviewersbz, bsmedberg
bugs605124
milestone2.0b8pre
Bug 605124 (2/5) - Make :-moz-ui-invalid follow rules for :invalid. r=bz a=bsmedberg
content/html/content/src/nsHTMLButtonElement.cpp
content/html/content/src/nsHTMLInputElement.cpp
content/html/content/src/nsHTMLSelectElement.cpp
content/html/content/src/nsHTMLTextAreaElement.cpp
layout/reftests/css-ui-invalid/button/button-button.html
layout/reftests/css-ui-invalid/button/button-disabled-fieldset-1.html
layout/reftests/css-ui-invalid/button/button-disabled-fieldset-2.html
layout/reftests/css-ui-invalid/button/button-disabled.html
layout/reftests/css-ui-invalid/button/button-dyn-disabled.html
layout/reftests/css-ui-invalid/button/button-dyn-not-disabled.html
layout/reftests/css-ui-invalid/button/button-fieldset-legend-ref.html
layout/reftests/css-ui-invalid/button/button-fieldset-legend.html
layout/reftests/css-ui-invalid/button/button-fieldset-ref.html
layout/reftests/css-ui-invalid/button/button-invalid.html
layout/reftests/css-ui-invalid/button/button-ref.html
layout/reftests/css-ui-invalid/button/button-reset.html
layout/reftests/css-ui-invalid/button/button-type-barred.html
layout/reftests/css-ui-invalid/button/button-type-invalid.html
layout/reftests/css-ui-invalid/button/button-valid.html
layout/reftests/css-ui-invalid/button/reftest.list
layout/reftests/css-ui-invalid/button/style.css
layout/reftests/css-ui-invalid/default-style/button-ref.html
layout/reftests/css-ui-invalid/default-style/button.html
layout/reftests/css-ui-invalid/default-style/fieldset-ref.html
layout/reftests/css-ui-invalid/default-style/fieldset.html
layout/reftests/css-ui-invalid/default-style/input-ref.html
layout/reftests/css-ui-invalid/default-style/input.html
layout/reftests/css-ui-invalid/default-style/reftest.list
layout/reftests/css-ui-invalid/default-style/select-ref.html
layout/reftests/css-ui-invalid/default-style/select.html
layout/reftests/css-ui-invalid/default-style/style.css
layout/reftests/css-ui-invalid/default-style/textarea-ref.html
layout/reftests/css-ui-invalid/default-style/textarea.html
layout/reftests/css-ui-invalid/input/input-button-ref.html
layout/reftests/css-ui-invalid/input/input-button.html
layout/reftests/css-ui-invalid/input/input-customerror.html
layout/reftests/css-ui-invalid/input/input-disabled-fieldset-1.html
layout/reftests/css-ui-invalid/input/input-disabled-fieldset-2.html
layout/reftests/css-ui-invalid/input/input-disabled.html
layout/reftests/css-ui-invalid/input/input-dyn-disabled.html
layout/reftests/css-ui-invalid/input/input-dyn-not-disabled.html
layout/reftests/css-ui-invalid/input/input-dyn-not-readonly.html
layout/reftests/css-ui-invalid/input/input-dyn-readonly.html
layout/reftests/css-ui-invalid/input/input-email-invalid.html
layout/reftests/css-ui-invalid/input/input-email-ref.html
layout/reftests/css-ui-invalid/input/input-email-valid.html
layout/reftests/css-ui-invalid/input/input-fieldset-legend-ref.html
layout/reftests/css-ui-invalid/input/input-fieldset-legend.html
layout/reftests/css-ui-invalid/input/input-fieldset-ref.html
layout/reftests/css-ui-invalid/input/input-maxlength-invalid.html
layout/reftests/css-ui-invalid/input/input-maxlength-valid.html
layout/reftests/css-ui-invalid/input/input-pattern-invalid.html
layout/reftests/css-ui-invalid/input/input-pattern-valid.html
layout/reftests/css-ui-invalid/input/input-readonly.html
layout/reftests/css-ui-invalid/input/input-ref.html
layout/reftests/css-ui-invalid/input/input-required-invalid.html
layout/reftests/css-ui-invalid/input/input-required-valid.html
layout/reftests/css-ui-invalid/input/input-reset.html
layout/reftests/css-ui-invalid/input/input-type-barred.html
layout/reftests/css-ui-invalid/input/input-type-invalid.html
layout/reftests/css-ui-invalid/input/input-url-invalid.html
layout/reftests/css-ui-invalid/input/input-url-ref.html
layout/reftests/css-ui-invalid/input/input-url-valid.html
layout/reftests/css-ui-invalid/input/input-valid.html
layout/reftests/css-ui-invalid/input/input-withtext-ref.html
layout/reftests/css-ui-invalid/input/reftest.list
layout/reftests/css-ui-invalid/input/style.css
layout/reftests/css-ui-invalid/reftest.list
layout/reftests/css-ui-invalid/select/reftest.list
layout/reftests/css-ui-invalid/select/select-disabled-fieldset-1.html
layout/reftests/css-ui-invalid/select/select-disabled-fieldset-2.html
layout/reftests/css-ui-invalid/select/select-disabled-ref.html
layout/reftests/css-ui-invalid/select/select-disabled.html
layout/reftests/css-ui-invalid/select/select-dyn-disabled.html
layout/reftests/css-ui-invalid/select/select-dyn-not-disabled.html
layout/reftests/css-ui-invalid/select/select-fieldset-legend-ref.html
layout/reftests/css-ui-invalid/select/select-fieldset-legend.html
layout/reftests/css-ui-invalid/select/select-fieldset-ref.html
layout/reftests/css-ui-invalid/select/select-invalid.html
layout/reftests/css-ui-invalid/select/select-ref.html
layout/reftests/css-ui-invalid/select/select-required-invalid.html
layout/reftests/css-ui-invalid/select/select-required-multiple-invalid.html
layout/reftests/css-ui-invalid/select/select-required-multiple-ref.html
layout/reftests/css-ui-invalid/select/select-required-multiple-valid.html
layout/reftests/css-ui-invalid/select/select-required-ref.html
layout/reftests/css-ui-invalid/select/select-required-valid.html
layout/reftests/css-ui-invalid/select/select-valid.html
layout/reftests/css-ui-invalid/select/style.css
layout/reftests/css-ui-invalid/textarea/reftest.list
layout/reftests/css-ui-invalid/textarea/style.css
layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-1.html
layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-2.html
layout/reftests/css-ui-invalid/textarea/textarea-disabled.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.html
layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
layout/reftests/css-ui-invalid/textarea/textarea-fieldset-legend-ref.html
layout/reftests/css-ui-invalid/textarea/textarea-fieldset-legend.html
layout/reftests/css-ui-invalid/textarea/textarea-fieldset-ref.html
layout/reftests/css-ui-invalid/textarea/textarea-maxlength-invalid.html
layout/reftests/css-ui-invalid/textarea/textarea-maxlength-valid.html
layout/reftests/css-ui-invalid/textarea/textarea-readonly.html
layout/reftests/css-ui-invalid/textarea/textarea-ref.html
layout/reftests/css-ui-invalid/textarea/textarea-required-invalid.html
layout/reftests/css-ui-invalid/textarea/textarea-required-valid.html
layout/reftests/css-ui-invalid/textarea/textarea-valid.html
layout/reftests/css-ui-invalid/textarea/textarea-withtext-ref.html
layout/reftests/reftest.list
--- a/content/html/content/src/nsHTMLButtonElement.cpp
+++ b/content/html/content/src/nsHTMLButtonElement.cpp
@@ -648,20 +648,22 @@ nsHTMLButtonElement::AfterSetAttr(PRInt3
   if (aNameSpaceID == kNameSpaceID_None) {
     if (aName == nsGkAtoms::type) {
       if (!aValue) {
         mType = kButtonDefaultType->value;
       }
 
       UpdateBarredFromConstraintValidation();
       states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID |
                 NS_EVENT_STATE_MOZ_SUBMITINVALID;
     } else if (aName == nsGkAtoms::disabled) {
       UpdateBarredFromConstraintValidation();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     }
 
     if (aNotify && !states.IsEmpty()) {
       nsIDocument* doc = GetCurrentDoc();
       if (doc) {
         MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
         doc->ContentStatesChanged(this, nsnull, states);
       }
@@ -701,17 +703,18 @@ nsHTMLButtonElement::RestoreState(nsPres
 }
 
 nsEventStates
 nsHTMLButtonElement::IntrinsicState() const
 {
   nsEventStates state = nsGenericHTMLFormElement::IntrinsicState();
 
   if (IsCandidateForConstraintValidation()) {
-    state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
+    state |= IsValid() ? NS_EVENT_STATE_VALID
+                       : NS_EVENT_STATE_INVALID | NS_EVENT_STATE_MOZ_UI_INVALID;
   }
 
   if (mForm && !mForm->GetValidity() && IsSubmitControl()) {
     state |= NS_EVENT_STATE_MOZ_SUBMITINVALID;
   }
 
   return state;
 }
@@ -722,17 +725,18 @@ NS_IMETHODIMP
 nsHTMLButtonElement::SetCustomValidity(const nsAString& aError)
 {
   nsIConstraintValidation::SetCustomValidity(aError);
 
   nsIDocument* doc = GetCurrentDoc();
   if (doc) {
     MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
     doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_INVALID |
-                                            NS_EVENT_STATE_VALID);
+                                            NS_EVENT_STATE_VALID |
+                                            NS_EVENT_STATE_MOZ_UI_INVALID);
   }
 
   return NS_OK;
 }
 
 void
 nsHTMLButtonElement::UpdateBarredFromConstraintValidation()
 {
@@ -741,12 +745,13 @@ nsHTMLButtonElement::UpdateBarredFromCon
                                     IsDisabled());
 }
 
 void
 nsHTMLButtonElement::FieldSetDisabledChanged(nsEventStates aStates, PRBool aNotify)
 {
   UpdateBarredFromConstraintValidation();
 
-  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+             NS_EVENT_STATE_MOZ_UI_INVALID;
   nsGenericHTMLFormElement::FieldSetDisabledChanged(aStates, aNotify);
 }
 
--- a/content/html/content/src/nsHTMLInputElement.cpp
+++ b/content/html/content/src/nsHTMLInputElement.cpp
@@ -896,38 +896,42 @@ nsHTMLInputElement::AfterSetAttr(PRInt32
                 NS_EVENT_STATE_SUPPRESSED |
                 NS_EVENT_STATE_LOADING |
                 NS_EVENT_STATE_MOZ_READONLY |
                 NS_EVENT_STATE_MOZ_READWRITE |
                 NS_EVENT_STATE_REQUIRED |
                 NS_EVENT_STATE_OPTIONAL |
                 NS_EVENT_STATE_VALID |
                 NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID |
                 NS_EVENT_STATE_INDETERMINATE |
                 NS_EVENT_STATE_MOZ_PLACEHOLDER |
                 NS_EVENT_STATE_MOZ_SUBMITINVALID;
     }
 
     if (aName == nsGkAtoms::required || aName == nsGkAtoms::disabled ||
         aName == nsGkAtoms::readonly) {
       UpdateValueMissingValidityState();
 
       // This *has* to be called *after* validity has changed.
       if (aName == nsGkAtoms::readonly || aName == nsGkAtoms::disabled) {
         UpdateBarredFromConstraintValidation();
       }
 
       states |= NS_EVENT_STATE_REQUIRED | NS_EVENT_STATE_OPTIONAL |
-                NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+                NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     } else if (MaxLengthApplies() && aName == nsGkAtoms::maxlength) {
       UpdateTooLongValidityState();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     } else if (aName == nsGkAtoms::pattern) {
       UpdatePatternMismatchValidityState();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     }
 
     if (aNotify) {
       nsIDocument* doc = GetCurrentDoc();
 
       if (aName == nsGkAtoms::type) {
         UpdateEditableState();
       } else if (IsSingleLineTextControl(PR_FALSE) && aName == nsGkAtoms::readonly) {
@@ -3273,17 +3277,18 @@ nsHTMLInputElement::IntrinsicState() con
 
   if (DoesRequiredApply() && HasAttr(kNameSpaceID_None, nsGkAtoms::required)) {
     state |= NS_EVENT_STATE_REQUIRED;
   } else {
     state |= NS_EVENT_STATE_OPTIONAL;
   }
 
   if (IsCandidateForConstraintValidation()) {
-    state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
+    state |= IsValid() ? NS_EVENT_STATE_VALID
+                       : NS_EVENT_STATE_INVALID | NS_EVENT_STATE_MOZ_UI_INVALID;
   }
 
   if (PlaceholderApplies() && HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
       !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
     // TODO: we really need a GetValue(...) const method, see bug 585097
     nsTextEditorState* edState = GetEditorState();
     nsAutoString value;
 
@@ -3690,17 +3695,18 @@ NS_IMETHODIMP
 nsHTMLInputElement::SetCustomValidity(const nsAString& aError)
 {
   nsIConstraintValidation::SetCustomValidity(aError);
 
   nsIDocument* doc = GetCurrentDoc();
   if (doc) {
     MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
     doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_INVALID |
-                                            NS_EVENT_STATE_VALID);
+                                            NS_EVENT_STATE_VALID |
+                                            NS_EVENT_STATE_MOZ_UI_INVALID);
   }
 
   return NS_OK;
 }
 
 PRBool
 nsHTMLInputElement::IsTooLong()
 {
@@ -3861,17 +3867,18 @@ nsHTMLInputElement::UpdateAllValiditySta
   UpdateTypeMismatchValidityState();
   UpdatePatternMismatchValidityState();
 
   if (validBefore != IsValid() && aNotify) {
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
       MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
       doc->ContentStatesChanged(this, nsnull,
-                                NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID);
+                                NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                                NS_EVENT_STATE_MOZ_UI_INVALID);
     }
   }
 }
 
 void
 nsHTMLInputElement::UpdateBarredFromConstraintValidation()
 {
   SetBarredFromConstraintValidation(mType == NS_FORM_INPUT_HIDDEN ||
@@ -4400,17 +4407,18 @@ nsHTMLInputElement::OnValueChanged(PRBoo
 }
 
 void
 nsHTMLInputElement::FieldSetDisabledChanged(nsEventStates aStates, PRBool aNotify)
 {
   UpdateValueMissingValidityState();
   UpdateBarredFromConstraintValidation();
 
-  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+             NS_EVENT_STATE_MOZ_UI_INVALID;
   nsGenericHTMLFormElement::FieldSetDisabledChanged(aStates, aNotify);
 }
 
 PRInt32
 nsHTMLInputElement::GetFilterFromAccept()
 {
   NS_ASSERTION(HasAttr(kNameSpaceID_None, nsGkAtoms::accept),
                "You should not call GetFileFiltersFromAccept if the element"
--- a/content/html/content/src/nsHTMLSelectElement.cpp
+++ b/content/html/content/src/nsHTMLSelectElement.cpp
@@ -205,17 +205,18 @@ NS_IMETHODIMP
 nsHTMLSelectElement::SetCustomValidity(const nsAString& aError)
 {
   nsIConstraintValidation::SetCustomValidity(aError);
 
   nsIDocument* doc = GetCurrentDoc();
   if (doc) {
     MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
     doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_INVALID |
-                                            NS_EVENT_STATE_VALID);
+                                            NS_EVENT_STATE_VALID |
+                                            NS_EVENT_STATE_MOZ_UI_INVALID);
   }
 
   return NS_OK;
 }
 
 NS_IMETHODIMP
 nsHTMLSelectElement::GetForm(nsIDOMHTMLFormElement** aForm)
 {
@@ -355,17 +356,18 @@ nsHTMLSelectElement::RemoveOptionsFromLi
       // option.
       UpdateValueMissingValidityState();
 
       if (aNotify) {
         nsIDocument* doc = GetCurrentDoc();
         if (doc) {
           MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
           doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_VALID |
-                                                  NS_EVENT_STATE_INVALID);
+                                                  NS_EVENT_STATE_INVALID |
+                                                  NS_EVENT_STATE_MOZ_UI_INVALID);
         }
       }
     }
   }
 
   return NS_OK;
 }
 
@@ -877,17 +879,18 @@ nsHTMLSelectElement::OnOptionSelected(ns
   }
 
   UpdateValueMissingValidityState();
   if (aNotify) {
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
       MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
       doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_VALID |
-                                              NS_EVENT_STATE_INVALID);
+                                              NS_EVENT_STATE_INVALID |
+                                              NS_EVENT_STATE_MOZ_UI_INVALID);
     }
   }
 }
 
 void
 nsHTMLSelectElement::FindSelectedIndex(PRInt32 aStartIndex)
 {
   mSelectedIndex = -1;
@@ -1318,17 +1321,18 @@ nsHTMLSelectElement::SelectSomething(PRB
       NS_ENSURE_SUCCESS(rv, PR_FALSE);
 
       UpdateValueMissingValidityState();
       if (aNotify) {
         nsIDocument* doc = GetCurrentDoc();
         if (doc) {
           MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
           doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_VALID |
-                                                  NS_EVENT_STATE_INVALID);
+                                                  NS_EVENT_STATE_INVALID |
+                                                  NS_EVENT_STATE_MOZ_UI_INVALID);
         }
       }
 
       return PR_TRUE;
     }
   }
 
   return PR_FALSE;
@@ -1368,20 +1372,22 @@ nsresult
 nsHTMLSelectElement::AfterSetAttr(PRInt32 aNameSpaceID, nsIAtom* aName,
                                   const nsAString* aValue, PRBool aNotify)
 {
   nsEventStates states;
 
   if (aNameSpaceID == kNameSpaceID_None) {
     if (aName == nsGkAtoms::disabled) {
       UpdateBarredFromConstraintValidation();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     } else if (aName == nsGkAtoms::required) {
       UpdateValueMissingValidityState();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     }
   }
 
   if (aNotify && !states.IsEmpty()) {
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
       MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
       doc->ContentStatesChanged(this, nsnull, states);
@@ -1544,17 +1550,18 @@ nsHTMLSelectElement::PreHandleEvent(nsEv
 }
 
 nsEventStates
 nsHTMLSelectElement::IntrinsicState() const
 {
   nsEventStates state = nsGenericHTMLFormElement::IntrinsicState();
 
   if (IsCandidateForConstraintValidation()) {
-    state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
+    state |= IsValid() ? NS_EVENT_STATE_VALID
+                       : NS_EVENT_STATE_INVALID | NS_EVENT_STATE_MOZ_UI_INVALID;
   }
 
   if (HasAttr(kNameSpaceID_None, nsGkAtoms::required)) {
     state |= NS_EVENT_STATE_REQUIRED;
   } else {
     state |= NS_EVENT_STATE_OPTIONAL;
   }
 
@@ -2225,12 +2232,13 @@ nsHTMLSelectElement::UpdateBarredFromCon
   SetBarredFromConstraintValidation(IsDisabled());
 }
 
 void
 nsHTMLSelectElement::FieldSetDisabledChanged(nsEventStates aStates, PRBool aNotify)
 {
   UpdateBarredFromConstraintValidation();
 
-  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+             NS_EVENT_STATE_MOZ_UI_INVALID;
   nsGenericHTMLFormElement::FieldSetDisabledChanged(aStates, aNotify);
 }
 
--- a/content/html/content/src/nsHTMLTextAreaElement.cpp
+++ b/content/html/content/src/nsHTMLTextAreaElement.cpp
@@ -1002,17 +1002,18 @@ nsHTMLTextAreaElement::IntrinsicState() 
 
   if (HasAttr(kNameSpaceID_None, nsGkAtoms::required)) {
     state |= NS_EVENT_STATE_REQUIRED;
   } else {
     state |= NS_EVENT_STATE_OPTIONAL;
   }
 
   if (IsCandidateForConstraintValidation()) {
-    state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
+    state |= IsValid() ? NS_EVENT_STATE_VALID
+                       : NS_EVENT_STATE_INVALID | NS_EVENT_STATE_MOZ_UI_INVALID;
   }
 
   if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
       !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
     nsAutoString value;
     GetValueInternal(value, PR_TRUE);
     if (value.IsEmpty()) {
       state |= NS_EVENT_STATE_MOZ_PLACEHOLDER;
@@ -1123,20 +1124,22 @@ nsHTMLTextAreaElement::AfterSetAttr(PRIn
       UpdateValueMissingValidityState();
 
       // This *has* to be called *after* validity has changed.
       if (aName == nsGkAtoms::readonly || aName == nsGkAtoms::disabled) {
         UpdateBarredFromConstraintValidation();
       }
 
       states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID |
                 NS_EVENT_STATE_MOZ_SUBMITINVALID;
     } else if (aName == nsGkAtoms::maxlength) {
       UpdateTooLongValidityState();
-      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     }
 
     if (aNotify) {
       nsIDocument* doc = GetCurrentDoc();
 
       if (aName == nsGkAtoms::readonly) {
         UpdateEditableState();
         states |= NS_EVENT_STATE_MOZ_READONLY | NS_EVENT_STATE_MOZ_READWRITE;
@@ -1179,17 +1182,18 @@ NS_IMETHODIMP
 nsHTMLTextAreaElement::SetCustomValidity(const nsAString& aError)
 {
   nsIConstraintValidation::SetCustomValidity(aError);
 
   nsIDocument* doc = GetCurrentDoc();
   if (doc) {
     MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
     doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_INVALID |
-                                            NS_EVENT_STATE_VALID);
+                                            NS_EVENT_STATE_VALID |
+                                            NS_EVENT_STATE_MOZ_UI_INVALID);
   }
 
   return NS_OK;
 }
 
 PRBool
 nsHTMLTextAreaElement::IsTooLong()
 {
@@ -1397,17 +1401,18 @@ nsHTMLTextAreaElement::OnValueChanged(PR
   // Update the validity state
   PRBool validBefore = IsValid();
   UpdateTooLongValidityState();
   UpdateValueMissingValidityState();
 
   if (aNotify) {
     nsEventStates states;
     if (validBefore != IsValid()) {
-      states |= (NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID);
+      states |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+                NS_EVENT_STATE_MOZ_UI_INVALID;
     }
 
     if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder)
         && !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
       states |= NS_EVENT_STATE_MOZ_PLACEHOLDER;
     }
 
     if (!states.IsEmpty()) {
@@ -1421,12 +1426,13 @@ nsHTMLTextAreaElement::OnValueChanged(PR
 }
 
 void
 nsHTMLTextAreaElement::FieldSetDisabledChanged(nsEventStates aStates, PRBool aNotify)
 {
   UpdateValueMissingValidityState();
   UpdateBarredFromConstraintValidation();
 
-  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID;
+  aStates |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_INVALID |
+             NS_EVENT_STATE_MOZ_UI_INVALID;
   nsGenericHTMLFormElement::FieldSetDisabledChanged(aStates, aNotify);
 }
 
copy from layout/reftests/css-invalid/button/button-button.html
copy to layout/reftests/css-ui-invalid/button/button-button.html
--- a/layout/reftests/css-invalid/button/button-button.html
+++ b/layout/reftests/css-ui-invalid/button/button-button.html
@@ -1,9 +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. -->
+             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('b').setCustomValidity('foo'); document.documentElement.className='';">
     <button class='notinvalid' id='b' type='button'></button>
   </body>
 </html>
copy from layout/reftests/css-invalid/button/button-disabled-fieldset-1.html
copy to layout/reftests/css-ui-invalid/button/button-disabled-fieldset-1.html
--- a/layout/reftests/css-invalid/button/button-disabled-fieldset-1.html
+++ b/layout/reftests/css-ui-invalid/button/button-disabled-fieldset-1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       document.documentElement.className='';
copy from layout/reftests/css-invalid/button/button-disabled-fieldset-2.html
copy to layout/reftests/css-ui-invalid/button/button-disabled-fieldset-2.html
--- a/layout/reftests/css-invalid/button/button-disabled-fieldset-2.html
+++ b/layout/reftests/css-ui-invalid/button/button-disabled-fieldset-2.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       var fieldsets = document.getElementsByTagName("fieldset");
copy from layout/reftests/css-invalid/button/button-disabled.html
copy to layout/reftests/css-ui-invalid/button/button-disabled.html
--- a/layout/reftests/css-invalid/button/button-disabled.html
+++ b/layout/reftests/css-ui-invalid/button/button-disabled.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <button class='notinvalid' disabled></button>
   </body>
 </html>
copy from layout/reftests/css-invalid/button/button-dyn-disabled.html
copy to layout/reftests/css-ui-invalid/button/button-dyn-disabled.html
--- a/layout/reftests/css-invalid/button/button-dyn-disabled.html
+++ b/layout/reftests/css-ui-invalid/button/button-dyn-disabled.html
@@ -1,12 +1,12 @@
 <!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. -->
+             validation and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/button/button-dyn-not-disabled.html
copy to layout/reftests/css-ui-invalid/button/button-dyn-not-disabled.html
--- a/layout/reftests/css-invalid/button/button-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-invalid/button/button-dyn-not-disabled.html
@@ -1,13 +1,13 @@
 <!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. -->
+             by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/button/button-fieldset-legend-ref.html
copy to layout/reftests/css-ui-invalid/button/button-fieldset-legend-ref.html
copy from layout/reftests/css-invalid/button/button-fieldset-legend.html
copy to layout/reftests/css-ui-invalid/button/button-fieldset-legend.html
--- a/layout/reftests/css-invalid/button/button-fieldset-legend.html
+++ b/layout/reftests/css-ui-invalid/button/button-fieldset-legend.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if button has a disabled fieldset ancestor, but is in the first
              legend, it is not barred from constraint validation and should be
-             affected by :invalid pseudo-class. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       document.documentElement.className='';
     }
copy from layout/reftests/css-invalid/button/button-fieldset-ref.html
copy to layout/reftests/css-ui-invalid/button/button-fieldset-ref.html
copy from layout/reftests/css-invalid/button/button-invalid.html
copy to layout/reftests/css-ui-invalid/button/button-invalid.html
--- a/layout/reftests/css-invalid/button/button-invalid.html
+++ b/layout/reftests/css-ui-invalid/button/button-invalid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if button has a custom error, it should not be affected by :invalid
+  <!-- Test: if button has a custom error, it should not be affected by :-moz-ui-invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
     <button class='invalid' id='b'></button>
   </body>
 </html>
copy from layout/reftests/css-invalid/button/button-ref.html
copy to layout/reftests/css-ui-invalid/button/button-ref.html
copy from layout/reftests/css-invalid/button/button-reset.html
copy to layout/reftests/css-ui-invalid/button/button-reset.html
--- a/layout/reftests/css-invalid/button/button-reset.html
+++ b/layout/reftests/css-ui-invalid/button/button-reset.html
@@ -1,9 +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. -->
+             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('b').setCustomValidity('foo'); document.documentElement.className='';">
     <button class='notinvalid' id='b' type='reset'></button>
   </body>
 </html>
copy from layout/reftests/css-invalid/button/button-type-barred.html
copy to layout/reftests/css-ui-invalid/button/button-type-barred.html
--- a/layout/reftests/css-invalid/button/button-type-barred.html
+++ b/layout/reftests/css-ui-invalid/button/button-type-barred.html
@@ -1,13 +1,13 @@
 <!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. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/button/button-type-invalid.html
copy to layout/reftests/css-ui-invalid/button/button-type-invalid.html
--- a/layout/reftests/css-invalid/button/button-type-invalid.html
+++ b/layout/reftests/css-ui-invalid/button/button-type-invalid.html
@@ -1,13 +1,13 @@
 <!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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/button/button-valid.html
copy to layout/reftests/css-ui-invalid/button/button-valid.html
--- a/layout/reftests/css-invalid/button/button-valid.html
+++ b/layout/reftests/css-ui-invalid/button/button-valid.html
@@ -1,9 +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. -->
+             validation, it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <button class='notinvalid'</button>
   </body>
 </html>
copy from layout/reftests/css-invalid/button/reftest.list
copy to layout/reftests/css-ui-invalid/button/reftest.list
copy from layout/reftests/css-invalid/button/style.css
copy to layout/reftests/css-ui-invalid/button/style.css
--- a/layout/reftests/css-invalid/button/style.css
+++ b/layout/reftests/css-ui-invalid/button/style.css
@@ -1,18 +1,18 @@
 /* Override default style */
-button:invalid {
+button:-moz-ui-invalid {
   box-shadow: none;
 }
 
 button.notinvalid {
   background-color: green;
 }
-button.notinvalid:invalid {
+button.notinvalid:-moz-ui-invalid {
   background-color: red;
 }
 
 button.invalid {
   background-color: red;
 }
-button.invalid:invalid {
+button.invalid:-moz-ui-invalid {
   background-color: green;
 }
copy from layout/reftests/css-invalid/default-style/button-ref.html
copy to layout/reftests/css-ui-invalid/default-style/button-ref.html
copy from layout/reftests/css-invalid/default-style/button.html
copy to layout/reftests/css-ui-invalid/default-style/button.html
copy from layout/reftests/css-invalid/default-style/fieldset-ref.html
copy to layout/reftests/css-ui-invalid/default-style/fieldset-ref.html
copy from layout/reftests/css-invalid/default-style/fieldset.html
copy to layout/reftests/css-ui-invalid/default-style/fieldset.html
copy from layout/reftests/css-invalid/default-style/input-ref.html
copy to layout/reftests/css-ui-invalid/default-style/input-ref.html
copy from layout/reftests/css-invalid/default-style/input.html
copy to layout/reftests/css-ui-invalid/default-style/input.html
copy from layout/reftests/css-invalid/default-style/reftest.list
copy to layout/reftests/css-ui-invalid/default-style/reftest.list
copy from layout/reftests/css-invalid/default-style/select-ref.html
copy to layout/reftests/css-ui-invalid/default-style/select-ref.html
copy from layout/reftests/css-invalid/default-style/select.html
copy to layout/reftests/css-ui-invalid/default-style/select.html
copy from layout/reftests/css-invalid/default-style/style.css
copy to layout/reftests/css-ui-invalid/default-style/style.css
copy from layout/reftests/css-invalid/default-style/textarea-ref.html
copy to layout/reftests/css-ui-invalid/default-style/textarea-ref.html
copy from layout/reftests/css-invalid/default-style/textarea.html
copy to layout/reftests/css-ui-invalid/default-style/textarea.html
copy from layout/reftests/css-invalid/input/input-button-ref.html
copy to layout/reftests/css-ui-invalid/input/input-button-ref.html
copy from layout/reftests/css-invalid/input/input-button.html
copy to layout/reftests/css-ui-invalid/input/input-button.html
--- a/layout/reftests/css-invalid/input/input-button.html
+++ b/layout/reftests/css-ui-invalid/input/input-button.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' type='button'>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-customerror.html
copy to layout/reftests/css-ui-invalid/input/input-customerror.html
--- a/layout/reftests/css-invalid/input/input-customerror.html
+++ b/layout/reftests/css-ui-invalid/input/input-customerror.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if input has a custom error, it should be affected by :invalid
+  <!-- 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='';">
     <input class='invalid' id='t'>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-disabled-fieldset-1.html
copy to layout/reftests/css-ui-invalid/input/input-disabled-fieldset-1.html
--- a/layout/reftests/css-invalid/input/input-disabled-fieldset-1.html
+++ b/layout/reftests/css-ui-invalid/input/input-disabled-fieldset-1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             constraint validation and should not be affected by :-moz-ui-invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <fieldset>
         <input class='notinvalid' required>
       </fieldset>
     </fieldset>
copy from layout/reftests/css-invalid/input/input-disabled-fieldset-2.html
copy to layout/reftests/css-ui-invalid/input/input-disabled-fieldset-2.html
--- a/layout/reftests/css-invalid/input/input-disabled-fieldset-2.html
+++ b/layout/reftests/css-ui-invalid/input/input-disabled-fieldset-2.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if input has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var fieldsets = document.getElementsByTagName("fieldset");
       fieldsets[1].disabled = true;
       fieldsets[0].disabled = false;
copy from layout/reftests/css-invalid/input/input-disabled.html
copy to layout/reftests/css-ui-invalid/input/input-disabled.html
--- a/layout/reftests/css-invalid/input/input-disabled.html
+++ b/layout/reftests/css-ui-invalid/input/input-disabled.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' disabled>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-dyn-disabled.html
copy to layout/reftests/css-ui-invalid/input/input-dyn-disabled.html
--- a/layout/reftests/css-invalid/input/input-dyn-disabled.html
+++ b/layout/reftests/css-ui-invalid/input/input-dyn-disabled.html
@@ -1,12 +1,12 @@
 <!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. -->
+             validation and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/input/input-dyn-not-disabled.html
copy to layout/reftests/css-ui-invalid/input/input-dyn-not-disabled.html
--- a/layout/reftests/css-invalid/input/input-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-invalid/input/input-dyn-not-disabled.html
@@ -1,13 +1,13 @@
 <!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. -->
+             by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/input/input-dyn-not-readonly.html
copy to layout/reftests/css-ui-invalid/input/input-dyn-not-readonly.html
--- a/layout/reftests/css-invalid/input/input-dyn-not-readonly.html
+++ b/layout/reftests/css-ui-invalid/input/input-dyn-not-readonly.html
@@ -1,9 +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. -->
+             validation and should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').removeAttribute('readonly'); document.documentElement.className='';">
     <input class='invalid' id='i' readonly required>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-dyn-readonly.html
copy to layout/reftests/css-ui-invalid/input/input-dyn-readonly.html
--- a/layout/reftests/css-invalid/input/input-dyn-readonly.html
+++ b/layout/reftests/css-ui-invalid/input/input-dyn-readonly.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').readOnly='ro'; document.documentElement.className='';">
     <input class='notinvalid' id='i' required>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-email-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-email-invalid.html
--- a/layout/reftests/css-invalid/input/input-email-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-email-invalid.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
-             it should be affected by :invalid pseudo-class. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='invalid' type='email' value='foo'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-email-ref.html
copy to layout/reftests/css-ui-invalid/input/input-email-ref.html
copy from layout/reftests/css-invalid/input/input-email-valid.html
copy to layout/reftests/css-ui-invalid/input/input-email-valid.html
--- a/layout/reftests/css-invalid/input/input-email-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-email-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' type='email' value='foo@bar.com'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-fieldset-legend-ref.html
copy to layout/reftests/css-ui-invalid/input/input-fieldset-legend-ref.html
copy from layout/reftests/css-invalid/input/input-fieldset-legend.html
copy to layout/reftests/css-ui-invalid/input/input-fieldset-legend.html
--- a/layout/reftests/css-invalid/input/input-fieldset-legend.html
+++ b/layout/reftests/css-ui-invalid/input/input-fieldset-legend.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input has a disabled fieldset ancestor, but is in the first
              legend, it is not barred from constraint validation and should be
-             affected by :invalid pseudo-class. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <legend>
         <input class='invalid' required>
       </legend>
     </fieldset>
   </body>
copy from layout/reftests/css-invalid/input/input-fieldset-ref.html
copy to layout/reftests/css-ui-invalid/input/input-fieldset-ref.html
copy from layout/reftests/css-invalid/input/input-maxlength-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-maxlength-invalid.html
--- a/layout/reftests/css-invalid/input/input-maxlength-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-maxlength-invalid.html
@@ -1,11 +1,11 @@
 <!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. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <!-- TODO: this is valid until bug bug 613016 and bug 613019 are fixed. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').value='foo'; document.documentElement.className='';">
     <input class='notinvalid' maxlength="2" id='i'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-maxlength-valid.html
copy to layout/reftests/css-ui-invalid/input/input-maxlength-valid.html
--- a/layout/reftests/css-invalid/input/input-maxlength-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-maxlength-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' maxlength="2">
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-pattern-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-pattern-invalid.html
--- a/layout/reftests/css-invalid/input/input-pattern-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-pattern-invalid.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
-             it should be affected by :invalid pseudo-class. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='invalid' pattern='bar' value='foo'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-pattern-valid.html
copy to layout/reftests/css-ui-invalid/input/input-pattern-valid.html
--- a/layout/reftests/css-invalid/input/input-pattern-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-pattern-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' pattern='foo' value='foo'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-readonly.html
copy to layout/reftests/css-ui-invalid/input/input-readonly.html
--- a/layout/reftests/css-invalid/input/input-readonly.html
+++ b/layout/reftests/css-ui-invalid/input/input-readonly.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' readonly>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-ref.html
copy to layout/reftests/css-ui-invalid/input/input-ref.html
copy from layout/reftests/css-invalid/input/input-required-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-required-invalid.html
--- a/layout/reftests/css-invalid/input/input-required-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-required-invalid.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
-             it should be affected by :invalid pseudo-class. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='invalid' required>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-required-valid.html
copy to layout/reftests/css-ui-invalid/input/input-required-valid.html
--- a/layout/reftests/css-invalid/input/input-required-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-required-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' value='foo' required>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-reset.html
copy to layout/reftests/css-ui-invalid/input/input-reset.html
--- a/layout/reftests/css-invalid/input/input-reset.html
+++ b/layout/reftests/css-ui-invalid/input/input-reset.html
@@ -1,10 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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 class='notinvalid' type='reset' value=''>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-type-barred.html
copy to layout/reftests/css-ui-invalid/input/input-type-barred.html
--- a/layout/reftests/css-invalid/input/input-type-barred.html
+++ b/layout/reftests/css-ui-invalid/input/input-type-barred.html
@@ -1,10 +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. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('i').type='button'; document.documentElement.className='';">
     <input class='notinvalid' id='i'>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-type-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-type-invalid.html
copy from layout/reftests/css-invalid/input/input-url-invalid.html
copy to layout/reftests/css-ui-invalid/input/input-url-invalid.html
--- a/layout/reftests/css-invalid/input/input-url-invalid.html
+++ b/layout/reftests/css-ui-invalid/input/input-url-invalid.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if input isn't valid nor barred from constraint validation,
-             it should be affected by :invalid pseudo-class. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='invalid' type='url' value='foo'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-url-ref.html
copy to layout/reftests/css-ui-invalid/input/input-url-ref.html
copy from layout/reftests/css-invalid/input/input-url-valid.html
copy to layout/reftests/css-ui-invalid/input/input-url-valid.html
--- a/layout/reftests/css-invalid/input/input-url-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-url-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid' type='url' value='http://mozilla.org/'>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/input/input-valid.html
copy to layout/reftests/css-ui-invalid/input/input-valid.html
--- a/layout/reftests/css-invalid/input/input-valid.html
+++ b/layout/reftests/css-ui-invalid/input/input-valid.html
@@ -1,9 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='notinvalid'>
   </body>
 </html>
copy from layout/reftests/css-invalid/input/input-withtext-ref.html
copy to layout/reftests/css-ui-invalid/input/input-withtext-ref.html
copy from layout/reftests/css-invalid/input/reftest.list
copy to layout/reftests/css-ui-invalid/input/reftest.list
copy from layout/reftests/css-invalid/input/style.css
copy to layout/reftests/css-ui-invalid/input/style.css
--- a/layout/reftests/css-invalid/input/style.css
+++ b/layout/reftests/css-ui-invalid/input/style.css
@@ -1,18 +1,18 @@
 /* Override default style */
-input:invalid {
+input:-moz-ui-invalid {
   box-shadow: none;
 }
 
 input.notinvalid {
   background-color: green;
 }
-input.notinvalid:invalid {
+input.notinvalid:-moz-ui-invalid {
   background-color: red;
 }
 
 input.invalid {
   background-color: red;
 }
-input.invalid:invalid {
+input.invalid:-moz-ui-invalid {
   background-color: green;
 }
copy from layout/reftests/css-invalid/reftest.list
copy to layout/reftests/css-ui-invalid/reftest.list
--- a/layout/reftests/css-invalid/reftest.list
+++ b/layout/reftests/css-ui-invalid/reftest.list
@@ -1,12 +1,8 @@
-# :invalid should not apply on fieldset (always barred from constraint validation)
-include fieldset/reftest.list
-
-# :invalid should apply on the following elements
+# :-moz-ui-invalid should apply on the following elements
 include button/reftest.list
 include input/reftest.list
 include select/reftest.list
 include textarea/reftest.list
-include output/reftest.list
 
-# default :invalid style
+# default :-moz-ui-invalid style
 include default-style/reftest.list
copy from layout/reftests/css-invalid/select/reftest.list
copy to layout/reftests/css-ui-invalid/select/reftest.list
copy from layout/reftests/css-invalid/select/select-disabled-fieldset-1.html
copy to layout/reftests/css-ui-invalid/select/select-disabled-fieldset-1.html
--- a/layout/reftests/css-invalid/select/select-disabled-fieldset-1.html
+++ b/layout/reftests/css-ui-invalid/select/select-disabled-fieldset-1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var e = document.getElementById('s');
       e.setCustomValidity('foo');
       document.documentElement.className='';
copy from layout/reftests/css-invalid/select/select-disabled-fieldset-2.html
copy to layout/reftests/css-ui-invalid/select/select-disabled-fieldset-2.html
--- a/layout/reftests/css-invalid/select/select-disabled-fieldset-2.html
+++ b/layout/reftests/css-ui-invalid/select/select-disabled-fieldset-2.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var e = document.getElementById('s');
       e.setCustomValidity('foo');
       var fieldsets = document.getElementsByTagName("fieldset");
copy from layout/reftests/css-invalid/select/select-disabled-ref.html
copy to layout/reftests/css-ui-invalid/select/select-disabled-ref.html
copy from layout/reftests/css-invalid/select/select-disabled.html
copy to layout/reftests/css-ui-invalid/select/select-disabled.html
--- a/layout/reftests/css-invalid/select/select-disabled.html
+++ b/layout/reftests/css-ui-invalid/select/select-disabled.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('s').setCustomValidity('foo'); document.documentElement.className='';">
     <select class='notinvalid' id='s' disabled></select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/select-dyn-disabled.html
copy to layout/reftests/css-ui-invalid/select/select-dyn-disabled.html
--- a/layout/reftests/css-invalid/select/select-dyn-disabled.html
+++ b/layout/reftests/css-ui-invalid/select/select-dyn-disabled.html
@@ -1,12 +1,12 @@
 <!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. -->
+             validation and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/select/select-dyn-not-disabled.html
copy to layout/reftests/css-ui-invalid/select/select-dyn-not-disabled.html
--- a/layout/reftests/css-invalid/select/select-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-invalid/select/select-dyn-not-disabled.html
@@ -1,13 +1,13 @@
 <!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. -->
+             by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/select/select-fieldset-legend-ref.html
copy to layout/reftests/css-ui-invalid/select/select-fieldset-legend-ref.html
copy from layout/reftests/css-invalid/select/select-fieldset-legend.html
copy to layout/reftests/css-ui-invalid/select/select-fieldset-legend.html
--- a/layout/reftests/css-invalid/select/select-fieldset-legend.html
+++ b/layout/reftests/css-ui-invalid/select/select-fieldset-legend.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if select has a disabled fieldset ancestor, but is in the first
              legend, it is not barred from constraint validation and should be
-             affected by :invalid pseudo-class. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function onLoadHandler()
     {
       var e = document.getElementById('b');
       e.setCustomValidity('foo');
       document.documentElement.className='';
     }
copy from layout/reftests/css-invalid/select/select-fieldset-ref.html
copy to layout/reftests/css-ui-invalid/select/select-fieldset-ref.html
copy from layout/reftests/css-invalid/select/select-invalid.html
copy to layout/reftests/css-ui-invalid/select/select-invalid.html
--- a/layout/reftests/css-invalid/select/select-invalid.html
+++ b/layout/reftests/css-ui-invalid/select/select-invalid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if select has a custom error, it should be affected by :invalid
+  <!-- Test: if select 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('s').setCustomValidity('foo'); document.documentElement.className='';">
     <select class='invalid' id='s'></select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/select-ref.html
copy to layout/reftests/css-ui-invalid/select/select-ref.html
copy from layout/reftests/css-invalid/select/select-required-invalid.html
copy to layout/reftests/css-ui-invalid/select/select-required-invalid.html
--- a/layout/reftests/css-invalid/select/select-required-invalid.html
+++ b/layout/reftests/css-ui-invalid/select/select-required-invalid.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select is required and has a select option which has an empty
-             string value, :invalid should apply. -->
+             string value, :-moz-ui-invalid should apply. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <select class='invalid' required>
       <option selected value="">foo</option>
     </select>
   </body>
 </html></html>
copy from layout/reftests/css-invalid/select/select-required-multiple-invalid.html
copy to layout/reftests/css-ui-invalid/select/select-required-multiple-invalid.html
--- a/layout/reftests/css-invalid/select/select-required-multiple-invalid.html
+++ b/layout/reftests/css-ui-invalid/select/select-required-multiple-invalid.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select is required and has all selected option value set to the
-             string string, :invalid should apply. -->
+             string string, :-moz-ui-invalid should apply. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <select class='invalid' required multiple>
       <option selected></option>
       <option selected value="">foo</option>
     </select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/select-required-multiple-ref.html
copy to layout/reftests/css-ui-invalid/select/select-required-multiple-ref.html
copy from layout/reftests/css-invalid/select/select-required-multiple-valid.html
copy to layout/reftests/css-ui-invalid/select/select-required-multiple-valid.html
--- a/layout/reftests/css-invalid/select/select-required-multiple-valid.html
+++ b/layout/reftests/css-ui-invalid/select/select-required-multiple-valid.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select is required and has a selected option which has value
-             different from the empty string, :invalid should not apply. -->
+  different from the empty string, :-moz-ui-invalid should not apply. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <select class='notinvalid' required multiple>
       <option selected></option>
       <option selected>foo</option>
     </select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/select-required-ref.html
copy to layout/reftests/css-ui-invalid/select/select-required-ref.html
copy from layout/reftests/css-invalid/select/select-required-valid.html
copy to layout/reftests/css-ui-invalid/select/select-required-valid.html
--- a/layout/reftests/css-invalid/select/select-required-valid.html
+++ b/layout/reftests/css-ui-invalid/select/select-required-valid.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if select is required and has a select option which has value
-             different from the empty string, :invalid should not apply. -->
+             different from the empty string, :-moz-ui-invalid should not apply. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <select class='notinvalid' required>
       <option selected>foo</option>
     </select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/select-valid.html
copy to layout/reftests/css-ui-invalid/select/select-valid.html
--- a/layout/reftests/css-invalid/select/select-valid.html
+++ b/layout/reftests/css-ui-invalid/select/select-valid.html
@@ -1,9 +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. -->
+             validation, it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <select class='notinvalid'></select>
   </body>
 </html>
copy from layout/reftests/css-invalid/select/style.css
copy to layout/reftests/css-ui-invalid/select/style.css
--- a/layout/reftests/css-invalid/select/style.css
+++ b/layout/reftests/css-ui-invalid/select/style.css
@@ -1,18 +1,18 @@
 /* Override default style */
-select:invalid {
+select:-moz-ui-invalid {
   box-shadow: none;
 }
 
 select.notinvalid {
   background-color: green;
 }
-select.notinvalid:invalid {
+select.notinvalid:-moz-ui-invalid {
   background-color: red;
 }
 
 select.invalid {
   background-color: red;
 }
-select.invalid:invalid {
+select.invalid:-moz-ui-invalid {
   background-color: green;
 }
copy from layout/reftests/css-invalid/textarea/reftest.list
copy to layout/reftests/css-ui-invalid/textarea/reftest.list
copy from layout/reftests/css-invalid/textarea/style.css
copy to layout/reftests/css-ui-invalid/textarea/style.css
--- a/layout/reftests/css-invalid/textarea/style.css
+++ b/layout/reftests/css-ui-invalid/textarea/style.css
@@ -1,18 +1,18 @@
 /* Override default style */
-textarea:invalid {
+textarea:-moz-ui-invalid {
   box-shadow: none;
 }
 
 textarea.notinvalid {
   background-color: green;
 }
-textarea.notinvalid:invalid {
+textarea.notinvalid:-moz-ui-invalid {
   background-color: red;
 }
 
 textarea.invalid {
   background-color: red;
 }
-textarea.invalid:invalid {
+textarea.invalid:-moz-ui-invalid {
   background-color: green;
 }
copy from layout/reftests/css-invalid/textarea/textarea-customerror.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
--- a/layout/reftests/css-invalid/textarea/textarea-customerror.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-customerror.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if textarea has a custom error, it should be affected by :invalid
+  <!-- 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='';">
     <textarea class='invalid' id='t'></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-1.html
--- a/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-1.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             constraint validation and should not be affected by :-moz-ui-invalid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <fieldset>
         <textarea class='notinvalid' required></textarea>
       </fieldset>
     </fieldset>
copy from layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-2.html
--- a/layout/reftests/css-invalid/textarea/textarea-disabled-fieldset-2.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-disabled-fieldset-2.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <!-- Test: if textarea has a disabled fieldset ancestor, it is barred from
-             constraint validation and should not be affected by :invalid
+             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()
     {
       var fieldsets = document.getElementsByTagName("fieldset");
       fieldsets[1].disabled = true;
       fieldsets[0].disabled = false;
copy from layout/reftests/css-invalid/textarea/textarea-disabled.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-disabled.html
--- a/layout/reftests/css-invalid/textarea/textarea-disabled.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-disabled.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='notinvalid' disabled></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-dyn-disabled.html
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-disabled.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-disabled.html
@@ -1,12 +1,12 @@
 <!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. -->
+             validation and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-disabled.html
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-disabled.html
@@ -1,13 +1,13 @@
 <!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. -->
+             by :-moz-ui-invalid pseudo-class. -->
   <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='';
copy from layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly.html
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-not-readonly.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-not-readonly.html
@@ -1,9 +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. -->
+             validation and should be 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='';">
     <textarea class='invalid' id='t' readonly required></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
--- a/layout/reftests/css-invalid/textarea/textarea-dyn-readonly.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-dyn-readonly.html
@@ -1,9 +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. -->
+             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='';">
     <textarea class='notinvalid' id='t' required></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-fieldset-legend-ref.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-fieldset-legend-ref.html
copy from layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-fieldset-legend.html
--- a/layout/reftests/css-invalid/textarea/textarea-fieldset-legend.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-fieldset-legend.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea has a disabled fieldset ancestor, but is in the first
              legend, it is not barred from constraint validation and should be
-             affected by :invalid pseudo-class. -->
+             affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <legend>
         <textarea class='invalid' required></textarea>
       </legend>
     </fieldset>
   </body>
copy from layout/reftests/css-invalid/textarea/textarea-fieldset-ref.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-fieldset-ref.html
copy from layout/reftests/css-invalid/textarea/textarea-maxlength-invalid.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-maxlength-invalid.html
--- a/layout/reftests/css-invalid/textarea/textarea-maxlength-invalid.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-maxlength-invalid.html
@@ -1,11 +1,11 @@
 <!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. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <!-- TODO: this is valid until bug bug 613016 and bug 613019 are fixed. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('t').value='foo'; document.documentElement.className='';">
     <textarea class='notinvalid' maxlength="2" id='t'></textarea>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/textarea/textarea-maxlength-valid.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-maxlength-valid.html
--- a/layout/reftests/css-invalid/textarea/textarea-maxlength-valid.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-maxlength-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='notinvalid' maxlength="2"></textarea>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/textarea/textarea-readonly.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-readonly.html
--- a/layout/reftests/css-invalid/textarea/textarea-readonly.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-readonly.html
@@ -1,9 +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. -->
+             and should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='notinvalid' readonly></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-ref.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-ref.html
copy from layout/reftests/css-invalid/textarea/textarea-required-invalid.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-required-invalid.html
--- a/layout/reftests/css-invalid/textarea/textarea-required-invalid.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-required-invalid.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
-             it should be affected by :invalid pseudo-class. -->
+             it should be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='invalid' required></textarea>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/textarea/textarea-required-valid.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-required-valid.html
--- a/layout/reftests/css-invalid/textarea/textarea-required-valid.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-required-valid.html
@@ -1,10 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='notinvalid' required>foo</textarea>
   </body>
 </html>
 
copy from layout/reftests/css-invalid/textarea/textarea-valid.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-valid.html
--- a/layout/reftests/css-invalid/textarea/textarea-valid.html
+++ b/layout/reftests/css-ui-invalid/textarea/textarea-valid.html
@@ -1,9 +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. -->
+             it should not be affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='notinvalid'></textarea>
   </body>
 </html>
copy from layout/reftests/css-invalid/textarea/textarea-withtext-ref.html
copy to layout/reftests/css-ui-invalid/textarea/textarea-withtext-ref.html
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -87,16 +87,19 @@ include css-valid/reftest.list
 include css-invalid/reftest.list
 
 # css-submit-invalid
 include css-submit-invalid/reftest.list
 
 # css transitions
 include css-transitions/reftest.list
 
+# css :-moz-ui-invalid
+include css-ui-invalid/reftest.list
+
 # css values and units
 include css-valuesandunits/reftest.list
 
 # Reftests in css-visited are run using
 # layout/style/test/test_visited_reftests instead of using the reftest
 # harness.
 
 include cssom/reftest.list