Bug 613249 - <output> should have :-moz-ui-invalid and :-moz-ui-valid applying. r=bz a=jst
authorMounir Lamouri <mounir.lamouri@gmail.com>
Wed, 24 Nov 2010 11:13:05 +0100
changeset 58159 af2c1d05ce6e9d1965775baad19ccdc790778a6d
parent 58158 f4a67c552e73c72659d76baaac730e8ae071d856
child 58160 f9939057f8a1346b00749334efcf0ee129972f59
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
bugs613249
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 613249 - <output> should have :-moz-ui-invalid and :-moz-ui-valid applying. r=bz a=jst
content/html/content/src/nsHTMLOutputElement.cpp
content/html/content/test/test_bug612730.html
layout/reftests/css-ui-invalid/default-style/output-ref.html
layout/reftests/css-ui-invalid/default-style/output.html
layout/reftests/css-ui-invalid/default-style/reftest.list
layout/reftests/css-ui-invalid/default-style/style.css
layout/reftests/css-ui-invalid/output/output-invalid.html
layout/reftests/css-ui-invalid/output/output-ref.html
layout/reftests/css-ui-invalid/output/output-valid.html
layout/reftests/css-ui-invalid/output/reftest.list
layout/reftests/css-ui-invalid/output/style.css
layout/reftests/css-ui-invalid/reftest.list
layout/reftests/css-ui-valid/output/output-invalid.html
layout/reftests/css-ui-valid/output/output-ref.html
layout/reftests/css-ui-valid/output/output-valid.html
layout/reftests/css-ui-valid/output/reftest.list
layout/reftests/css-ui-valid/output/style.css
layout/reftests/css-ui-valid/reftest.list
layout/style/forms.css
--- a/content/html/content/src/nsHTMLOutputElement.cpp
+++ b/content/html/content/src/nsHTMLOutputElement.cpp
@@ -155,17 +155,19 @@ NS_IMETHODIMP
 nsHTMLOutputElement::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 |
