| <!DOCTYPE html> |
| <html> |
| <meta charset='utf-8'> |
| <head> |
| <script src="../dist/dialog-polyfill.js"></script> |
| <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css"> |
| <style> |
| dialog { |
| height: 100px; |
| width: 100px; |
| } |
| |
| dialog + .backdrop { |
| background-color: rgba(0,255,0,0.5); |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for backdrop. The test passes if you see a green background behind the |
| box.</p> |
| <div id="console"></div> |
| <dialog></dialog> |
| <button id="inert-button">Can't click me</button> |
| <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(); |
| </script> |
| </body> |
| </html> |