Bug 613021 - Don't make an element invalid if the value length is higher than the maxlength value. r=sicking a=blocking-b9

accessible/tests/mochitest/events/test_statechange.html

@@ -60,7 +60,7 @@
 
       this.invoke = function invalidInput_invoke() {
         // Note: this should fire an EVENT_STATE_CHANGE
-        this.DOMNode.value = "I am too long";
+        this.DOMNode.value = "I am not an email";
       };
 
       this.check = function invalidInput_check() {
@@ -88,7 +88,7 @@
       gQueue.push(new makeEditableDoc(doc));
 
       // invalid state change
-      gQueue.push(new invalidInput("maxlength"));
+      gQueue.push(new invalidInput("email"));
 
       gQueue.invoke(); // Will call SimpleTest.finish();
     }
@@ -120,7 +120,7 @@
     <iframe id="iframe"></iframe>
   </div>
 
-  <input id="maxlength" maxlength="1">
+  <input id="email" type='email'>
 
   <div id="eventdump"></div>
 </body>

accessible/tests/mochitest/states/test_inputs.html

@@ -38,17 +38,30 @@
     testStates("f_input", STATE_UNAVAILABLE);
     testStates("f_input_disabled", STATE_UNAVAILABLE);
 
+    /**
+     * maxlength doesn't make the element invalid until bug 613016 and bug 613019
+     * are fixed. Commenting out related lines and adding a todo to make sure
+     * it will be uncommented as soon as possible.
+     */
+    var todoInput = document.createElement("input");
+    todoInput.maxLength = '2';
+    todoInput.value = 'foo';
+    todo(!todoInput.validity.valid,
+         "input should be invalid because of maxlength");
+
     // invalid/valid state
-    var invalid = ["maxlength","pattern","email","url"];
-    document.getElementById("maxlength").value = "i am too long";
+    //var invalid = ["maxlength","pattern","email","url"];
+    //document.getElementById("maxlength").value = "i am too long";
+    var invalid = ["pattern","email","url"];
     for (i in invalid) {
       testStates(invalid[i], STATE_INVALID);
       testStates(invalid[i] + "2", 0, 0, STATE_INVALID);
     }
 
     // invalid/valid state
-    var invalid = ["maxlength","pattern","email","url"];
-    document.getElementById("maxlength").value = "i am too long";
+    //var invalid = ["maxlength","pattern","email","url"];
+    //document.getElementById("maxlength").value = "i am too long";
+    var invalid = ["pattern","email","url"];
     for (i in invalid) {
       testStates(invalid[i], STATE_INVALID);
       testStates(invalid[i] + "2", 0, 0, STATE_INVALID);

content/html/content/src/nsHTMLInputElement.cpp

@@ -3824,7 +3824,10 @@ nsHTMLInputElement::HasPatternMismatch()
 void
 nsHTMLInputElement::UpdateTooLongValidityState()
 {
+  // TODO: this code will be re-enabled with bug 613016 and bug 613019.
+#if 0
   SetValidityState(VALIDITY_STATE_TOO_LONG, IsTooLong());
+#endif
 }
 
 void

content/html/content/src/nsHTMLTextAreaElement.cpp

@@ -1224,7 +1224,10 @@ nsHTMLTextAreaElement::IsValueMissing() const
 void
 nsHTMLTextAreaElement::UpdateTooLongValidityState()
 {
+  // TODO: this code will be re-enabled with bug 613016 and bug 613019.
+#if 0
   SetValidityState(VALIDITY_STATE_TOO_LONG, IsTooLong());
+#endif
 }
 
 void

content/html/content/test/test_bug345624-2.html

@@ -54,18 +54,18 @@ function checkTooLongValidity(element)
   ok(element.validity.valid, "Element should be valid");
 
   element.maxLength = 2;
-  ok(element.validity.tooLong,
-    "Element should be too long when maxlength < value length");
-  is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
-     "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
+  todo(element.validity.tooLong,
+       "Element should be too long when maxlength < value length");
+  todo_is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
+          "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
 
-  ok(!element.validity.valid,
-    "Element should not be valid when it is too long");
+  todo(!element.validity.valid,
+       "Element should not be valid when it is too long");
 
-  is(element.validationMessage,
-    "Please shorten this text to 2 characters or less (you are currently using 3 characters).",
-    "The validation message text is not correct");
-  ok(!element.checkValidity(), "The element should not be valid");
+  todo(element.validationMessage,
+       "Please shorten this text to 2 characters or less (you are currently using 3 characters).",
+       "The validation message text is not correct");
+  todo(!element.checkValidity(), "The element should not be valid");
   element.setCustomValidity("custom message");
   is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
      "rgb(255, 0, 0)", ":invalid pseudo-class should apply");

content/html/content/test/test_bug558788-1.html

@@ -40,8 +40,13 @@ function checkValidApplies(elmt)
      "rgb(0, 255, 0)", ":valid pseudo-class should apply");
 }
 
