test_input_autocomplete.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Test @autocomplete on <input>
  5. -->
  6. <head>
  7. <title>Test for &lt;input autocomplete='…'&gt;</title>
  8. <script src="/tests/SimpleTest/SimpleTest.js"></script>
  9. <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
  10. <script>
  11. "use strict";
  12. var values = [
  13. // @autocomplete content attribute, expected IDL attribute value
  14. // Missing or empty attribute
  15. [undefined, ""],
  16. ["", ""],
  17. // One token
  18. ["on", "on"],
  19. ["On", "on"],
  20. ["off", "off"],
  21. ["OFF", "off"],
  22. ["username", "username"],
  23. [" username ", "username"],
  24. ["foobar", ""],
  25. // Two tokens
  26. ["on off", ""],
  27. ["off on", ""],
  28. ["username tel", ""],
  29. ["tel username ", ""],
  30. [" username tel ", ""],
  31. ["tel mobile", ""],
  32. ["tel shipping", ""],
  33. ["shipping tel", "shipping tel"],
  34. ["shipPING tel", "shipping tel"],
  35. ["mobile tel", "mobile tel"],
  36. [" MoBiLe TeL ", "mobile tel"],
  37. ["XXX tel", ""],
  38. ["XXX username", ""],
  39. // Three tokens
  40. ["billing invalid tel", ""],
  41. ["___ mobile tel", ""],
  42. ["mobile foo tel", ""],
  43. ["mobile tel foo", ""],
  44. ["tel mobile billing", ""],
  45. ["billing mobile tel", "billing mobile tel"],
  46. [" BILLing MoBiLE tEl ", "billing mobile tel"],
  47. ["billing home tel", "billing home tel"],
  48. // Four tokens (invalid)
  49. ["billing billing mobile tel", ""],
  50. // Five tokens (invalid)
  51. ["billing billing billing mobile tel", ""],
  52. ];
  53. var types = [undefined, "hidden", "text", "search"]; // Valid types for all non-multiline hints.
  54. function checkAutocompleteValues(field, type) {
  55. for (var test of values) {
  56. if (typeof(test[0]) === "undefined")
  57. field.removeAttribute("autocomplete");
  58. else
  59. field.setAttribute("autocomplete", test[0]);
  60. is(field.autocomplete, test[1], "Checking @autocomplete for @type=" + type + " of: " + test[0]);
  61. is(field.autocomplete, test[1], "Checking cached @autocomplete for @type=" + type + " of: " + test[0]);
  62. }
  63. }
  64. function start() {
  65. var inputField = document.getElementById("input-field");
  66. for (var type of types) {
  67. // Switch the input type
  68. if (typeof(type) === "undefined")
  69. inputField.removeAttribute("type");
  70. else
  71. inputField.type = type;
  72. checkAutocompleteValues(inputField, type || "");
  73. }
  74. var selectField = document.getElementById("select-field");
  75. checkAutocompleteValues(selectField, "select");
  76. SimpleTest.finish();
  77. }
  78. SimpleTest.waitForExplicitFinish();
  79. SpecialPowers.pushPrefEnv({"set": [["dom.forms.autocomplete.experimental", true]]}, start);
  80. </script>
  81. </head>
  82. <body>
  83. <p id="display"></p>
  84. <div id="content" style="display: none">
  85. <form>
  86. <input id="input-field" />
  87. <select id="select-field" />
  88. </form>
  89. </div>
  90. <pre id="test">
  91. </pre>
  92. </body>
  93. </html>