| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| dialog { |
| height: 100px; |
| width: 100px; |
| } |
| |
| ::backdrop { |
| display: none; |
| } |
| |
| #bottomDialog { |
| background-color: blue; |
| top: 100px; |
| } |
| |
| #topDialog { |
| background-color: green; |
| top: 150px; |
| left: 50px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer |
| <p>The test passes if you see a green rectangle stacked on top of a blue rectangle. |
| |
| <dialog id="topDialog"></dialog> |
| <dialog id="bottomDialog"></dialog> |
| <script> |
| var topDialog = document.getElementById('topDialog'); |
| var bottomDialog = document.getElementById('bottomDialog'); |
| topDialog.showModal(); |
| bottomDialog.showModal(); |
| topDialog.offsetTop; // force a layout |
| topDialog.close(); |
| topDialog.showModal(); |
| </script> |
| </body> |
| </html> |
