src/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/dialog-canceling.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #bottom {
   6     top: 100px;
   7     left: 100px;
   8     height: 300px;
   9     width: 300px;
  10     margin: 0;
  11     background: cyan;
  12 }
  13
  14 #top {
  15     top: 150px;
  16     left: 150px;
  17     height: 200px;
  18     width: 200px;
  19     margin: 0;
  20     background: yellow;
  21 }
  22 </style>
  23 <script src="../../../resources/js-test.js"></script>
  24 </head>
  25 <body>
  26 <dialog id="bottom">
  27     <span></span>
  28     <div>You can't Escape when this textbox has focus: <input id="swallow-input" type="text"></div>
  29     <div>You can Escape even if this textbox has focus: <input id="normal-input" type="text"></div>
  30 </dialog>
  31 <dialog id="top">
  32     <span></span>
  33 </dialog>
  34 <script>
  35 description('Tests canceling modal dialogs using the Escape key. ' +
  36             'To test manually, hit Escape once to see the topmost dialog turn green, ' +
  37             'then once again to close it. Repeat for the remaining dialog.');
  38
  39 function handleCancel(event) {
  40     this.style.background = 'green';
  41     this.querySelector('span').textContent = 'I blocked the cancel! Try again to close me.';
  42     event.preventDefault();
  43     this.removeEventListener('cancel', handleCancel);
  44 }
  45
  46 function test() {
  47     bottomDialog = document.getElementById('bottom');
  48     bottomDialog.addEventListener('cancel', handleCancel);
  49
  50     topDialog = document.getElementById('top');
  51     topDialog.addEventListener('cancel', handleCancel);
  52
  53     normalInput = document.getElementById('normal-input');
  54     swallowInput = document.getElementById('swallow-input');
  55     swallowInput.addEventListener('keydown', function(event) {
  56         event.preventDefault();
  57     });
  58
  59     bottomDialog.showModal();
  60     topDialog.showModal();
  61
  62     if (!window.eventSender)
  63         return;
  64
  65     debug('Top dialog event listener should prevent closing.');
  66     eventSender.keyDown("escape");
  67     shouldBeTrue('topDialog.open');
  68     shouldBeTrue('bottomDialog.open');
  69
  70     debug('Top dialog should close.');
  71     eventSender.keyDown("escape");
  72     shouldBeFalse('topDialog.open');
  73     shouldBeTrue('bottomDialog.open');
  74
  75     debug('Input should swallow Escape mechanism.');
  76     swallowInput.focus();
  77     eventSender.keyDown("escape");
  78     eventSender.keyDown("escape");
  79     eventSender.keyDown("escape");
  80     shouldBeFalse('topDialog.open');
  81     shouldBeTrue('bottomDialog.open');
  82
  83     normalInput.focus();
  84     debug('Bottom dialog event listener should prevent closing.');
  85     eventSender.keyDown("escape");
  86     shouldBeFalse('topDialog.open');
  87     shouldBeTrue('bottomDialog.open');
  88
  89     debug('Bottom dialog should close.');
  90     eventSender.keyDown("escape");
  91     shouldBeFalse('topDialog.open');
  92     shouldBeFalse('bottomDialog.open');
  93
  94     debug('Pressing Escape now should do nothing.');
  95     eventSender.keyDown("escape");
  96     shouldBeFalse('topDialog.open');
  97     shouldBeFalse('bottomDialog.open');
  98
  99     bottomDialog.remove();
 100     topDialog.remove();
 101 }
 102
 103 test();
 104 </script>
 105 </body>
 106 </html>