| Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html tabindex="0"> |
| 3 | <meta charset='utf-8'> |
| 4 | <head> |
| 5 | <script src="../dist/dialog-polyfill.js"></script> |
| 6 | <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 7 | <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css"> |
| 8 | <style> |
| 9 | html { |
| 10 | border: 4px solid white; |
| 11 | } |
| 12 | html:focus { |
| 13 | border-color: red; |
| 14 | } |
| 15 | dialog { |
| 16 | width: 100px; |
| 17 | } |
| 18 | </style> |
| 19 | </head> |
| 20 | <body> |
| 21 | <p>Test for modal dialog. The test passes if you can click on "Click me" button, |
| 22 | but can't click or tab to the "Can't click me!" button</p> |
| 23 | <div id="console"></div> |
| 24 | |
| 25 | <input type="text" placeholder="Test 1" tabindex="1" /> |
| 26 | <input type="text" placeholder="Test 2" tabindex="2" /> |
| 27 | <input type="text" placeholder="Test 2.1" tabindex="2" /> |
| 28 | <input type="text" placeholder="Test 3" tabindex="3" /> |
| 29 | |
| 30 | <input type="text" placeholder="Before dialog" /> |
| 31 | <dialog> |
| 32 | <button id="dialog-button">Click me</button> |
| 33 | <input type="text" placeholder="Focus me" /> |
| 34 | <input type="text" placeholder="Focus me again" /> |
| 35 | </dialog> |
| 36 | <button id="inert-button">Can't click me</button> |
| 37 | <input type="text" placeholder="Can't focus me" /> |
| 38 | <script> |
| 39 | function writeToConsole(s) { |
| 40 | var console = document.getElementById('console'); |
| 41 | var span = document.createElement('span'); |
| 42 | span.textContent = s; |
| 43 | console.appendChild(span); |
| 44 | console.appendChild(document.createElement('br')); |
| 45 | } |
| 46 | |
| 47 | var dialog = document.querySelector('dialog'); |
| 48 | dialogPolyfill.registerDialog(dialog); |
| 49 | dialog.showModal(); |
| 50 | |
| 51 | var dialogButton = document.getElementById('dialog-button'); |
| 52 | dialogButton.addEventListener('click', function(e) { |
| 53 | writeToConsole("SUCCESS: dialog's button was clicked"); |
| 54 | }); |
| 55 | |
| 56 | var inertButton = document.getElementById('inert-button'); |
| 57 | inertButton.addEventListener('click', function(e) { |
| 58 | writeToConsole('FAIL: inert button was clicked'); |
| 59 | }); |
| 60 | </script> |
| 61 | </body> |
| 62 | </html> |