| <!DOCTYPE html> |
| <html> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization"> |
| <body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| |
| test(function() { |
| assert_true('autocapitalize' in document.createElement('input')); |
| }, "Test that the autocapitalize is avaible on HTMLInputElement.") |
| |
| test(function() { |
| assert_true('autocapitalize' in document.createElement('textarea')); |
| }, "Test that the autocapitalize is avaible on HTMLTextAreaElement.") |
| |
| test(function() { |
| assert_true('autocapitalize' in document.createElement('div')); |
| }, "Test that the autocapitalize is avaible on div.") |
| |
| test(function() { |
| var elements = [ document.createElement('input'), |
| document.createElement('textarea'), |
| document.createElement('div') ]; |
| |
| elements.forEach(function(e) { |
| e.autocapitalize = 'on'; |
| assert_equals(e.autocapitalize, 'sentences'); |
| |
| e.autocapitalize = 'off'; |
| assert_equals(e.autocapitalize, 'none'); |
| }); |
| }, "Test deprecated values of autocapitalize."); |
| |
| test(function() { |
| var elements = [ document.createElement('input'), |
| document.createElement('textarea'), |
| document.createElement('div') ]; |
| var knownValues = [ 'none', 'characters', 'words', 'sentences' ]; |
| |
| elements.forEach(function(e) { |
| // Default value. |
| assert_equals(e.autocapitalize, ''); |
| |
| // Empty value. |
| e.autocapitalize = ''; |
| assert_equals(e.autocapitalize, ''); |
| assert_equals(e.getAttribute('autocapitalize'), ''); |
| e.setAttribute('autocapitalize', ''); |
| assert_equals(e.autocapitalize, ''); |
| assert_equals(e.getAttribute('autocapitalize'), ''); |
| assert_equals(e.autocapitalize, ''); |
| |
| // Invalid value. |
| e.autocapitalize = 'foo'; |
| assert_equals(e.autocapitalize, 'sentences'); |
| assert_equals(e.getAttribute('autocapitalize'), 'foo'); |
| e.setAttribute('autocapitalize', 'bar'); |
| assert_equals(e.autocapitalize, 'sentences'); |
| assert_equals(e.getAttribute('autocapitalize'), 'bar'); |
| |
| // Default value. |
| e.removeAttribute('autocapitalize'); |
| assert_equals(e.autocapitalize, ''); |
| assert_equals(e.getAttribute('autocapitalize'), null); |
| |
| // Case insensitive. |
| e.setAttribute('autocapitalize', 'NoNe'); |
| assert_equals(e.autocapitalize, 'none'); |
| assert_equals(e.getAttribute('autocapitalize'), 'NoNe'); |
| e.autocapitalize = 'WORDS'; |
| assert_equals(e.autocapitalize, 'words'); |
| assert_equals(e.getAttribute('autocapitalize'), 'WORDS'); |
| |
| knownValues.forEach(function(value) { |
| e.setAttribute('autocapitalize', value); |
| assert_equals(e.autocapitalize, value); |
| assert_equals(e.getAttribute('autocapitalize'), value); |
| |
| e.removeAttribute('autocapitalize'); |
| |
| e.autocapitalize = value; |
| assert_equals(e.autocapitalize, value); |
| assert_equals(e.getAttribute('autocapitalize'), value); |
| |
| e.removeAttribute('autocapitalize'); |
| }); |
| }); |
| }, "Test reflection of autocapitalize."); |
| |
| test(function() { |
| var testData = [ 'text', |
| 'search', |
| 'email', |
| 'url', |
| 'tel', |
| 'number', |
| 'date', |
| 'color', |
| 'password' ]; |
| |
| testData.forEach(function(data) { |
| const input = document.createElement('input'); |
| input.type = data; |
| assert_equals(input.autocapitalize, ''); |
| |
| // Verify that wrapping the input element in a form doesn't change the |
| // defaults. |
| const form = document.createElement('form'); |
| form.appendChild(input); |
| assert_equals(input.autocapitalize, ''); |
| }); |
| }, "Test that the IDL attribute returns the empty string if the content " |
| + "attribute is not set.") |
| |
| test(function() { |
| const testData = [ |
| { |
| formValue: null, |
| formElementValue: null, |
| inheritedResult: '', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: null, |
| formElementValue: '', |
| inheritedResult: '', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: null, |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: '', |
| formElementValue: null, |
| inheritedResult: '', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: '', |
| formElementValue: '', |
| inheritedResult: '', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: '', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: null, |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: '', |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'on', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: null, |
| inheritedResult: 'none', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: '', |
| inheritedResult: 'none', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'off', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: null, |
| inheritedResult: 'none', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: '', |
| inheritedResult: 'none', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'none', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: null, |
| inheritedResult: 'characters', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: '', |
| inheritedResult: 'characters', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'characters', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: null, |
| inheritedResult: 'words', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: '', |
| inheritedResult: 'words', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'words', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: null, |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: '', |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'sentences', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: null, |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: '', |
| inheritedResult: 'sentences', |
| uninheritedResult: '', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'on', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'off', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'none', |
| inheritedResult: 'none', |
| uninheritedResult: 'none', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'characters', |
| inheritedResult: 'characters', |
| uninheritedResult: 'characters', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'words', |
| inheritedResult: 'words', |
| uninheritedResult: 'words', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'sentences', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| { |
| formValue: 'foo', |
| formElementValue: 'foo', |
| inheritedResult: 'sentences', |
| uninheritedResult: 'sentences', |
| }, |
| ]; |
| |
| const formElements = [ |
| {element: 'button', inherits: true}, |
| {element: 'fieldset', inherits: true}, |
| {element: 'img', inherits: false}, |
| {element: 'input', inherits: true}, |
| {element: 'object', inherits: false}, |
| {element: 'output', inherits: true}, |
| {element: 'select', inherits: true}, |
| {element: 'textarea', inherits: true}, |
| ]; |
| |
| const form = document.createElement('form'); |
| form.id = 'form'; |
| document.body.appendChild(form); |
| |
| testData.forEach(data => { |
| form.removeAttribute('autocapitalize'); |
| |
| if (data.formValue !== null) { |
| form.setAttribute('autocapitalize', data.formValue); |
| } |
| |
| formElements.forEach(elementData => { |
| const element = document.createElement(elementData.element); |
| form.appendChild(element); |
| |
| const element2 = document.createElement(elementData.element); |
| element2.setAttribute('form', 'form'); |
| document.body.appendChild(element2); |
| |
| if (data.formElementValue !== null) { |
| element.setAttribute('autocapitalize', data.formElementValue); |
| element2.setAttribute('autocapitalize', data.formElementValue); |
| } |
| |
| const descriptionSuffix = 'with "' + data.formValue |
| + '" and form element with "'+ data.formElementValue + '"'; |
| |
| if (elementData.inherits) { |
| assert_equals(element.autocapitalize, data.inheritedResult, |
| `${elementData.element} element with form parent ` |
| + `${descriptionSuffix}`); |
| assert_equals(element2.autocapitalize, data.inheritedResult, |
| `${elementData.element} element with form owner attribute` |
| + ` set ${descriptionSuffix}`); |
| } else { |
| assert_equals(element.autocapitalize, data.uninheritedResult, |
| `${elementData.element} element with form parent ` |
| + `${descriptionSuffix}`); |
| assert_equals(element2.autocapitalize, data.uninheritedResult, |
| `${elementData.element} element with form owner attribute` |
| + `set ${descriptionSuffix}`); |
| } |
| }); |
| }); |
| }, "Test inheriting values from a form.") |
| |
| test(function() { |
| const testData = [ 'text', |
| 'search', |
| 'email', |
| 'url', |
| 'tel', |
| 'number', |
| 'date', |
| 'color', |
| 'password' ]; |
| |
| testData.forEach(function(data) { |
| const form = document.createElement('form'); |
| form.setAttribute('autocapitalize', 'sentences'); |
| const input = document.createElement('input'); |
| input.setAttribute('type', data); |
| form.appendChild(input); |
| |
| assert_equals(input.autocapitalize, 'sentences'); |
| }); |
| }, "Verify that even input types that are never autocapitalized support the " |
| + "IDL interface.") |
| |
| </script> |
| </body> |
| </html> |