| <!DOCTYPE html> |
| <html tabindex="0"> |
| <meta charset='utf-8'> |
| <head> |
| <script src="../dist/dialog-polyfill.js"></script> |
| <meta name="viewport" content="width=device-width, user-scalable=no"> |
| <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css"> |
| <style> |
| html { |
| border: 4px solid white; |
| } |
| html:focus { |
| border-color: red; |
| } |
| dialog { |
| width: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for modal dialog. The test passes if you can click on "Click me" button, |
| but can't click or tab to the "Can't click me!" button</p> |
| <div id="console"></div> |
| |
| <input type="text" placeholder="Test 1" tabindex="1" /> |
| <input type="text" placeholder="Test 2" tabindex="2" /> |
| <input type="text" placeholder="Test 2.1" tabindex="2" /> |
| <input type="text" placeholder="Test 3" tabindex="3" /> |
| |
| <input type="text" placeholder="Before dialog" /> |
| <dialog> |
| <button id="dialog-button">Click me</button> |
| <input type="text" placeholder="Focus me" /> |
| <input type="text" placeholder="Focus me again" /> |
| </dialog> |
| <button id="inert-button">Can't click me</button> |
| <input type="text" placeholder="Can't focus me" /> |
| <script> |
| function writeToConsole(s) { |
| var console = document.getElementById('console'); |
| var span = document.createElement('span'); |
| span.textContent = s; |
| console.appendChild(span); |
| console.appendChild(document.createElement('br')); |
| } |
| |
| var dialog = document.querySelector('dialog'); |
| dialogPolyfill.registerDialog(dialog); |
| dialog.showModal(); |
| |
| var dialogButton = document.getElementById('dialog-button'); |
| dialogButton.addEventListener('click', function(e) { |
| writeToConsole("SUCCESS: dialog's button was clicked"); |
| }); |
| |
| var inertButton = document.getElementById('inert-button'); |
| inertButton.addEventListener('click', function(e) { |
| writeToConsole('FAIL: inert button was clicked'); |
| }); |
| </script> |
| </body> |
| </html> |