chromium/src/third_party/blink/web_tests/external/wpt/html/semantics/forms/the-form-element/form-requestsubmit.html - manifest_repos/chromium_src - Git at Google

 <!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.');

 </script>
	<!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.');

	</script>