Implement support for the autocomplete attribute
[WebKit-https.git] / LayoutTests / fast / forms / autocomplete-tokens.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script src="../../resources/js-test-pre.js"></script>
5     </head>
6     <body>
7         <p id="description"></p>
8         <div id="console"></div>
9         <script>
10             description('Tests for valid autocomplete tokens on input, select, and textarea elements.');
11
12             var input = document.createElement('input');
13             var textarea = document.createElement('textarea');
14             var select = document.createElement('select');
15             var button = document.createElement('button');
16             var keygen = document.createElement('keygen');
17             var autocompleteableControls = [ input, textarea, select ];
18
19             var keywords = [ "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "organization-title", "username", "new-password", "current-password", "organization", "street-address", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "url", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "email", "impp" ];
20
21             var modeTokens = [ "billing", "shipping" ];
22
23             debug('Valid keywords:');
24             keywords.forEach(keyword => {
25                 input.autocomplete = keyword;
26                 shouldBeEqualToString('input.autocomplete', keyword);
27             });
28
29             debug('');
30             debug('Contact scope:');
31             var contactTokens = [ "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "email", "impp" ];
32             var contactScopeTokens = [ "home", "work", "mobile", "fax", "pager" ];
33             contactScopeTokens.forEach(scopeToken => {
34                 contactTokens.forEach(contactToken => {
35                     input.autocomplete = scopeToken + " " + contactToken;
36                     shouldBeEqualToString('input.autocomplete', scopeToken + " " + contactToken);
37                 })
38             });
39
40             debug('');
41             debug('Mode:');
42             var addressTokens = [ "street-address", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code" ];
43             var modeTokens = [ "shipping", "billing" ];
44             modeTokens.forEach(modeToken => {
45                 addressTokens.forEach(addressToken => {
46                     input.autocomplete = modeToken + " " + addressToken;
47                     shouldBeEqualToString('input.autocomplete', modeToken + " " + addressToken);
48                 })
49             });
50
51             debug('');
52             debug('Section:');
53             keywords.forEach(keyword => {
54                 var value = "section-parent " + keyword;
55                 input.autocomplete = value;
56                 shouldBeEqualToString('input.autocomplete', value);
57             });
58
59             debug('');
60             debug('Invalid combinations:');
61             autocompleteableControls.forEach(control => {
62                  control.autocomplete = 'invalid';
63                  shouldBeEmptyString('input.autocomplete');
64             });
65             // Two normal tokens
66             input.autocomplete = "name name";
67             shouldBeEmptyString('input.autocomplete');
68
69             input.autocomplete = "name bday";
70             shouldBeEmptyString('input.autocomplete');
71
72             // Contact scope token + non-contact token.
73             input.autocomplete = "pager bday";
74             shouldBeEmptyString('input.autocomplete');
75
76             // Two contact scope tokens.
77             input.autocomplete = "home work tel";
78             shouldBeEmptyString('input.autocomplete');
79
80             // Two mode tokens.
81             input.autocomplete = "shipping billing tel";
82             shouldBeEmptyString('input.autocomplete');
83
84             // Two section tokens.
85             input.autocomplete = "section-a section-b tel";
86             shouldBeEmptyString('input.autocomplete');
87
88             // Anything + on/off.
89             input.autocomplete = "tel on";
90             shouldBeEmptyString('input.autocomplete');
91
92             input.autocomplete = "tel off";
93             shouldBeEmptyString('input.autocomplete');
94
95             debug('');
96             debug('Non-autocompleteable controls:');
97             // Buttons and keygens are not autocompleteable, so their autocomplete attribute is not sanitized.
98             button.autocomplete = 'invalid';
99             shouldBeEqualToString('button.autocomplete', 'invalid');
100             keygen.autocomplete = 'invalid';
101             shouldBeEqualToString('keygen.autocomplete', 'invalid');
102         </script>
103         <script src="../../resources/js-test-post.js"></script>
104     </body>
105 </html>