Bug 605125 (3/5) - :-moz-ui-valid shouldn't apply if the element hasn't been modified. r=bz a=jst
authorMounir Lamouri <mounir.lamouri@gmail.com>
Wed, 24 Nov 2010 00:55:22 +0100
changeset 58153 b47d30240391c05348822bf108245a560b0adb8e
parent 58152 a5443d86c431c497301c3f110f4aecf8710671c7
child 58154 8761f71f04b5a0596226c9051d27412b1e1e517d
push id17175
push usermlamouri@mozilla.com
push dateWed, 24 Nov 2010 10:15:50 +0000
treeherderautoland@7f5cd850578e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, jst
bugs605125
milestone2.0b8pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 605125 (3/5) - :-moz-ui-valid shouldn't apply if the element hasn't been modified. r=bz a=jst
content/html/content/src/nsHTMLInputElement.cpp
content/html/content/src/nsHTMLTextAreaElement.cpp
layout/reftests/css-ui-valid/input/input-checkbox-valid-changed.html
layout/reftests/css-ui-valid/input/input-checkbox-valid-default.html
layout/reftests/css-ui-valid/input/input-dyn-not-disabled-changed.html
layout/reftests/css-ui-valid/input/input-dyn-not-disabled.html
layout/reftests/css-ui-valid/input/input-dyn-not-readonly-changed.html
layout/reftests/css-ui-valid/input/input-dyn-not-readonly.html
layout/reftests/css-ui-valid/input/input-email-valid-changed.html
layout/reftests/css-ui-valid/input/input-email-valid.html
layout/reftests/css-ui-valid/input/input-fieldset-legend.html
layout/reftests/css-ui-valid/input/input-file-ref.html
layout/reftests/css-ui-valid/input/input-file-valid-changed.html
layout/reftests/css-ui-valid/input/input-file-valid-default.html
layout/reftests/css-ui-valid/input/input-maxlength-valid-changed.html
layout/reftests/css-ui-valid/input/input-maxlength-valid.html
layout/reftests/css-ui-valid/input/input-pattern-valid-changed.html
layout/reftests/css-ui-valid/input/input-pattern-valid.html
layout/reftests/css-ui-valid/input/input-radio-valid-changed.html
layout/reftests/css-ui-valid/input/input-radio-valid-default.html
layout/reftests/css-ui-valid/input/input-required-valid-changed.html
layout/reftests/css-ui-valid/input/input-required-valid.html
layout/reftests/css-ui-valid/input/input-url-valid-changed.html
layout/reftests/css-ui-valid/input/input-url-valid.html
layout/reftests/css-ui-valid/input/input-valid.html
layout/reftests/css-ui-valid/input/reftest.list
layout/reftests/css-ui-valid/input/success-ref.html
layout/reftests/css-ui-valid/select/select-dyn-not-disabled-changed.html
layout/reftests/css-ui-valid/textarea/reftest.list
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled-changed.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly-changed.html
layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
layout/reftests/css-ui-valid/textarea/textarea-fieldset-legend.html
layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid-changed.html
layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid.html
layout/reftests/css-ui-valid/textarea/textarea-required-valid-changed.html
layout/reftests/css-ui-valid/textarea/textarea-required-valid.html
layout/reftests/css-ui-valid/textarea/textarea-valid.html
--- a/content/html/content/src/nsHTMLInputElement.cpp
+++ b/content/html/content/src/nsHTMLInputElement.cpp
@@ -1447,17 +1447,18 @@ nsHTMLInputElement::SetValueChanged(PRBo
       FreeData();
     }
   }
 
   if (valueChangedBefore != aValueChanged) {
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
       mozAutoDocUpdate upd(doc, UPDATE_CONTENT_STATE, PR_TRUE);
-      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_UI_INVALID);
+      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_UI_VALID |
+                                              NS_EVENT_STATE_MOZ_UI_INVALID);
     }
   }
 
   return NS_OK;
 }
 
 NS_IMETHODIMP 
 nsHTMLInputElement::GetChecked(PRBool* aChecked)
