diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-form-element/form-requestsubmit.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-form-element/form-requestsubmit.html | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-requestsubmit.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-requestsubmit.html new file mode 100644 index 0000000000..cbc46cc7d3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-requestsubmit.html @@ -0,0 +1,215 @@ +<!DOCTYPE html> +<title>form.requestSubmit() tests</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<iframe name="iframe" src="about:blank"></iframe> + +<script> +test(() => { + document.body.insertAdjacentHTML('afterbegin', '<form>' + + '<input type="reset">' + + '<input type="text">' + + '<button type="reset"></button>' + + '<button type="button"></button>' + + '</form>'); + let form = document.querySelector('form'); + assert_throws_js(TypeError, () => { + form.requestSubmit(document.body); + }); + for (let control of form.elements) { + assert_throws_js(TypeError, () => { form.requestSubmit(control); }); + } +}, 'Passing an element which is not a submit button should throw'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', `<form> + <input form="" type="submit"> + <button form="form2" type="submit"></button> + </form> + <form id="form2"></form>`); + let form = document.querySelector('form'); + let submitButton = document.createElement('button'); + submitButton.type = 'submit'; + assert_throws_dom('NotFoundError', () => { + form.requestSubmit(submitButton); + }); + + let buttons = form.querySelectorAll('input, button'); + assert_equals(buttons.length, 2); + for (let control of buttons) { + assert_throws_dom('NotFoundError', () => { form.requestSubmit(control) }, + control.outerHTML); + } +}, 'Passing a submit button not owned by the context object should throw'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', `<input type=submit form="form1"> + <form id="form1" target="_blank"> + <button type="submit"></button> + <button></button> + <button type="invalid"></button> + <input type="submit"> + <input type="image"> + </form>`); + let form = document.querySelector('form'); + let didDispatchSubmit = false; + form.addEventListener('submit', event => { event.preventDefault(); didDispatchSubmit = true; }); + + assert_equals(form.elements.length, 5); + for (let control of form.elements) { + didDispatchSubmit = false; + form.requestSubmit(control); + assert_true(didDispatchSubmit, `${control.outerHTML} should submit the form`); + } + // <input type=image> is not in form.elements. + let control = form.querySelector('[type=image]'); + didDispatchSubmit = false; + form.requestSubmit(control); + assert_true(didDispatchSubmit, `${control.outerHTML} should submit the form`); +}, 'requestSubmit() should accept button[type=submit], input[type=submit], and input[type=image]'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', '<form><input required></form>'); + let form = document.querySelector('form'); + let invalidControl = form.querySelector('input:invalid'); + let didDispatchInvalid = false; + invalidControl.addEventListener('invalid', e => { didDispatchInvalid = true; }); + + form.requestSubmit(); + assert_true(didDispatchInvalid); +}, 'requestSubmit() should trigger interactive form validation'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', + '<form><input type=submit></form>'); + let form = document.querySelector('form'); + let submitButton = form.elements[0]; + let submitCounter = 0; + form.addEventListener('submit', e => { + ++submitCounter; + form.requestSubmit(); + e.preventDefault(); + }, {once: true}); + form.requestSubmit(); + assert_equals(submitCounter, 1, 'requestSubmit() + requestSubmit()'); + + submitCounter = 0; + form.addEventListener('submit', e => { + ++submitCounter; + submitButton.click(); + e.preventDefault(); + }, {once: true}); + form.requestSubmit(); + assert_equals(submitCounter, 1, 'requestSubmit() + click()'); + + submitCounter = 0; + form.addEventListener('submit', e => { + ++submitCounter; + form.requestSubmit(); + e.preventDefault(); + }, {once: true}); + submitButton.click(); + assert_equals(submitCounter, 1, 'click() + requestSubmit()'); +}, 'requestSubmit() doesn\'t run form submission reentrantly'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', + '<form><input type=submit><input required></form>'); + let form = document.querySelector('form'); + let submitButton = form.elements[0]; + let invalidControl = form.elements[1]; + let invalidCounter = 0; + invalidControl.addEventListener('invalid', e => { + ++invalidCounter; + if (invalidCounter < 10) + form.requestSubmit(); + }, {once: true}); + form.requestSubmit(); + assert_equals(invalidCounter, 1, 'requestSubmit() + requestSubmit()'); + + invalidCounter = 0; + invalidControl.addEventListener('invalid', e => { + ++invalidCounter; + if (invalidCounter < 10) + submitButton.click(); + }, {once: true}); + form.requestSubmit(); + assert_equals(invalidCounter, 1, 'requestSubmit() + click()'); + + invalidCounter = 0; + invalidControl.addEventListener('invalid', e => { + ++invalidCounter; + if (invalidCounter < 10) + form.requestSubmit(); + }, {once: true}); + submitButton.click(); + assert_equals(invalidCounter, 1, 'click() + requestSubmit()'); +}, 'requestSubmit() doesn\'t run interactive validation reentrantly'); + +test(() => { + let form = document.createElement('form'); + let submitCounter = 0; + form.addEventListener('submit', e => { ++submitCounter; e.preventDefault(); }); + form.requestSubmit(); + assert_equals(submitCounter, 0); +}, 'requestSubmit() for a disconnected form should not submit the form'); + +async_test(t => { + window.addEventListener('load', t.step_func(() => { + document.body.insertAdjacentHTML('afterbegin', ` +<form action="/common/blank.html"> +<input required> +<input type=submit formnovalidate formtarget=iframe name=s value=v> +</form>`); + let form = document.body.querySelector('form'); + let iframe = document.body.querySelector('iframe'); + assert_true(form.matches(':invalid'), 'The form is invalid.'); + // The form should be submitted though it is invalid. + iframe.addEventListener('load', t.step_func_done(() => { + assert_not_equals(iframe.contentWindow.location.search.indexOf('s=v'), -1); + })); + form.requestSubmit(form.querySelector('[type=submit]')); + })); +}, 'The value of the submitter should be appended, and form* ' + + 'attributes of the submitter should be handled.'); + +test(() => { + document.body.insertAdjacentHTML('afterbegin', `<form> + <input name="n1" value="v1"> + <button type="submit" name="n2" value="v2"></button> + </form> + <form id="form2"></form>`); + let form = document.querySelector('form'); + let formDataInEvent = null; + let submitter = form.querySelector('button[type=submit]'); + form.addEventListener('submit', e => { + e.preventDefault(); + formDataInEvent = new FormData(e.target); + }); + + form.requestSubmit(submitter); + assert_equals(formDataInEvent.get('n1'), 'v1'); + assert_false(formDataInEvent.has('n2')); +}, 'The constructed FormData object should not contain an entry for the submit button that was used to submit the form.'); + +async_test(t => { + document.body.insertAdjacentHTML('afterbegin', `<form> + <button type="submit" name="n1" value="v1" disabled=""></button> + </form>`); + let form = document.querySelector('form'); + let formDataInEvent = null; + let submitter = form.querySelector('button[type=submit]'); + + form.addEventListener("submit", t.step_func_done(ev => { + ev.preventDefault(); + formDataInEvent = new FormData(ev.target); + assert_false(formDataInEvent.has('n1')); + assert_equals(ev.target, form); + })); + + form.requestSubmit(submitter); + +}, "Using requestSubmit on a disabled button (via disabled attribute) should trigger submit but not be visible in FormData"); + +</script> |