+                                            NS_EVENT_STATE_MOZ_UI_VALID);
   }
 
   return NS_OK;
 }
 
 NS_IMETHODIMP
 nsHTMLOutputElement::Reset()
 {
@@ -199,17 +201,18 @@ nsHTMLOutputElement::ParseAttribute(PRIn
 
 nsEventStates
 nsHTMLOutputElement::IntrinsicState() const
 {
   nsEventStates states = nsGenericHTMLFormElement::IntrinsicState();
 
   // We don't have to call IsCandidateForConstraintValidation()
   // because <output> can't be barred from constraint validation.
-  states |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
+  states |= IsValid() ? NS_EVENT_STATE_VALID | NS_EVENT_STATE_MOZ_UI_VALID
+                      : NS_EVENT_STATE_INVALID | NS_EVENT_STATE_MOZ_UI_INVALID;
 
   return states;
 }
 
 NS_IMETHODIMP
 nsHTMLOutputElement::GetForm(nsIDOMHTMLFormElement** aForm)
 {
   return nsGenericHTMLFormElement::GetForm(aForm);
--- a/content/html/content/test/test_bug612730.html
+++ b/content/html/content/test/test_bug612730.html
@@ -32,18 +32,18 @@ function runTest()
 
   select.addEventListener("focus", function() {
     select.removeEventListener("focus", arguments.callee, false);
 
     isnot(select.selectedIndex, -1, "Something should have been selected");
 
     ok(!select.mozMatchesSelector(":-moz-ui-valid"),
        ":-moz-ui-valid should not apply");
-    ok(!select.mozMatchesSelector(":-moz-ui-invalid"),
-       ":-moz-ui-invalid should not apply");
+    todo(!select.mozMatchesSelector(":-moz-ui-invalid"),
+         ":-moz-ui-invalid should not apply");
 
     SimpleTest.finish();
   }, false);
 
   synthesizeMouse(select, 5, 5, {});
 }
 
 SimpleTest.waitForFocus(runTest);
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-invalid/default-style/output-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <output class='invalid-ref'>foo</output>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ui-invalid/default-style/output.html
@@ -0,0 +1,13 @@
+<!DOCTYPE>
+<html class="reftest-wait">
+  <script>
+    function onloadHandler()
+    {
+      document.getElementById('e').setCustomValidity('foo');
+      document.documentElement.className='';
+    }
+  </script>
+  <body onload="onloadHandler();">
+    <output id='e'>foo</output>
+  </body>
+</html>
--- a/layout/reftests/css-ui-invalid/default-style/reftest.list
+++ b/layout/reftests/css-ui-invalid/default-style/reftest.list
@@ -1,5 +1,6 @@
 == input.html input-ref.html
 == button.html button-ref.html
 == textarea.html textarea-ref.html
 == select.html select-ref.html
 == fieldset.html fieldset-ref.html
+== output.html output-ref.html
--- a/layout/reftests/css-ui-invalid/default-style/style.css
+++ b/layout/reftests/css-ui-invalid/default-style/style.css
@@ -1,6 +1,10 @@
-.invalid-ref {
+:not(output).invalid-ref {
   box-shadow: 0 0 1.5px 1px red;
 }
 
+output.invalid-ref {
+  color: red;
+}
+
 .barred-ref {
 }
copy from layout/reftests/css-invalid/output/output-invalid.html
copy to layout/reftests/css-ui-invalid/output/output-invalid.html
--- a/layout/reftests/css-invalid/output/output-invalid.html
+++ b/layout/reftests/css-ui-invalid/output/output-invalid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if output has a custom error, it should not be affected by :valid
-             pseudo-class. -->
+  <!-- Test: if output 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('b').setCustomValidity('foo'); document.documentElement.className='';">
     <output class='invalid' id='b'>foo</output>
   </body>
 </html>
copy from layout/reftests/css-invalid/output/output-ref.html
copy to layout/reftests/css-ui-invalid/output/output-ref.html
copy from layout/reftests/css-invalid/output/output-valid.html
copy to layout/reftests/css-ui-invalid/output/output-valid.html
--- a/layout/reftests/css-invalid/output/output-valid.html
+++ b/layout/reftests/css-ui-invalid/output/output-valid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if output has no custom error and is not barred from constraint
-             validation, it should be affected by :valid pseudo-class. -->
+             validation, it should not affected by :-moz-ui-invalid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <output class='notinvalid'>foo</output>
   </body>
 </html>
copy from layout/reftests/css-invalid/output/reftest.list
copy to layout/reftests/css-ui-invalid/output/reftest.list
copy from layout/reftests/css-invalid/output/style.css
copy to layout/reftests/css-ui-invalid/output/style.css
--- a/layout/reftests/css-invalid/output/style.css
+++ b/layout/reftests/css-ui-invalid/output/style.css
@@ -1,22 +1,22 @@
 /* Override default style */
 output {
   color: black;
 }
 
 output.notinvalid {
   color: green;
 }
-output.notinvalid:invalid {
+output.notinvalid:-moz-ui-invalid {
   color: red;
 }
 
 output.invalid {
   color: red;
 }
-output.invalid:invalid {
+output.invalid:-moz-ui-invalid {
   color: green;
 }
 
 output.ref {
   color: green;
 }
--- a/layout/reftests/css-ui-invalid/reftest.list
+++ b/layout/reftests/css-ui-invalid/reftest.list
@@ -1,8 +1,9 @@
 # :-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 :-moz-ui-invalid style
 include default-style/reftest.list
copy from layout/reftests/css-valid/output/output-invalid.html
copy to layout/reftests/css-ui-valid/output/output-invalid.html
--- a/layout/reftests/css-valid/output/output-invalid.html
+++ b/layout/reftests/css-ui-valid/output/output-invalid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <!-- Test: if output has a custom error, it should not be affected by :valid
+  <!-- Test: if output has a custom error, it should not be affected by :-moz-ui-valid
              pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body onload="document.getElementById('b').setCustomValidity('foo'); document.documentElement.className='';">
     <output class='notvalid' id='b'>foo</output>
   </body>
 </html>
copy from layout/reftests/css-valid/output/output-ref.html
copy to layout/reftests/css-ui-valid/output/output-ref.html
copy from layout/reftests/css-valid/output/output-valid.html
copy to layout/reftests/css-ui-valid/output/output-valid.html
--- a/layout/reftests/css-valid/output/output-valid.html
+++ b/layout/reftests/css-ui-valid/output/output-valid.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: if output has no custom error and is not barred from constraint
-             validation, it should be affected by :valid pseudo-class. -->
+             validation, it should be affected by :-moz-ui-valid pseudo-class. -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <output class='valid'>foo</output>
   </body>
 </html>
copy from layout/reftests/css-valid/output/reftest.list
copy to layout/reftests/css-ui-valid/output/reftest.list
copy from layout/reftests/css-valid/output/style.css
copy to layout/reftests/css-ui-valid/output/style.css
--- a/layout/reftests/css-valid/output/style.css
+++ b/layout/reftests/css-ui-valid/output/style.css
@@ -1,22 +1,22 @@
 /* Override default style */
 output {
   color: black;
 }
 
 output.notvalid {
   color: green;
 }
-output.notvalid:valid {
+output.notvalid:-moz-ui-valid {
   color: red;
 }
 
 output.valid {
   color: red;
 }
-output.valid:valid {
+output.valid:-moz-ui-valid {
   color: green;
 }
 
 output.ref {
   color: green;
 }
--- a/layout/reftests/css-ui-valid/reftest.list
+++ b/layout/reftests/css-ui-valid/reftest.list
@@ -1,5 +1,6 @@
 # :-moz-ui-valid 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
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -624,17 +624,17 @@ input[type="file"] > input[type="text"] 
 
 /**
  * Set default style for invalid elements.
  */
 :not(output):-moz-ui-invalid {
   box-shadow: 0 0 1.5px 1px red;
 }
 
-output:invalid {
+output:-moz-ui-invalid {
   color: red;
 }
 
 @media print {
   input, textarea, select, button {
     -moz-user-input: none !important;
   }