@@ -1497,16 +1498,17 @@ nsHTMLInputElement::SetCheckedChangedInt
 
   // This method can't be called when we are not authorized to notify
   // so we do not need a aNotify parameter.
   if (checkedChangedBefore != aCheckedChanged) {
     nsIDocument* document = GetCurrentDoc();
     if (document) {
       mozAutoDocUpdate upd(document, UPDATE_CONTENT_STATE, PR_TRUE);
       document->ContentStatesChanged(this, nsnull,
+                                     NS_EVENT_STATE_MOZ_UI_VALID |
                                      NS_EVENT_STATE_MOZ_UI_INVALID);
     }
   }
 }
 
 NS_IMETHODIMP
 nsHTMLInputElement::SetChecked(PRBool aChecked)
 {
@@ -3313,17 +3315,27 @@ nsHTMLInputElement::IntrinsicState() con
   if (DoesRequiredApply() && HasAttr(kNameSpaceID_None, nsGkAtoms::required)) {
     state |= NS_EVENT_STATE_REQUIRED;
   } else {
     state |= NS_EVENT_STATE_OPTIONAL;
   }
 
   if (IsCandidateForConstraintValidation()) {
     if (IsValid()) {
-      state |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_MOZ_UI_VALID;
+      state |= NS_EVENT_STATE_VALID;
+
+      // NS_EVENT_STATE_MOZ_UI_VALID applies if the value has been changed.
+      // This doesn't apply to elements with value mode default.
+      ValueModeType valueMode = GetValueMode();
+      if (valueMode == VALUE_MODE_DEFAULT ||
+          (valueMode == VALUE_MODE_DEFAULT_ON && GetCheckedChanged()) ||
+          ((valueMode == VALUE_MODE_VALUE ||
+            valueMode == VALUE_MODE_FILENAME) && GetValueChanged())) {
+        state |= NS_EVENT_STATE_MOZ_UI_VALID;
+      }
     } else {
       state |= NS_EVENT_STATE_INVALID;
 
       if (GET_BOOLBIT(mBitField, BF_CAN_SHOW_INVALID_UI) &&
           ShouldShowInvalidUI()) {
         state |= NS_EVENT_STATE_MOZ_UI_INVALID;
       }
     }
--- a/content/html/content/src/nsHTMLTextAreaElement.cpp
+++ b/content/html/content/src/nsHTMLTextAreaElement.cpp
@@ -592,17 +592,18 @@ nsHTMLTextAreaElement::SetValueChanged(P
   PRBool previousValue = mValueChanged;
 
   mValueChanged = aValueChanged;
   if (!aValueChanged && !mState->IsEmpty()) {
     mState->EmptyValue();
   }
 
   if (mValueChanged != previousValue) {
-    nsEventStates states = NS_EVENT_STATE_MOZ_UI_INVALID;
+    nsEventStates states = NS_EVENT_STATE_MOZ_UI_VALID |
+                           NS_EVENT_STATE_MOZ_UI_INVALID;
 
     if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder)) {
       states |= NS_EVENT_STATE_MOZ_PLACEHOLDER;
     }
 
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
       mozAutoDocUpdate upd(doc, UPDATE_CONTENT_STATE, PR_TRUE);
@@ -1052,17 +1053,20 @@ nsHTMLTextAreaElement::IntrinsicState() 
   if (HasAttr(kNameSpaceID_None, nsGkAtoms::required)) {
     state |= NS_EVENT_STATE_REQUIRED;
   } else {
     state |= NS_EVENT_STATE_OPTIONAL;
   }
 
   if (IsCandidateForConstraintValidation()) {
     if (IsValid()) {
-      state |= NS_EVENT_STATE_VALID | NS_EVENT_STATE_MOZ_UI_VALID;
+      state |= NS_EVENT_STATE_VALID;
+      if (mValueChanged) {
+        state |= NS_EVENT_STATE_MOZ_UI_VALID;
+      }
     } else {
       state |= NS_EVENT_STATE_INVALID;
       // NS_EVENT_STATE_MOZ_UI_INVALID always apply if the element suffers from
       // VALIDITY_STATE_CUSTOM_ERROR.
       // Otherwise, it applies if the value has been modified.
       // NS_EVENT_STATE_MOZ_UI_INVALID always applies if the form submission has
       // been tried while invalid.
       if (mCanShowInvalidUI && ShouldShowInvalidUI()) {
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-checkbox-valid-changed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is valid and its checkedness has changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').checked = false;
+                if (!document.getElementById('i').mozMatchesSelector(':-moz-ui-valid')) {
+                  document.body.textContent='FAIL';
+                } else {
+                  document.body.textContent='SUCCESS';
+                }
+                document.documentElement.className='';">
+    <input id='i' type='checkbox'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-checkbox-valid-default.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is valid and its checkedness hasn't changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="if (document.getElementById('i').mozMatchesSelector(':-moz-ui-valid')) {
+                  document.body.textContent='FAIL';
+                } else {
+                  document.body.textContent='SUCCESS';
+                }
+                document.documentElement.className='';">
+    <input id='i' type='checkbox'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-dyn-not-disabled-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is not disabled and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').removeAttribute('disabled');
+                document.getElementById('i').value = '';
+                document.documentElement.className='';">
+    <input class='valid' id='i' disabled>
+  </body>
+</html>
--- a/layout/reftests/css-ui-valid/input/input-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-valid/input/input-dyn-not-disabled.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if input is not disabled, it is candidate for constraint validation
-             and should be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is not disabled but its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('i').removeAttribute('disabled'); document.documentElement.className='';">
-    <input class='valid' id='i' disabled>
+  <body onload="document.getElementById('i').removeAttribute('disabled');
+                document.documentElement.className='';">
+    <input class='notvalid' id='i' disabled>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-dyn-not-readonly-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is no longer readonly and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').removeAttribute('readonly');
+                document.getElementById('i').value = '';
+                document.documentElement.className='';">
+    <input class='valid' id='i' readonly>
+  </body>
+</html>
--- a/layout/reftests/css-ui-valid/input/input-dyn-not-readonly.html
+++ b/layout/reftests/css-ui-valid/input/input-dyn-not-readonly.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if input is no longer readonly, it is candidate for constraint
-             validation and should be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is no longer readonly and its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('i').removeAttribute('readonly'); document.documentElement.className='';">
-    <input class='valid' id='i' readonly>
+  <body onload="document.getElementById('i').removeAttribute('readonly');
+                document.documentElement.className='';">
+    <input class='notvalid' id='i' readonly>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-email-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value = 'foo@bar.com';
+                document.documentElement.className = '';">
+    <input id='i' class='valid' type='email'>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/input/input-email-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is valid but its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid' type='email' value='foo@bar.com'>
+    <input class='notvalid' type='email' value='foo@bar.com'>
   </body>
 </html>
 
--- a/layout/reftests/css-ui-valid/input/input-fieldset-legend.html
+++ b/layout/reftests/css-ui-valid/input/input-fieldset-legend.html
@@ -2,13 +2,13 @@
 <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 :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <legend>
-        <input class='valid'></input>
+        <input class='notvalid'></input>
       </legend>
     </fieldset>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-file-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='file' style="background-color: green;">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-file-valid-changed.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its default value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value='';
+                document.documentElement.className='';">
+    <input id='i' class='valid' type='file'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-file-valid-default.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: if input is valid but its default value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='notvalid' type='file'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-maxlength-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value = '';
+                document.documentElement.className = '';">
+    <input id='i' class='valid' maxlength="2">
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/input/input-maxlength-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is valid but its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid' maxlength="2">
+    <input class='notvalid' maxlength="2">
   </body>
 </html>
 
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-pattern-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value = 'foo';
+                document.documentElement.className = '';">
+    <input id='i' class='valid' pattern='foo'>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/input/input-pattern-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is valid but its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid' pattern='foo' value='foo'>
+    <input class='notvalid' pattern='foo' value='foo'>
   </body>
 </html>
 
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-radio-valid-changed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is valid and its checkedness has changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').checked = false;
+                if (!document.getElementById('i').mozMatchesSelector(':-moz-ui-valid')) {
+                  document.body.textContent='FAIL';
+                } else {
+                  document.body.textContent='SUCCESS';
+                }
+                document.documentElement.className='';">
+    <input id='i' type='radio'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-radio-valid-default.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if input is valid and its checkedness hasn't changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="if (document.getElementById('i').mozMatchesSelector(':-moz-ui-valid')) {
+                  document.body.textContent='FAIL';
+                } else {
+                  document.body.textContent='SUCCESS';
+                }
+                document.documentElement.className='';">
+    <input id='i' type='radio'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-required-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value = 'foo';
+                document.documentElement.className = '';">
+    <input id='i' class='valid' required>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/input/input-required-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is valid and its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid' value='foo' required>
+    <input class='notvalid' value='foo' required>
   </body>
 </html>
 
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/input-url-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if input is valid and its value has been changed,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('i').value = 'http://mozilla.org/';
+                document.documentElement.className = '';">
+    <input id='i' class='valid' type='url'>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/input/input-url-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if input is valid and its value hasn't been changed,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid' type='url' value='http://mozilla.org/'>
+    <input class='notvalid' type='url' value='http://mozilla.org/'>
   </body>
 </html>
 
--- a/layout/reftests/css-ui-valid/input/input-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <input class='valid'>
+    <input class='notvalid'>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/input/reftest.list
+++ b/layout/reftests/css-ui-valid/input/reftest.list
@@ -1,26 +1,39 @@
 == input-valid.html input-ref.html
 == input-customerror.html input-ref.html
 == input-disabled.html input-ref.html
 == input-dyn-disabled.html input-ref.html
 == input-dyn-not-disabled.html input-ref.html
+== input-dyn-not-disabled-changed.html input-ref.html
 == input-readonly.html input-ref.html
 == input-dyn-readonly.html input-ref.html
 == input-dyn-not-readonly.html input-ref.html
+== input-dyn-not-readonly-changed.html input-ref.html
 == input-maxlength-valid.html input-ref.html
+== input-maxlength-valid-changed.html input-ref.html
 == input-maxlength-invalid.html input-withtext-ref.html
 == input-required-valid.html input-withtext-ref.html
+== input-required-valid-changed.html input-withtext-ref.html
 == input-required-invalid.html input-ref.html
 == input-button.html input-button-ref.html
 == input-reset.html input-button-ref.html
 == input-email-invalid.html input-withtext-ref.html
 == input-email-valid.html input-email-ref.html
+== input-email-valid-changed.html input-email-ref.html
 == input-url-invalid.html input-withtext-ref.html
 == input-url-valid.html input-url-ref.html
+== input-url-valid-changed.html input-url-ref.html
 == input-pattern-valid.html input-withtext-ref.html
+== input-pattern-valid-changed.html input-withtext-ref.html
 == input-pattern-invalid.html input-withtext-ref.html
 == input-type-barred.html input-button-ref.html
 == input-type-invalid.html input-ref.html
 == input-disabled-fieldset-1.html input-fieldset-ref.html
 == input-disabled-fieldset-2.html input-fieldset-ref.html
 == input-fieldset-legend.html input-fieldset-legend-ref.html
+== input-checkbox-valid-changed.html success-ref.html
+== input-checkbox-valid-default.html success-ref.html
+== input-radio-valid-changed.html success-ref.html
+== input-radio-valid-default.html success-ref.html
+== input-file-valid-changed.html input-file-ref.html
+== input-file-valid-default.html input-file-ref.html
 # input type='hidden' shouldn't show
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/input/success-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    SUCCESS
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/select/select-dyn-not-disabled-changed.html
@@ -0,0 +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 :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('s').removeAttribute('disabled'); document.documentElement.className='';">
+    <select class='valid' id='s' disabled></select>
+  </body>
+</html>
--- a/layout/reftests/css-ui-valid/textarea/reftest.list
+++ b/layout/reftests/css-ui-valid/textarea/reftest.list
@@ -1,15 +1,19 @@
 == textarea-valid.html textarea-ref.html
 == textarea-customerror.html textarea-ref.html
 == textarea-disabled.html textarea-ref.html
 == textarea-dyn-disabled.html textarea-ref.html
 == textarea-dyn-not-disabled.html textarea-ref.html
+== textarea-dyn-not-disabled-changed.html textarea-ref.html
 == textarea-readonly.html textarea-ref.html
 == textarea-dyn-readonly.html textarea-ref.html
 == textarea-dyn-not-readonly.html textarea-ref.html
+== textarea-dyn-not-readonly-changed.html textarea-ref.html
 == textarea-maxlength-valid.html textarea-ref.html
+== textarea-maxlength-valid-changed.html textarea-ref.html
 == textarea-maxlength-invalid.html textarea-withtext-ref.html
 == textarea-required-valid.html textarea-withtext-ref.html
+== textarea-required-valid-changed.html textarea-withtext-ref.html
 == textarea-required-invalid.html textarea-ref.html
 == textarea-disabled-fieldset-1.html textarea-fieldset-ref.html
 == textarea-disabled-fieldset-2.html textarea-fieldset-ref.html
 == textarea-fieldset-legend.html textarea-fieldset-legend-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if textarea is not disabled and its value has been modifie,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('t').removeAttribute('disabled');
+                document.getElementById('t').value = '';
+                document.documentElement.className='';">
+    <textarea class='valid' id='t' disabled></textarea>
+  </body>
+</html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-disabled.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if textarea is not disabled, it is candidate for constraint validation
-             and should be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if textarea is not disabled but its value hasn't been modified,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('disabled'); document.documentElement.className='';">
-    <textarea class='valid' id='t' disabled></textarea>
+  <body onload="document.getElementById('t').removeAttribute('disabled');
+                document.documentElement.className='';">
+    <textarea class='notvalid' id='t' disabled></textarea>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: if textarea is no longer readonly and its value has been modified,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('t').removeAttribute('readonly');
+                document.getElementById('t').value = '';
+                document.documentElement.className='';">
+    <textarea class='valid' id='t' readonly></textarea>
+  </body>
+</html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-dyn-not-readonly.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if textarea is no longer readonly, it is candidate for constraint
-             validation and should be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if textarea is no longer readonly but its value hasn't been modified,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
-  <body onload="document.getElementById('t').removeAttribute('readonly'); document.documentElement.className='';">
-    <textarea class='valid' id='t' readonly></textarea>
+  <body onload="document.getElementById('t').removeAttribute('readonly');
+                document.documentElement.className='';">
+    <textarea class='notvalid' id='t' readonly></textarea>
   </body>
 </html>
--- a/layout/reftests/css-ui-valid/textarea/textarea-fieldset-legend.html
+++ b/layout/reftests/css-ui-valid/textarea/textarea-fieldset-legend.html
@@ -2,13 +2,13 @@
 <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 :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <fieldset disabled>
       <legend>
-        <textarea class='valid'></textarea>
+        <textarea class='notvalid'></textarea>
       </legend>
     </fieldset>
   </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <!-- Test: if textarea is valid and its value has been modified,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('t').value = '';
+                document.documentElement.className = '';">
+    <textarea id='t' class='valid' maxlength="2"></textarea>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/textarea/textarea-maxlength-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if textarea is valid but its value hasn't been modifie,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea class='valid' maxlength="2"></textarea>
+    <textarea class='notvalid' maxlength="2"></textarea>
   </body>
 </html>
 
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-valid/textarea/textarea-required-valid-changed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class='reftet-wait'>
+  <!-- Test: if textarea is valid and its value has been modified,
+             it should be affected by :-moz-ui-valid pseudo-class. -->
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body onload="document.getElementById('t').value = 'foo';
+                document.documentElement.className = '';">
+    <textarea id='t' class='valid' required></textarea>
+  </body>
+</html>
+
--- a/layout/reftests/css-ui-valid/textarea/textarea-required-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
+  <!-- Test: if textarea is valid but its value hasn't been modified,
+             it should not be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea class='valid' required>foo</textarea>
+    <textarea class='notvalid' required>foo</textarea>
   </body>
 </html>
 
--- a/layout/reftests/css-ui-valid/textarea/textarea-valid.html
+++ b/layout/reftests/css-ui-valid/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 be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
-    <textarea class='valid'></textarea>
+    <textarea class='notvalid'></textarea>
   </body>
 </html>