diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html new file mode 100644 index 0000000000..5934485087 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<meta charset=urf-8> +<meta name=viewport content="width=device-width,initial-scale=1"> +<title>Test dialog form submission</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<body> +<dialog id="favDialog"> + <form id="dialogForm" method="dialog"> + <button id="confirmBtn" value="default">Confirm</button> + <input id="confirmImgBtn" src="./resources/submit.jpg" width="41" + height="41" type="image" alt="Hello"> + </form> + <form method="post"> + <input id="confirmImgBtn2" src="./resources/submit.jpg" width="41" + formmethod="dialog" height="41" type="image" alt="Hello"> + </form> +</dialog> +<script> +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.showModal(); + + const button = document.querySelector('button'); + button.click(); + + assert_false(dialog.open, "dialog should be closed now"); + assert_equals(dialog.returnValue, "default", "Return the default value"); +}, 'click the form submission button should close the dialog'); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.showModal(); + + const button = document.querySelector('button'); + button.value = "sushi"; + button.click(); + + assert_false(dialog.open, "dialog should be closed now"); + assert_equals(dialog.returnValue, "sushi", "Return the updated value"); +}, 'form submission should return correct value'); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.showModal(); + + const button = document.querySelector('button'); + button.removeAttribute("value"); + button.click(); + assert_false(dialog.open, "dialog should be closed now"); + assert_not_equals(dialog.returnValue, undefined, "returnValue should not be set"); +}, "no returnValue when there's no result."); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.showModal(); + + const button = document.querySelector('input'); + let expectedReturnValue = ""; + button.addEventListener('click', function(event) { + expectedReturnValue = event.offsetX + "," + event.offsetY; + }); + await test_driver.click(button); + + assert_false(dialog.open, "dialog should be closed now"); + assert_not_equals(dialog.returnValue, "", "returnValue shouldn't be empty string"); + assert_equals(dialog.returnValue, expectedReturnValue, "returnValue should be the offsets of the click"); +}, "input image button should return the coordinates"); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.showModal(); + const button = document.getElementById('confirmImgBtn2'); + await test_driver.click(button); + assert_false(dialog.open, "dialog should be closed now"); +}, "formmethod attribute should use dialog form submission"); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.returnValue = ""; + dialog.showModal(); + + const button = document.querySelector('button'); + button.value = "sushi"; + + const dialogForm = document.getElementById('dialogForm'); + dialogForm.onsubmit = function() { + dialog.close(); + } + + button.click(); + assert_false(dialog.open, "dialog should be closed now"); + // If the submission request got processed, the returnValue should change + // to "sushi" because that's the value of the submitter + assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); +}, "closing the dialog while submitting should stop the submission"); + +promise_test(async () => { + const dialog = document.querySelector('dialog'); + dialog.returnValue = undefined; + dialog.showModal(); + + let submitEvent = false; + const dialogForm = document.getElementById('dialogForm'); + dialogForm.onsubmit = function() { + submitEvent = true; + assert_false(dialog.open, "dialog should be closed"); + assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); + }; + + const button = document.querySelector('button'); + button.value = "sushi"; + button.onclick = function() { + dialogForm.submit(); + assert_false(dialog.open, "dialog should be closed now"); + // The returnValue should be "" because there is no submitter + assert_equals(dialog.returnValue, "", "returnValue shouldn be empty string"); + }; + + button.click(); + assert_true(submitEvent, "Should have submit event"); + assert_false(dialog.open, "dialog should be closed"); + assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); +}, "calling form.submit() in click handler of submit button should start the submission synchronously"); + +</script> +</body> |