third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/form-method-dialog.html

   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 click 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,iVBORw0KGgoAAAANSUhEUgAAANcAAACuCAIAAAAqMg/rAAAAAXNSR0IArs4c6QAAAU9JREFUeNrt0jERAAAIxDDAv+dHAxNLIqHXTlLwaiTAheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSFEuBCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLoSDBZXqBFnkRyeqAAAAAElFTkSuQmCC">
  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', expectedResult);
  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'), result: '' },
 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'), targetDialog: $('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>