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>