third_party/WebKit/LayoutTests/fast/forms/validationMessage.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description("Test for validationMessage DOM property.");
  11 if (window.internals)
  12     internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
  13 var form = document.createElement("form");
  14 document.body.appendChild(form);
  15
  16 // An input element with a pattern set and a mismatched value
  17 var patternInput = document.createElement("input");
  18 patternInput.name = "patternInput";
  19 patternInput.pattern = "lorem ipsum";
  20 patternInput.value = "lorem";
  21 form.appendChild(patternInput);
  22 debug("input patternMismatch: " + patternInput.validationMessage);
  23
  24 // A required input with an empty value
  25 var requiredInput = document.createElement("input");
  26 requiredInput.name = "requiredInput";
  27 requiredInput.required = true;
  28 form.appendChild(requiredInput);
  29 debug("input valueMissing: " + requiredInput.validationMessage);
  30
  31 // A required textarea with an empty value
  32 var requiredTextArea = document.createElement("textarea");
  33 requiredTextArea.name = "requiredTextArea";
  34 requiredTextArea.required = true;
  35 form.appendChild(requiredTextArea);
  36 debug("textarea valueMissing: " + requiredTextArea.validationMessage);
  37
  38 // A required select with an empty value
  39 var requiredSelect = document.createElement("select");
  40 requiredSelect.name = "requiredSelect";
  41 requiredSelect.required = true;
  42 form.appendChild(requiredSelect);
  43 debug("select valueMissing: " + requiredSelect.validationMessage);
  44
  45 // A type=email input for the "type mismatch" flag
  46 var emailInput = document.createElement("input");
  47 emailInput.name = "emailInput";
  48 emailInput.type = "email";
  49 form.appendChild(emailInput);
  50 emailInput.value = "incorrectValue";
  51 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  52 emailInput.value = "@xn--fsq.com";
  53 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  54 emailInput.value = "user@";
  55 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  56 emailInput.value = "user@example*.com";
  57 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  58 emailInput.value = "user\uD83D\uDE47@example.com";
  59 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  60 emailInput.value = "user\uD800@example.com";
  61 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  62 emailInput.value = "user@.example.com";
  63 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  64 emailInput.value = "user@example.com.";
  65 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  66 emailInput.value = "user@xn--z8ja1psq..com";
  67 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  68 emailInput.multiple = true;
  69 emailInput.value = "foo@example.com,,bar@example.com";
  70 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  71 emailInput.value = ",foo@example.com";
  72 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  73 emailInput.value = "foo@example.com,";
  74 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  75 emailInput.value = "foo@example.com,bar@..example.com";
  76 debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
  77
  78 var numberInput = document.createElement("input");
  79 numberInput.type = "number";
  80 form.appendChild(numberInput);
  81 numberInput.focus();
  82 document.execCommand("InsertText", false, "+++");
  83 debug("input badInput: " + numberInput.validationMessage);
  84 var nonRequiredBadInputMessage = numberInput.validationMessage;
  85
  86 debug("badInput and valueMissing:");
  87 numberInput.required = true;
  88 shouldBe("numberInput.validationMessage", "nonRequiredBadInputMessage");
  89
  90 debug("stepMismatch:");
  91 numberInput.min = "0";
  92 numberInput.step = "0.1";
  93 numberInput.value = "0.11";
  94 debug("input stepMismatch: " + numberInput.validationMessage);
  95 numberInput.value = "0.19";
  96 debug("input stepMismatch: " + numberInput.validationMessage);
  97 numberInput.max = "10.02";
  98 numberInput.value = "10.01";
  99 debug("input stepMismatch: " + numberInput.validationMessage);
 100
 101 debug("tooLong:");
 102 var inputWithMax = document.createElement("input");
 103 inputWithMax.maxLength = 3;
 104 inputWithMax.value = "abcdef";
 105 document.body.appendChild(inputWithMax);
 106 inputWithMax.focus();
 107 document.execCommand("delete");
 108 debug("input tooLong: " + inputWithMax.validationMessage);
 109 // fancyX should be treated as 3 characters.
 110 // U+0305 COMBINING OVERLINE
 111 // U+0332 COMBINING LOW LINE
 112 var fancyX = "x\u0305\u0332";
 113 inputWithMax.maxLength = 2;
 114 inputWithMax.value = fancyX + "X";
 115 inputWithMax.focus();
 116 inputWithMax.setSelectionRange(4, 4);
 117 document.execCommand("delete");
 118 debug("input tooLong: " + inputWithMax.validationMessage);
 119 // The following test might show English text + Arabic digits. It's expected and
 120 // it never happens in products.
 121 inputWithMax.lang = "ar-eg";
 122 debug("input tooLong: " + inputWithMax.validationMessage);
 123
 124 var textarea = document.createElement("textarea");
 125 document.body.appendChild(textarea);
 126 textarea.focus();
 127 document.execCommand("inserttext", false, "a\nbc");
 128 textarea.maxLength = 3;
 129 debug("textarea tooLong: " + textarea.validationMessage);
 130
 131 debug("tooShort:");
 132 var inputWithMin = document.createElement("input");
 133 inputWithMin.minLength = 3;
 134 inputWithMin.value = "ab";
 135 document.body.appendChild(inputWithMin);
 136 inputWithMin.focus();
 137 document.execCommand("delete");
 138 debug("input tooShort: " + inputWithMin.validationMessage);
 139 // fancyX should be treated as 3 characters.
 140 // U+0305 COMBINING OVERLINE
 141 // U+0332 COMBINING LOW LINE
 142 var fancyX = "x\u0305\u0332";
 143 inputWithMin.minLength = 4;
 144 inputWithMin.value = fancyX + "X";
 145 inputWithMin.focus();
 146 inputWithMin.setSelectionRange(4, 4);
 147 document.execCommand("delete");
 148 debug("input tooShort: " + inputWithMin.validationMessage);
 149 // The following test might show English text + Arabic digits. It's expected and
 150 // it never happens in products.
 151 inputWithMin.lang = "ar-eg";
 152 debug("input tooShort: " + inputWithMin.validationMessage);
 153
 154 var textarea = document.createElement("textarea");
 155 document.body.appendChild(textarea);
 156 textarea.focus();
 157 document.execCommand("inserttext", false, "a\n");
 158 textarea.minLength = 4;
 159 debug("textarea tooShort: " + textarea.validationMessage);
 160
 161 // A button can't be valited and, thus, has a blank validationMessage
 162 var but = document.createElement("button");
 163 but.name = "button";
 164 form.appendChild(but);
 165 shouldBe("but.validationMessage", "''");
 166
 167 // An input control with no name, so it can't be validated (willValidate = false)
 168 var anoninput = document.createElement("input");
 169 form.appendChild(anoninput);
 170 shouldBe("anoninput.validationMessage", "''")
 171
 172 // Fieldsets can't be validated
 173 var happyFieldset = document.createElement("fieldset");
 174 happyFieldset.name = "fieldset";
 175 form.appendChild(happyFieldset);
 176 shouldBe("happyFieldset.validationMessage", "''");
 177
 178 // Select controls can't be validated too
 179 var happySelect = document.createElement("select");
 180 happySelect.name = "select";
 181 form.appendChild(happySelect);
 182 shouldBe("happySelect.validationMessage", "''");
 183
 184 // Output elements can't be validated
 185 var happyOutput = document.createElement("output");
 186 happySelect.name = "output";
 187 form.appendChild(happyOutput);
 188 shouldBe("happyOutput.validationMessage", "''");
 189
 190 // Object elements can't be validated
 191 var happyObject = document.createElement("object");
 192 happySelect.name = "object";
 193 form.appendChild(happyObject);
 194 shouldBe("happyObject.validationMessage", "''");
 195
 196 // Keygen controls can't be validated
 197 var happyKeygen = document.createElement("keygen");
 198 happySelect.name = "keygen";
 199 form.appendChild(happyKeygen);
 200 shouldBe("happyKeygen.validationMessage", "''");
 201
 202 form.remove();
 203 </script>
 204 </body>
 205 </html>