third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/form-method-dialog.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../../resources/js-test.js"></script>
 <style>
 /* Position on an integer offset to avoid rounding errors during the test to click on a coordinate. */
 #image {
     position: fixed;
     top: 50px;
     left: 50px;
 }
 </style>
 </head>
 <body>
 <dialog id="outer">
     <form method="dialog">
         <input id="outer-submit-empty-string" type="submit" value="">
     </form>
     <dialog id="inner">
         <form method="dialog">
             <input id="inner-submit-yes" type="submit" value="Yes">
             <input id="inner-submit-no" type="submit" value="No">
             <input id="image" type="image"
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAACuCAIAAAAqMg/rAAAAAXNSR0IArs4c6QAAAU9JREFUeNrt0jERAAAIxDDAv+dHAxNLIqHXTlLwaiTAheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSFEuBCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLoSDBZXqBFnkRyeqAAAAAElFTkSuQmCC">
         </form>
     </dialog>
     <form>
         <input id="outer-submit-no-value" formmethod="dialog" type="submit">
     </form>
 </dialog>
 <dialog id="host"></dialog>
 <form method="dialog">
     <input id="no-dialog-ancestor-1" type="submit" value="Clicking me shouldn't submit">
     <input id="no-dialog-ancestor-2" formmethod="dialog" type="submit" value="I also don't submit">
 </form>
 <form id="form_without_submit_button" method="dialog">
 </form>
 <script>
 window.jsTestIsAsync = true;

 function openDialogs()
 {
     var dialogs = document.querySelectorAll('dialog');
     for (var i = 0; i < dialogs.length; ++i) {
         dialogs[i].returnValue = 'init';
         dialogs[i].show();
     }
 }

 function closeDialogs()
 {
     var dialogs = document.querySelectorAll('dialog');
     for (var i = 0; i < dialogs.length; ++i) {
         if (dialogs[i].open)
             dialogs[i].close();
     }
 }

 function checkDialogs(button, targetDialog, expectedResult)
 {
     dialogs = document.querySelectorAll('dialog');
     for (var i = 0; i < dialogs.length; ++i) {
         dialog = dialogs[i];
         if (dialog == targetDialog)
             shouldBeFalse(dialog.id + '; dialog.open');
         else
             shouldBeTrue(dialog.id + '; dialog.open');

         if (dialog == targetDialog && expectedResult !== null)
             shouldBeEqualToString(dialog.id + '; dialog.returnValue', expectedResult);
         else
             shouldBeEqualToString(dialog.id + '; dialog.returnValue', 'init');
     }
 }

 function $(id)
 {
     return document.getElementById(id);
 }

 function testDialogWithoutSubmitButton()
 {
     debug('Submitting a form without submit button (this should not crash)');
     form = $('form_without_submit_button');
     form.submit();
     debug('');
 }

 function testClosedDialog()
 {
     debug('Clicking a button in a closed dialog');
     closeDialogs();
     button = $('outer-submit-empty-string');
     dialog = $('outer');
     dialog.returnValue = 'init';
     button.click();
     shouldBeFalse('dialog.open');
     shouldBeEqualToString('dialog.returnValue', 'init');
     debug('');
 }

 function testClickMethodOnImageButton()
 {
     debug('Activating an image button by click()');
     openDialogs();
     $('inner').addEventListener('close', testClickMethodOnImageButtonClose);
     $('image').click();
 }

 function testClickMethodOnImageButtonClose()
 {
     var image = $('image');
     var inner = $('inner');
     inner.removeEventListener('close', testClickMethodOnImageButtonClose);
     checkDialogs(image, inner, '0,0');
     debug('');
     setTimeout(testKeyboardActivatingImageButton, 0);
 }

 function testKeyboardActivatingImageButton()
 {
     debug('Activating an image button by keyboard');
     openDialogs();
     $('inner').addEventListener('close', testKeyboardActivatingImageButtonClose);
     if (!window.eventSender) {
         debug('This test requires eventSender.');
         return;
     }
     $('image').focus();
     eventSender.keyDown(' ');
 }

 function testKeyboardActivatingImageButtonClose()
 {
     var image = $('image');
     var inner = $('inner');

     inner.removeEventListener('close', testKeyboardActivatingImageButtonClose);
     checkDialogs(image, inner, '0,0');
     debug('');
     setTimeout(testClickingImageButton, 0);
 }

 function testClickingImageButton()
 {
     debug('Clicking an image button');
     openDialogs();
     var image = $('image');
     var inner = $('inner');
     var x = image.getBoundingClientRect().left + 10;
     var y = image.getBoundingClientRect().top + 5;

     inner.addEventListener('close', testClickingImageButtonClose);
     if (!window.eventSender) {
         debug('This test requires eventSender');
         return;
     }
     eventSender.mouseMoveTo(x, y);
     eventSender.mouseDown();
     eventSender.mouseUp();
 }

 function testClickingImageButtonClose()
 {
     var image = $('image');
     var inner = $('inner');

     inner.removeEventListener('close', testClickingImageButtonClose);
     checkDialogs(image, inner, '10,5');
     finishJSTest();
 }

 function test()
 {
     description('Tests form submission with method=dialog');
     var host = document.querySelector('#host');
     var shadowRoot = host.createShadowRoot();
     shadowRoot.innerHTML =
        '<form method="dialog">' +
        '    <input id="host-submit-yes" type=submit value=Yes>' +
        '</form>';

     var tests = [
         { button: $('outer-submit-empty-string'), targetDialog: $('outer'), result: '' },
         { button: $('outer-submit-no-value'), targetDialog: $('outer'), result: null },
         { button: $('inner-submit-yes'), targetDialog: $('inner'), result: 'Yes' },
         { button: $('inner-submit-no'), targetDialog: $('inner'), result: 'No' },
         { button: $('no-dialog-ancestor-1'), targetDialog: null },
         { button: $('no-dialog-ancestor-2'), targetDialog: null },
         { button: host.shadowRoot.querySelector('#host-submit-yes'), targetDialog: $('host'), result: 'Yes' }
     ];

     for (var i = 0; i < tests.length; ++i) {
         var button = tests[i].button;
         openDialogs();
         debug('Clicking ' + button.id);
         button.click();
         checkDialogs(button, tests[i].targetDialog, tests[i].result);
         debug('');
     }

     testDialogWithoutSubmitButton();

     testClosedDialog();

     // The tests involving image button seem to need to be async.
     testClickMethodOnImageButton();
 }

 test();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../../resources/js-test.js"></script>
	<style>
	/* Position on an integer offset to avoid rounding errors during the test to click on a coordinate. */
	#image {
	position: fixed;
	top: 50px;
	left: 50px;
	}
	</style>
	</head>
	<body>
	<dialog id="outer">
	<form method="dialog">
	<input id="outer-submit-empty-string" type="submit" value="">
	</form>
	<dialog id="inner">
	<form method="dialog">
	<input id="inner-submit-yes" type="submit" value="Yes">
	<input id="inner-submit-no" type="submit" value="No">
	<input id="image" type="image"
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAACuCAIAAAAqMg/rAAAAAXNSR0IArs4c6QAAAU9JREFUeNrt0jERAAAIxDDAv+dHAxNLIqHXTlLwaiTAheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSFEuBCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLoSDBZXqBFnkRyeqAAAAAElFTkSuQmCC">
	</form>
	</dialog>
	<form>
	<input id="outer-submit-no-value" formmethod="dialog" type="submit">
	</form>
	</dialog>
	<dialog id="host"></dialog>
	<form method="dialog">
	<input id="no-dialog-ancestor-1" type="submit" value="Clicking me shouldn't submit">
	<input id="no-dialog-ancestor-2" formmethod="dialog" type="submit" value="I also don't submit">
	</form>
	<form id="form_without_submit_button" method="dialog">
	</form>
	<script>
	window.jsTestIsAsync = true;

	function openDialogs()
	{
	var dialogs = document.querySelectorAll('dialog');
	for (var i = 0; i < dialogs.length; ++i) {
	dialogs[i].returnValue = 'init';
	dialogs[i].show();
	}
	}

	function closeDialogs()
	{
	var dialogs = document.querySelectorAll('dialog');
	for (var i = 0; i < dialogs.length; ++i) {
	if (dialogs[i].open)
	dialogs[i].close();
	}
	}

	function checkDialogs(button, targetDialog, expectedResult)
	{
	dialogs = document.querySelectorAll('dialog');
	for (var i = 0; i < dialogs.length; ++i) {
	dialog = dialogs[i];
	if (dialog == targetDialog)
	shouldBeFalse(dialog.id + '; dialog.open');
	else
	shouldBeTrue(dialog.id + '; dialog.open');

	if (dialog == targetDialog && expectedResult !== null)
	shouldBeEqualToString(dialog.id + '; dialog.returnValue', expectedResult);
	else
	shouldBeEqualToString(dialog.id + '; dialog.returnValue', 'init');
	}
	}

	function $(id)
	{
	return document.getElementById(id);
	}

	function testDialogWithoutSubmitButton()
	{
	debug('Submitting a form without submit button (this should not crash)');
	form = $('form_without_submit_button');
	form.submit();
	debug('');
	}

	function testClosedDialog()
	{
	debug('Clicking a button in a closed dialog');
	closeDialogs();
	button = $('outer-submit-empty-string');
	dialog = $('outer');
	dialog.returnValue = 'init';
	button.click();
	shouldBeFalse('dialog.open');
	shouldBeEqualToString('dialog.returnValue', 'init');
	debug('');
	}

	function testClickMethodOnImageButton()
	{
	debug('Activating an image button by click()');
	openDialogs();
	$('inner').addEventListener('close', testClickMethodOnImageButtonClose);
	$('image').click();
	}

	function testClickMethodOnImageButtonClose()
	{
	var image = $('image');
	var inner = $('inner');
	inner.removeEventListener('close', testClickMethodOnImageButtonClose);
	checkDialogs(image, inner, '0,0');
	debug('');
	setTimeout(testKeyboardActivatingImageButton, 0);
	}

	function testKeyboardActivatingImageButton()
	{
	debug('Activating an image button by keyboard');
	openDialogs();
	$('inner').addEventListener('close', testKeyboardActivatingImageButtonClose);
	if (!window.eventSender) {
	debug('This test requires eventSender.');
	return;
	}
	$('image').focus();
	eventSender.keyDown(' ');
	}

	function testKeyboardActivatingImageButtonClose()
	{
	var image = $('image');
	var inner = $('inner');

	inner.removeEventListener('close', testKeyboardActivatingImageButtonClose);
	checkDialogs(image, inner, '0,0');
	debug('');
	setTimeout(testClickingImageButton, 0);
	}

	function testClickingImageButton()
	{
	debug('Clicking an image button');
	openDialogs();
	var image = $('image');
	var inner = $('inner');
	var x = image.getBoundingClientRect().left + 10;
	var y = image.getBoundingClientRect().top + 5;

	inner.addEventListener('close', testClickingImageButtonClose);
	if (!window.eventSender) {
	debug('This test requires eventSender');
	return;
	}
	eventSender.mouseMoveTo(x, y);
	eventSender.mouseDown();
	eventSender.mouseUp();
	}

	function testClickingImageButtonClose()
	{
	var image = $('image');
	var inner = $('inner');

	inner.removeEventListener('close', testClickingImageButtonClose);
	checkDialogs(image, inner, '10,5');
	finishJSTest();
	}

	function test()
	{
	description('Tests form submission with method=dialog');
	var host = document.querySelector('#host');
	var shadowRoot = host.createShadowRoot();
	shadowRoot.innerHTML =
	'<form method="dialog">' +
	' <input id="host-submit-yes" type=submit value=Yes>' +
	'</form>';

	var tests = [
	{ button: $('outer-submit-empty-string'), targetDialog: $('outer'), result: '' },
	{ button: $('outer-submit-no-value'), targetDialog: $('outer'), result: null },
	{ button: $('inner-submit-yes'), targetDialog: $('inner'), result: 'Yes' },
	{ button: $('inner-submit-no'), targetDialog: $('inner'), result: 'No' },
	{ button: $('no-dialog-ancestor-1'), targetDialog: null },
	{ button: $('no-dialog-ancestor-2'), targetDialog: null },
	{ button: host.shadowRoot.querySelector('#host-submit-yes'), targetDialog: $('host'), result: 'Yes' }
	];

	for (var i = 0; i < tests.length; ++i) {
	var button = tests[i].button;
	openDialogs();
	debug('Clicking ' + button.id);
	button.click();
	checkDialogs(button, tests[i].targetDialog, tests[i].result);
	debug('');
	}

	testDialogWithoutSubmitButton();

	testClosedDialog();

	// The tests involving image button seem to need to be async.
	testClickMethodOnImageButton();
	}

	test();
	</script>
	</body>
	</html>