-function checkInvalidApplies(elmt)
+function checkInvalidApplies(elmt, aTodo)
 {
+  if (aTodo) {
+    todo_is(window.getComputedStyle(elmt, null).getPropertyValue('background-color'),
+            "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
+    return;
+  }
   is(window.getComputedStyle(elmt, null).getPropertyValue('background-color'),
      "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
 }
@@ -70,7 +75,7 @@ function checkTooLong(elementName)
   element.value = "foo";
   element.maxLength = 2;
   gContent.appendChild(element);
-  checkInvalidApplies(element);
+  checkInvalidApplies(element, true);
 
   element.focus();
 

content/html/content/test/test_bug558788-2.html

@@ -45,6 +45,8 @@ var validElementsDescription = [
   [ "textarea", null, null, null, null, null ],
   /* <textarea required>foo</textarea> */
   [ "textarea", null, "foo", true, null, null ],
+  /* <input maxlength='3' value='foo'> */
+  [ "input", null, "foobar", null, null, "3", "foo" ],
 ];
 
 var invalidElementsDescription = [
@@ -57,8 +59,6 @@ var invalidElementsDescription = [
   [ "input", "url", "foo", null, null, null, "http://mozilla.org" ],
   /* <input pattern='\\d\\d' value='foo'> */
   [ "input", null, "foo", null, "\\d\\d", null, "42" ],
-  /* <input maxlength='3' value='foo'> */
-  [ "input", null, "foobar", null, null, "3", "foo" ],
   /* <textarea required></textarea> */
   [ "textarea", null, null, true, null, null, "foo" ],
 ];

content/html/content/test/test_bug561640.html

@@ -36,9 +36,9 @@ function checkValid(elmt)
 
 function checkInvalid(elmt)
 {
-  ok(elmt.validity.tooLong, "element should be too long");
-  is(window.getComputedStyle(elmt, null).getPropertyValue('background-color'),
-     "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
+  todo(elmt.validity.tooLong, "element should be too long");
+  todo_is(window.getComputedStyle(elmt, null).getPropertyValue('background-color'),
+          "rgb(255, 0, 0)", ":invalid pseudo-class should apply");
 }
 
 for each (var elmtName in elements) {

content/html/content/test/test_bug598643.html

@@ -64,9 +64,19 @@ input.value = "foo";
 // Too long types.
 for each (type in types[0]) {
   input.type = type
-  ok(!input.validity.valid, "the element should be invalid [type=" + type + "]");
-  ok(input.validity.tooLong,
-     "the element should suffer from being too long [type=" + type + "]");
+  if (type == 'email') {
+    input.value = "foo@bar.com";
+  } else if (type == 'url') {
+    input.value = 'http://foo.org';
+  }
+
+  todo(!input.validity.valid, "the element should be invalid [type=" + type + "]");
+  todo(input.validity.tooLong,
+       "the element should suffer from being too long [type=" + type + "]");
+
+  if (type == 'email' || type == 'url') {
+    input.value = 'foo';
+  }
 }
 
 // Not too long types.
@@ -80,8 +90,8 @@ for each (type in types[1]) {
 // Not too long types but TODO.
 for each (type in types[2]) {
   input.type = type
-  todo(input.validity.valid, "the element should be valid [type=" + type + "]");
-  todo(!input.validity.tooLong,
+  ok(input.validity.valid, "the element should be valid [type=" + type + "]");
+  ok(!input.validity.tooLong,
      "the element shouldn't suffer from being too long [type=" + type + "]");
 }
 

layout/reftests/css-invalid/input/input-maxlength-invalid.html

@@ -2,9 +2,10 @@
 <html class="reftest-wait">
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should be affected by :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='invalid' maxlength="2" id='i'>
+    <input class='notinvalid' maxlength="2" id='i'>
   </body>
 </html>
 

layout/reftests/css-invalid/textarea/textarea-maxlength-invalid.html

@@ -2,9 +2,10 @@
 <html class="reftest-wait">
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should be affected by :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='invalid' maxlength="2" id='t'></textarea>
+    <textarea class='notinvalid' maxlength="2" id='t'></textarea>
   </body>
 </html>
 

layout/reftests/css-valid/input/input-maxlength-invalid.html

@@ -2,9 +2,10 @@
 <html class="reftest-wait">
   <!-- Test: if input isn't valid nor barred from constraint validation,
              it should not be affected by :valid 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='notvalid' maxlength="2" id='i'>
+    <input class='valid' maxlength="2" id='i'>
   </body>
 </html>
 

layout/reftests/css-valid/textarea/textarea-maxlength-invalid.html

@@ -2,9 +2,10 @@
 <html class="reftest-wait">
   <!-- Test: if textarea isn't valid nor barred from constraint validation,
              it should not be affected by :valid 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='notvalid' maxlength="2" id='t'></textarea>
+    <textarea class='valid' maxlength="2" id='t'></textarea>
   </body>
 </html>