Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / dom / HTMLDialogElement / dialog-canceling.html
blob5c0d3984055391becf1a82007432317bde577c9f
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;
14 #top {
15 top: 150px;
16 left: 150px;
17 height: 200px;
18 width: 200px;
19 margin: 0;
20 background: yellow;
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.');
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);
46 function test() {
47 bottomDialog = document.getElementById('bottom');
48 bottomDialog.addEventListener('cancel', handleCancel);
50 topDialog = document.getElementById('top');
51 topDialog.addEventListener('cancel', handleCancel);
53 normalInput = document.getElementById('normal-input');
54 swallowInput = document.getElementById('swallow-input');
55 swallowInput.addEventListener('keydown', function(event) {
56 event.preventDefault();
57 });
59 bottomDialog.showModal();
60 topDialog.showModal();
62 if (!window.eventSender)
63 return;
65 debug('Top dialog event listener should prevent closing.');
66 eventSender.keyDown("escape");
67 shouldBeTrue('topDialog.open');
68 shouldBeTrue('bottomDialog.open');
70 debug('Top dialog should close.');
71 eventSender.keyDown("escape");
72 shouldBeFalse('topDialog.open');
73 shouldBeTrue('bottomDialog.open');
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');
83 normalInput.focus();
84 debug('Bottom dialog event listener should prevent closing.');
85 eventSender.keyDown("escape");
86 shouldBeFalse('topDialog.open');
87 shouldBeTrue('bottomDialog.open');
89 debug('Bottom dialog should close.');
90 eventSender.keyDown("escape");
91 shouldBeFalse('topDialog.open');
92 shouldBeFalse('bottomDialog.open');
94 debug('Pressing Escape now should do nothing.');
95 eventSender.keyDown("escape");
96 shouldBeFalse('topDialog.open');
97 shouldBeFalse('bottomDialog.open');
99 bottomDialog.remove();
100 topDialog.remove();
103 test();
104 </script>
105 </body>
106 </html>