autocapitalize.html (18024B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization"> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 9 test(function() { 10 assert_true('autocapitalize' in document.createElement('input')); 11 }, "Test that the autocapitalize is available on HTMLInputElement.") 12 13 test(function() { 14 assert_true('autocapitalize' in document.createElement('textarea')); 15 }, "Test that the autocapitalize is available on HTMLTextAreaElement.") 16 17 test(function() { 18 assert_true('autocapitalize' in document.createElement('div')); 19 }, "Test that the autocapitalize is available on div.") 20 21 test(function() { 22 var elements = [ document.createElement('input'), 23 document.createElement('textarea'), 24 document.createElement('div') ]; 25 26 elements.forEach(function(e) { 27 e.autocapitalize = 'on'; 28 assert_equals(e.autocapitalize, 'sentences'); 29 30 e.autocapitalize = 'off'; 31 assert_equals(e.autocapitalize, 'none'); 32 }); 33 }, "Test deprecated values of autocapitalize."); 34 35 test(function() { 36 var elements = [ document.createElement('input'), 37 document.createElement('textarea'), 38 document.createElement('div') ]; 39 var knownValues = [ 'none', 'characters', 'words', 'sentences' ]; 40 41 elements.forEach(function(e) { 42 // Default value. 43 assert_equals(e.autocapitalize, ''); 44 45 // Empty value. 46 e.autocapitalize = ''; 47 assert_equals(e.autocapitalize, ''); 48 assert_equals(e.getAttribute('autocapitalize'), ''); 49 e.setAttribute('autocapitalize', ''); 50 assert_equals(e.autocapitalize, ''); 51 assert_equals(e.getAttribute('autocapitalize'), ''); 52 assert_equals(e.autocapitalize, ''); 53 54 // Invalid value. 55 e.autocapitalize = 'foo'; 56 assert_equals(e.autocapitalize, 'sentences'); 57 assert_equals(e.getAttribute('autocapitalize'), 'foo'); 58 e.setAttribute('autocapitalize', 'bar'); 59 assert_equals(e.autocapitalize, 'sentences'); 60 assert_equals(e.getAttribute('autocapitalize'), 'bar'); 61 62 // Default value. 63 e.removeAttribute('autocapitalize'); 64 assert_equals(e.autocapitalize, ''); 65 assert_equals(e.getAttribute('autocapitalize'), null); 66 67 // Case insensitive. 68 e.setAttribute('autocapitalize', 'NoNe'); 69 assert_equals(e.autocapitalize, 'none'); 70 assert_equals(e.getAttribute('autocapitalize'), 'NoNe'); 71 e.autocapitalize = 'WORDS'; 72 assert_equals(e.autocapitalize, 'words'); 73 assert_equals(e.getAttribute('autocapitalize'), 'WORDS'); 74 75 knownValues.forEach(function(value) { 76 e.setAttribute('autocapitalize', value); 77 assert_equals(e.autocapitalize, value); 78 assert_equals(e.getAttribute('autocapitalize'), value); 79 80 e.removeAttribute('autocapitalize'); 81 82 e.autocapitalize = value; 83 assert_equals(e.autocapitalize, value); 84 assert_equals(e.getAttribute('autocapitalize'), value); 85 86 e.removeAttribute('autocapitalize'); 87 }); 88 }); 89 }, "Test reflection of autocapitalize."); 90 91 test(function() { 92 var testData = [ 'text', 93 'search', 94 'email', 95 'url', 96 'tel', 97 'number', 98 'date', 99 'color', 100 'password' ]; 101 102 testData.forEach(function(data) { 103 const input = document.createElement('input'); 104 input.type = data; 105 assert_equals(input.autocapitalize, ''); 106 107 // Verify that wrapping the input element in a form doesn't change the 108 // defaults. 109 const form = document.createElement('form'); 110 form.appendChild(input); 111 assert_equals(input.autocapitalize, ''); 112 }); 113 }, "Test that the IDL attribute returns the empty string if the content " 114 + "attribute is not set.") 115 116 test(function() { 117 const testData = [ 118 { 119 formValue: null, 120 formElementValue: null, 121 inheritedResult: '', 122 uninheritedResult: '', 123 }, 124 { 125 formValue: null, 126 formElementValue: '', 127 inheritedResult: '', 128 uninheritedResult: '', 129 }, 130 { 131 formValue: null, 132 formElementValue: 'on', 133 inheritedResult: 'sentences', 134 uninheritedResult: 'sentences', 135 }, 136 { 137 formValue: null, 138 formElementValue: 'off', 139 inheritedResult: 'none', 140 uninheritedResult: 'none', 141 }, 142 { 143 formValue: null, 144 formElementValue: 'none', 145 inheritedResult: 'none', 146 uninheritedResult: 'none', 147 }, 148 { 149 formValue: null, 150 formElementValue: 'characters', 151 inheritedResult: 'characters', 152 uninheritedResult: 'characters', 153 }, 154 { 155 formValue: null, 156 formElementValue: 'words', 157 inheritedResult: 'words', 158 uninheritedResult: 'words', 159 }, 160 { 161 formValue: null, 162 formElementValue: 'sentences', 163 inheritedResult: 'sentences', 164 uninheritedResult: 'sentences', 165 }, 166 { 167 formValue: null, 168 formElementValue: 'foo', 169 inheritedResult: 'sentences', 170 uninheritedResult: 'sentences', 171 }, 172 { 173 formValue: '', 174 formElementValue: null, 175 inheritedResult: '', 176 uninheritedResult: '', 177 }, 178 { 179 formValue: '', 180 formElementValue: '', 181 inheritedResult: '', 182 uninheritedResult: '', 183 }, 184 { 185 formValue: '', 186 formElementValue: 'on', 187 inheritedResult: 'sentences', 188 uninheritedResult: 'sentences', 189 }, 190 { 191 formValue: '', 192 formElementValue: 'off', 193 inheritedResult: 'none', 194 uninheritedResult: 'none', 195 }, 196 { 197 formValue: '', 198 formElementValue: 'none', 199 inheritedResult: 'none', 200 uninheritedResult: 'none', 201 }, 202 { 203 formValue: '', 204 formElementValue: 'characters', 205 inheritedResult: 'characters', 206 uninheritedResult: 'characters', 207 }, 208 { 209 formValue: '', 210 formElementValue: 'words', 211 inheritedResult: 'words', 212 uninheritedResult: 'words', 213 }, 214 { 215 formValue: '', 216 formElementValue: 'sentences', 217 inheritedResult: 'sentences', 218 uninheritedResult: 'sentences', 219 }, 220 { 221 formValue: '', 222 formElementValue: 'foo', 223 inheritedResult: 'sentences', 224 uninheritedResult: 'sentences', 225 }, 226 { 227 formValue: 'on', 228 formElementValue: null, 229 inheritedResult: 'sentences', 230 uninheritedResult: '', 231 }, 232 { 233 formValue: 'on', 234 formElementValue: '', 235 inheritedResult: 'sentences', 236 uninheritedResult: '', 237 }, 238 { 239 formValue: 'on', 240 formElementValue: 'on', 241 inheritedResult: 'sentences', 242 uninheritedResult: 'sentences', 243 }, 244 { 245 formValue: 'on', 246 formElementValue: 'off', 247 inheritedResult: 'none', 248 uninheritedResult: 'none', 249 }, 250 { 251 formValue: 'on', 252 formElementValue: 'none', 253 inheritedResult: 'none', 254 uninheritedResult: 'none', 255 }, 256 { 257 formValue: 'on', 258 formElementValue: 'characters', 259 inheritedResult: 'characters', 260 uninheritedResult: 'characters', 261 }, 262 { 263 formValue: 'on', 264 formElementValue: 'words', 265 inheritedResult: 'words', 266 uninheritedResult: 'words', 267 }, 268 { 269 formValue: 'on', 270 formElementValue: 'sentences', 271 inheritedResult: 'sentences', 272 uninheritedResult: 'sentences', 273 }, 274 { 275 formValue: 'on', 276 formElementValue: 'foo', 277 inheritedResult: 'sentences', 278 uninheritedResult: 'sentences', 279 }, 280 { 281 formValue: 'off', 282 formElementValue: null, 283 inheritedResult: 'none', 284 uninheritedResult: '', 285 }, 286 { 287 formValue: 'off', 288 formElementValue: '', 289 inheritedResult: 'none', 290 uninheritedResult: '', 291 }, 292 { 293 formValue: 'off', 294 formElementValue: 'on', 295 inheritedResult: 'sentences', 296 uninheritedResult: 'sentences', 297 }, 298 { 299 formValue: 'off', 300 formElementValue: 'off', 301 inheritedResult: 'none', 302 uninheritedResult: 'none', 303 }, 304 { 305 formValue: 'off', 306 formElementValue: 'none', 307 inheritedResult: 'none', 308 uninheritedResult: 'none', 309 }, 310 { 311 formValue: 'off', 312 formElementValue: 'characters', 313 inheritedResult: 'characters', 314 uninheritedResult: 'characters', 315 }, 316 { 317 formValue: 'off', 318 formElementValue: 'words', 319 inheritedResult: 'words', 320 uninheritedResult: 'words', 321 }, 322 { 323 formValue: 'off', 324 formElementValue: 'sentences', 325 inheritedResult: 'sentences', 326 uninheritedResult: 'sentences', 327 }, 328 { 329 formValue: 'off', 330 formElementValue: 'foo', 331 inheritedResult: 'sentences', 332 uninheritedResult: 'sentences', 333 }, 334 { 335 formValue: 'none', 336 formElementValue: null, 337 inheritedResult: 'none', 338 uninheritedResult: '', 339 }, 340 { 341 formValue: 'none', 342 formElementValue: '', 343 inheritedResult: 'none', 344 uninheritedResult: '', 345 }, 346 { 347 formValue: 'none', 348 formElementValue: 'on', 349 inheritedResult: 'sentences', 350 uninheritedResult: 'sentences', 351 }, 352 { 353 formValue: 'none', 354 formElementValue: 'off', 355 inheritedResult: 'none', 356 uninheritedResult: 'none', 357 }, 358 { 359 formValue: 'none', 360 formElementValue: 'none', 361 inheritedResult: 'none', 362 uninheritedResult: 'none', 363 }, 364 { 365 formValue: 'none', 366 formElementValue: 'characters', 367 inheritedResult: 'characters', 368 uninheritedResult: 'characters', 369 }, 370 { 371 formValue: 'none', 372 formElementValue: 'words', 373 inheritedResult: 'words', 374 uninheritedResult: 'words', 375 }, 376 { 377 formValue: 'none', 378 formElementValue: 'sentences', 379 inheritedResult: 'sentences', 380 uninheritedResult: 'sentences', 381 }, 382 { 383 formValue: 'none', 384 formElementValue: 'foo', 385 inheritedResult: 'sentences', 386 uninheritedResult: 'sentences', 387 }, 388 { 389 formValue: 'characters', 390 formElementValue: null, 391 inheritedResult: 'characters', 392 uninheritedResult: '', 393 }, 394 { 395 formValue: 'characters', 396 formElementValue: '', 397 inheritedResult: 'characters', 398 uninheritedResult: '', 399 }, 400 { 401 formValue: 'characters', 402 formElementValue: 'on', 403 inheritedResult: 'sentences', 404 uninheritedResult: 'sentences', 405 }, 406 { 407 formValue: 'characters', 408 formElementValue: 'off', 409 inheritedResult: 'none', 410 uninheritedResult: 'none', 411 }, 412 { 413 formValue: 'characters', 414 formElementValue: 'none', 415 inheritedResult: 'none', 416 uninheritedResult: 'none', 417 }, 418 { 419 formValue: 'characters', 420 formElementValue: 'characters', 421 inheritedResult: 'characters', 422 uninheritedResult: 'characters', 423 }, 424 { 425 formValue: 'characters', 426 formElementValue: 'words', 427 inheritedResult: 'words', 428 uninheritedResult: 'words', 429 }, 430 { 431 formValue: 'characters', 432 formElementValue: 'sentences', 433 inheritedResult: 'sentences', 434 uninheritedResult: 'sentences', 435 }, 436 { 437 formValue: 'characters', 438 formElementValue: 'foo', 439 inheritedResult: 'sentences', 440 uninheritedResult: 'sentences', 441 }, 442 { 443 formValue: 'words', 444 formElementValue: null, 445 inheritedResult: 'words', 446 uninheritedResult: '', 447 }, 448 { 449 formValue: 'words', 450 formElementValue: '', 451 inheritedResult: 'words', 452 uninheritedResult: '', 453 }, 454 { 455 formValue: 'words', 456 formElementValue: 'on', 457 inheritedResult: 'sentences', 458 uninheritedResult: 'sentences', 459 }, 460 { 461 formValue: 'words', 462 formElementValue: 'off', 463 inheritedResult: 'none', 464 uninheritedResult: 'none', 465 }, 466 { 467 formValue: 'words', 468 formElementValue: 'none', 469 inheritedResult: 'none', 470 uninheritedResult: 'none', 471 }, 472 { 473 formValue: 'words', 474 formElementValue: 'characters', 475 inheritedResult: 'characters', 476 uninheritedResult: 'characters', 477 }, 478 { 479 formValue: 'words', 480 formElementValue: 'words', 481 inheritedResult: 'words', 482 uninheritedResult: 'words', 483 }, 484 { 485 formValue: 'words', 486 formElementValue: 'sentences', 487 inheritedResult: 'sentences', 488 uninheritedResult: 'sentences', 489 }, 490 { 491 formValue: 'words', 492 formElementValue: 'foo', 493 inheritedResult: 'sentences', 494 uninheritedResult: 'sentences', 495 }, 496 { 497 formValue: 'sentences', 498 formElementValue: null, 499 inheritedResult: 'sentences', 500 uninheritedResult: '', 501 }, 502 { 503 formValue: 'sentences', 504 formElementValue: '', 505 inheritedResult: 'sentences', 506 uninheritedResult: '', 507 }, 508 { 509 formValue: 'sentences', 510 formElementValue: 'on', 511 inheritedResult: 'sentences', 512 uninheritedResult: 'sentences', 513 }, 514 { 515 formValue: 'sentences', 516 formElementValue: 'off', 517 inheritedResult: 'none', 518 uninheritedResult: 'none', 519 }, 520 { 521 formValue: 'sentences', 522 formElementValue: 'none', 523 inheritedResult: 'none', 524 uninheritedResult: 'none', 525 }, 526 { 527 formValue: 'sentences', 528 formElementValue: 'characters', 529 inheritedResult: 'characters', 530 uninheritedResult: 'characters', 531 }, 532 { 533 formValue: 'sentences', 534 formElementValue: 'words', 535 inheritedResult: 'words', 536 uninheritedResult: 'words', 537 }, 538 { 539 formValue: 'sentences', 540 formElementValue: 'sentences', 541 inheritedResult: 'sentences', 542 uninheritedResult: 'sentences', 543 }, 544 { 545 formValue: 'sentences', 546 formElementValue: 'foo', 547 inheritedResult: 'sentences', 548 uninheritedResult: 'sentences', 549 }, 550 { 551 formValue: 'foo', 552 formElementValue: null, 553 inheritedResult: 'sentences', 554 uninheritedResult: '', 555 }, 556 { 557 formValue: 'foo', 558 formElementValue: '', 559 inheritedResult: 'sentences', 560 uninheritedResult: '', 561 }, 562 { 563 formValue: 'foo', 564 formElementValue: 'on', 565 inheritedResult: 'sentences', 566 uninheritedResult: 'sentences', 567 }, 568 { 569 formValue: 'foo', 570 formElementValue: 'off', 571 inheritedResult: 'none', 572 uninheritedResult: 'none', 573 }, 574 { 575 formValue: 'foo', 576 formElementValue: 'none', 577 inheritedResult: 'none', 578 uninheritedResult: 'none', 579 }, 580 { 581 formValue: 'foo', 582 formElementValue: 'characters', 583 inheritedResult: 'characters', 584 uninheritedResult: 'characters', 585 }, 586 { 587 formValue: 'foo', 588 formElementValue: 'words', 589 inheritedResult: 'words', 590 uninheritedResult: 'words', 591 }, 592 { 593 formValue: 'foo', 594 formElementValue: 'sentences', 595 inheritedResult: 'sentences', 596 uninheritedResult: 'sentences', 597 }, 598 { 599 formValue: 'foo', 600 formElementValue: 'foo', 601 inheritedResult: 'sentences', 602 uninheritedResult: 'sentences', 603 }, 604 ]; 605 606 const formElements = [ 607 {element: 'button', inherits: true}, 608 {element: 'fieldset', inherits: true}, 609 {element: 'img', inherits: false}, 610 {element: 'input', inherits: true}, 611 {element: 'object', inherits: false}, 612 {element: 'output', inherits: true}, 613 {element: 'select', inherits: true}, 614 {element: 'textarea', inherits: true}, 615 ]; 616 617 const form = document.createElement('form'); 618 form.id = 'form'; 619 document.body.appendChild(form); 620 621 testData.forEach(data => { 622 form.removeAttribute('autocapitalize'); 623 624 if (data.formValue !== null) { 625 form.setAttribute('autocapitalize', data.formValue); 626 } 627 628 formElements.forEach(elementData => { 629 const element = document.createElement(elementData.element); 630 form.appendChild(element); 631 632 const element2 = document.createElement(elementData.element); 633 element2.setAttribute('form', 'form'); 634 document.body.appendChild(element2); 635 636 if (data.formElementValue !== null) { 637 element.setAttribute('autocapitalize', data.formElementValue); 638 element2.setAttribute('autocapitalize', data.formElementValue); 639 } 640 641 const descriptionSuffix = 'with "' + data.formValue 642 + '" and form element with "'+ data.formElementValue + '"'; 643 644 if (elementData.inherits) { 645 assert_equals(element.autocapitalize, data.inheritedResult, 646 `${elementData.element} element with form parent ` 647 + `${descriptionSuffix}`); 648 assert_equals(element2.autocapitalize, data.inheritedResult, 649 `${elementData.element} element with form owner attribute` 650 + ` set ${descriptionSuffix}`); 651 } else { 652 assert_equals(element.autocapitalize, data.uninheritedResult, 653 `${elementData.element} element with form parent ` 654 + `${descriptionSuffix}`); 655 assert_equals(element2.autocapitalize, data.uninheritedResult, 656 `${elementData.element} element with form owner attribute` 657 + `set ${descriptionSuffix}`); 658 } 659 }); 660 }); 661 }, "Test inheriting values from a form.") 662 663 test(function() { 664 const testData = [ 'text', 665 'search', 666 'email', 667 'url', 668 'tel', 669 'number', 670 'date', 671 'color', 672 'password' ]; 673 674 testData.forEach(function(data) { 675 const form = document.createElement('form'); 676 form.setAttribute('autocapitalize', 'sentences'); 677 const input = document.createElement('input'); 678 input.setAttribute('type', data); 679 form.appendChild(input); 680 681 assert_equals(input.autocapitalize, 'sentences'); 682 }); 683 }, "Verify that even input types that are never autocapitalized support the " 684 + "IDL interface.") 685 686 </script> 687 </body> 688 </html>