| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script src="../../../resources/js-test.js"></script> | |
| 5 <style> | |
| 6 /* Position on an integer offset to avoid rounding errors during the test to cli
ck on a coordinate. */ | |
| 7 #image { | |
| 8 position: fixed; | |
| 9 top: 50px; | |
| 10 left: 50px; | |
| 11 } | |
| 12 </style> | |
| 13 </head> | |
| 14 <body> | |
| 15 <dialog id="outer"> | |
| 16 <form method="dialog"> | |
| 17 <input id="outer-submit-empty-string" type="submit" value=""> | |
| 18 </form> | |
| 19 <dialog id="inner"> | |
| 20 <form method="dialog"> | |
| 21 <input id="inner-submit-yes" type="submit" value="Yes"> | |
| 22 <input id="inner-submit-no" type="submit" value="No"> | |
| 23 <input id="image" type="image" | |
| 24 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAACuCA
IAAAAqMg/rAAAAAXNSR0IArs4c6QAAAU9JREFUeNrt0jERAAAIxDDAv+dHAxNLIqHXTlLwaiTAheBCXA
guxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7Ehe
BCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC
7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4E
JcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSFEuBCcCEuBBfiQnAhLgQX4kJwIS
4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLoSDBZ
XqBFnkRyeqAAAAAElFTkSuQmCC"> | |
| 25 </form> | |
| 26 </dialog> | |
| 27 <form> | |
| 28 <input id="outer-submit-no-value" formmethod="dialog" type="submit"> | |
| 29 </form> | |
| 30 </dialog> | |
| 31 <dialog id="host"></dialog> | |
| 32 <form method="dialog"> | |
| 33 <input id="no-dialog-ancestor-1" type="submit" value="Clicking me shouldn't
submit"> | |
| 34 <input id="no-dialog-ancestor-2" formmethod="dialog" type="submit" value="I
also don't submit"> | |
| 35 </form> | |
| 36 <form id="form_without_submit_button" method="dialog"> | |
| 37 </form> | |
| 38 <script> | |
| 39 window.jsTestIsAsync = true; | |
| 40 | |
| 41 function openDialogs() | |
| 42 { | |
| 43 var dialogs = document.querySelectorAll('dialog'); | |
| 44 for (var i = 0; i < dialogs.length; ++i) { | |
| 45 dialogs[i].returnValue = 'init'; | |
| 46 dialogs[i].show(); | |
| 47 } | |
| 48 } | |
| 49 | |
| 50 function closeDialogs() | |
| 51 { | |
| 52 var dialogs = document.querySelectorAll('dialog'); | |
| 53 for (var i = 0; i < dialogs.length; ++i) { | |
| 54 if (dialogs[i].open) | |
| 55 dialogs[i].close(); | |
| 56 } | |
| 57 } | |
| 58 | |
| 59 function checkDialogs(button, targetDialog, expectedResult) | |
| 60 { | |
| 61 dialogs = document.querySelectorAll('dialog'); | |
| 62 for (var i = 0; i < dialogs.length; ++i) { | |
| 63 dialog = dialogs[i]; | |
| 64 if (dialog == targetDialog) | |
| 65 shouldBeFalse(dialog.id + '; dialog.open'); | |
| 66 else | |
| 67 shouldBeTrue(dialog.id + '; dialog.open'); | |
| 68 | |
| 69 if (dialog == targetDialog && expectedResult !== null) | |
| 70 shouldBeEqualToString(dialog.id + '; dialog.returnValue', expectedRe
sult); | |
| 71 else | |
| 72 shouldBeEqualToString(dialog.id + '; dialog.returnValue', 'init'); | |
| 73 } | |
| 74 } | |
| 75 | |
| 76 function $(id) | |
| 77 { | |
| 78 return document.getElementById(id); | |
| 79 } | |
| 80 | |
| 81 function testDialogWithoutSubmitButton() | |
| 82 { | |
| 83 debug('Submitting a form without submit button (this should not crash)'); | |
| 84 form = $('form_without_submit_button'); | |
| 85 form.submit(); | |
| 86 debug(''); | |
| 87 } | |
| 88 | |
| 89 function testClosedDialog() | |
| 90 { | |
| 91 debug('Clicking a button in a closed dialog'); | |
| 92 closeDialogs(); | |
| 93 button = $('outer-submit-empty-string'); | |
| 94 dialog = $('outer'); | |
| 95 dialog.returnValue = 'init'; | |
| 96 button.click(); | |
| 97 shouldBeFalse('dialog.open'); | |
| 98 shouldBeEqualToString('dialog.returnValue', 'init'); | |
| 99 debug(''); | |
| 100 } | |
| 101 | |
| 102 function testClickMethodOnImageButton() | |
| 103 { | |
| 104 debug('Activating an image button by click()'); | |
| 105 openDialogs(); | |
| 106 $('inner').addEventListener('close', testClickMethodOnImageButtonClose); | |
| 107 $('image').click(); | |
| 108 } | |
| 109 | |
| 110 function testClickMethodOnImageButtonClose() | |
| 111 { | |
| 112 var image = $('image'); | |
| 113 var inner = $('inner'); | |
| 114 inner.removeEventListener('close', testClickMethodOnImageButtonClose); | |
| 115 checkDialogs(image, inner, '0,0'); | |
| 116 debug(''); | |
| 117 setTimeout(testKeyboardActivatingImageButton, 0); | |
| 118 } | |
| 119 | |
| 120 function testKeyboardActivatingImageButton() | |
| 121 { | |
| 122 debug('Activating an image button by keyboard'); | |
| 123 openDialogs(); | |
| 124 $('inner').addEventListener('close', testKeyboardActivatingImageButtonClose)
; | |
| 125 if (!window.eventSender) { | |
| 126 debug('This test requires eventSender.'); | |
| 127 return; | |
| 128 } | |
| 129 $('image').focus(); | |
| 130 eventSender.keyDown(' '); | |
| 131 } | |
| 132 | |
| 133 function testKeyboardActivatingImageButtonClose() | |
| 134 { | |
| 135 var image = $('image'); | |
| 136 var inner = $('inner'); | |
| 137 | |
| 138 inner.removeEventListener('close', testKeyboardActivatingImageButtonClose); | |
| 139 checkDialogs(image, inner, '0,0'); | |
| 140 debug(''); | |
| 141 setTimeout(testClickingImageButton, 0); | |
| 142 } | |
| 143 | |
| 144 function testClickingImageButton() | |
| 145 { | |
| 146 debug('Clicking an image button'); | |
| 147 openDialogs(); | |
| 148 var image = $('image'); | |
| 149 var inner = $('inner'); | |
| 150 var x = image.getBoundingClientRect().left + 10; | |
| 151 var y = image.getBoundingClientRect().top + 5; | |
| 152 | |
| 153 inner.addEventListener('close', testClickingImageButtonClose); | |
| 154 if (!window.eventSender) { | |
| 155 debug('This test requires eventSender'); | |
| 156 return; | |
| 157 } | |
| 158 eventSender.mouseMoveTo(x, y); | |
| 159 eventSender.mouseDown(); | |
| 160 eventSender.mouseUp(); | |
| 161 } | |
| 162 | |
| 163 function testClickingImageButtonClose() | |
| 164 { | |
| 165 var image = $('image'); | |
| 166 var inner = $('inner'); | |
| 167 | |
| 168 inner.removeEventListener('close', testClickingImageButtonClose); | |
| 169 checkDialogs(image, inner, '10,5'); | |
| 170 finishJSTest(); | |
| 171 } | |
| 172 | |
| 173 function test() | |
| 174 { | |
| 175 description('Tests form submission with method=dialog'); | |
| 176 var host = document.querySelector('#host'); | |
| 177 var shadowRoot = host.createShadowRoot(); | |
| 178 shadowRoot.innerHTML = | |
| 179 '<form method="dialog">' + | |
| 180 ' <input id="host-submit-yes" type=submit value=Yes>' + | |
| 181 '</form>'; | |
| 182 | |
| 183 var tests = [ | |
| 184 { button: $('outer-submit-empty-string'), targetDialog: $('outer'), resu
lt: '' }, | |
| 185 { button: $('outer-submit-no-value'), targetDialog: $('outer'), result:
null }, | |
| 186 { button: $('inner-submit-yes'), targetDialog: $('inner'), result: 'Yes'
}, | |
| 187 { button: $('inner-submit-no'), targetDialog: $('inner'), result: 'No' }
, | |
| 188 { button: $('no-dialog-ancestor-1'), targetDialog: null }, | |
| 189 { button: $('no-dialog-ancestor-2'), targetDialog: null }, | |
| 190 { button: host.shadowRoot.querySelector('#host-submit-yes'), targetDialo
g: $('host'), result: 'Yes' } | |
| 191 ]; | |
| 192 | |
| 193 for (var i = 0; i < tests.length; ++i) { | |
| 194 var button = tests[i].button; | |
| 195 openDialogs(); | |
| 196 debug('Clicking ' + button.id); | |
| 197 button.click(); | |
| 198 checkDialogs(button, tests[i].targetDialog, tests[i].result); | |
| 199 debug(''); | |
| 200 } | |
| 201 | |
| 202 testDialogWithoutSubmitButton(); | |
| 203 | |
| 204 testClosedDialog(); | |
| 205 | |
| 206 // The tests involving image button seem to need to be async. | |
| 207 testClickMethodOnImageButton(); | |
| 208 } | |
| 209 | |
| 210 test(); | |
| 211 </script> | |
| 212 </body> | |
| 213 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2671603003:
Move DIALOG element tests to html/dialog/. (Closed)
