dialog-form-submission.html (6257B)
1 <!DOCTYPE html> 2 <meta charset=urf-8> 3 <meta name=viewport content="width=device-width,initial-scale=1"> 4 <title>Test dialog form submission</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <body> 12 <dialog id="favDialog"> 13 <form id="dialogForm" method="dialog"> 14 <button id="confirmBtn" value="default">Confirm</button> 15 <input id="confirmImgBtn" src="./resources/submit.jpg" width="41" 16 height="41" type="image" alt="Hello"> 17 </form> 18 <form method="post"> 19 <input id="confirmImgBtn2" src="./resources/submit.jpg" width="41" 20 formmethod="dialog" height="41" type="image" alt="Hello"> 21 </form> 22 </dialog> 23 <script> 24 promise_test(async (t) => { 25 const dialog = document.querySelector('dialog'); 26 const button = document.querySelector('button'); 27 t.add_cleanup(() => { 28 dialog.close(); 29 dialog.returnValue = ""; 30 button.removeAttribute("value"); 31 }); 32 dialog.showModal(); 33 34 button.click(); 35 36 assert_false(dialog.open, "dialog should be closed now"); 37 assert_equals(dialog.returnValue, "default", "Return the default value"); 38 }, 'click the form submission button should close the dialog'); 39 40 promise_test(async (t) => { 41 const dialog = document.querySelector('dialog'); 42 const button = document.querySelector('button'); 43 t.add_cleanup(() => { 44 dialog.close(); 45 dialog.returnValue = ""; 46 button.removeAttribute("value"); 47 }); 48 dialog.returnValue = "initial"; 49 dialog.showModal(); 50 51 button.value = "sushi"; 52 button.click(); 53 54 assert_false(dialog.open, "dialog should be closed now"); 55 assert_equals(dialog.returnValue, "sushi", "Return the updated value"); 56 }, 'form submission should return correct value'); 57 58 promise_test(async (t) => { 59 const dialog = document.querySelector('dialog'); 60 const button = document.querySelector('button'); 61 t.add_cleanup(() => { 62 dialog.close(); 63 dialog.returnValue = ""; 64 button.removeAttribute("value"); 65 }); 66 dialog.returnValue = "initial"; 67 dialog.showModal(); 68 69 button.removeAttribute("value"); 70 button.click(); 71 assert_false(dialog.open, "dialog should be closed now"); 72 assert_equals(dialog.returnValue, "initial", "returnValue should not be updated"); 73 }, "returnValue doesn't update when there's no value attribute."); 74 75 promise_test(async (t) => { 76 const dialog = document.querySelector('dialog'); 77 const button = document.querySelector('button'); 78 t.add_cleanup(() => { 79 dialog.close(); 80 dialog.returnValue = ""; 81 button.removeAttribute("value"); 82 }); 83 dialog.returnValue = "initial"; 84 dialog.showModal(); 85 86 button.setAttribute("value", ""); 87 button.click(); 88 assert_false(dialog.open, "dialog should be closed now"); 89 assert_equals(dialog.returnValue, "", "returnValue should be updated"); 90 }, "returnValue does update when there's an empty value attribute."); 91 92 promise_test(async (t) => { 93 const dialog = document.querySelector('dialog'); 94 const button = document.querySelector('input'); 95 t.add_cleanup(() => { 96 dialog.close(); 97 dialog.returnValue = ""; 98 button.removeAttribute("value"); 99 }); 100 dialog.showModal(); 101 102 let expectedReturnValue = ""; 103 button.addEventListener('click', function(event) { 104 expectedReturnValue = event.offsetX + "," + event.offsetY; 105 }); 106 await test_driver.click(button); 107 108 assert_false(dialog.open, "dialog should be closed now"); 109 assert_not_equals(dialog.returnValue, "", "returnValue shouldn't be empty string"); 110 assert_equals(dialog.returnValue, expectedReturnValue, "returnValue should be the offsets of the click"); 111 }, "input image button should return the coordinates"); 112 113 promise_test(async (t) => { 114 const dialog = document.querySelector('dialog'); 115 t.add_cleanup(() => { 116 dialog.close(); 117 dialog.returnValue = ""; 118 button.removeAttribute("value"); 119 }); 120 dialog.showModal(); 121 const button = document.getElementById('confirmImgBtn2'); 122 await test_driver.click(button); 123 assert_false(dialog.open, "dialog should be closed now"); 124 }, "formmethod attribute should use dialog form submission"); 125 126 promise_test(async (t) => { 127 const dialog = document.querySelector('dialog'); 128 t.add_cleanup(() => { 129 dialog.close(); 130 dialog.returnValue = ""; 131 button.removeAttribute("value"); 132 }); 133 dialog.returnValue = ""; 134 dialog.showModal(); 135 136 const button = document.querySelector('button'); 137 button.value = "sushi"; 138 139 const dialogForm = document.getElementById('dialogForm'); 140 dialogForm.onsubmit = function() { 141 dialog.close(); 142 } 143 144 button.click(); 145 assert_false(dialog.open, "dialog should be closed now"); 146 // If the submission request got processed, the returnValue should change 147 // to "sushi" because that's the value of the submitter 148 assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); 149 }, "closing the dialog while submitting should stop the submission"); 150 151 promise_test(async (t) => { 152 const dialog = document.querySelector('dialog'); 153 t.add_cleanup(() => { 154 dialog.close(); 155 dialog.returnValue = ""; 156 button.removeAttribute("value"); 157 }); 158 dialog.returnValue = undefined; 159 dialog.showModal(); 160 161 let submitEvent = false; 162 const dialogForm = document.getElementById('dialogForm'); 163 dialogForm.onsubmit = function() { 164 submitEvent = true; 165 assert_false(dialog.open, "dialog should be closed"); 166 assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); 167 }; 168 169 const button = document.querySelector('button'); 170 button.value = "sushi"; 171 button.onclick = function() { 172 dialogForm.submit(); 173 assert_false(dialog.open, "dialog should be closed now"); 174 // The returnValue should be "" because there is no submitter 175 assert_equals(dialog.returnValue, "", "returnValue shouldn be empty string"); 176 }; 177 178 button.click(); 179 assert_true(submitEvent, "Should have submit event"); 180 assert_false(dialog.open, "dialog should be closed"); 181 assert_equals(dialog.returnValue, "", "dialog's returnValue remains the same"); 182 }, "calling form.submit() in click handler of submit button should start the submission synchronously"); 183 184 </script> 185 </body>