| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| dialog { |
| height: 150px; |
| width: 150px; |
| } |
| |
| #bottomDialog { |
| background-color: yellow; |
| top: 100px; |
| z-index: 1000; |
| } |
| |
| #middleDialog { |
| background-color: blue; |
| top: 150px; |
| left: 50px; |
| z-index: -500; |
| } |
| |
| #topDialog { |
| background-color: green; |
| top: 200px; |
| left: 100px; |
| z-index: -1000; |
| } |
| |
| .red { |
| background-color: red; |
| top: 250px; |
| left: 0px; |
| } |
| </style> |
| </head> |
| <body> |
| This tests that top layer elements are stacked correctly even if nested in the DOM tree. |
| The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green. |
| |
| <dialog id="topDialog"> |
| <dialog id="middleDialog"> |
| <dialog id="bottomDialog"> |
| <dialog id="hiddenDialog" class="red"> |
| <dialog id="hiddenDialogChild" class="red"></dialog> |
| </dialog> |
| </dialog> |
| </dialog> |
| </dialog> |
| <script> |
| document.getElementById('hiddenDialogChild').showModal(); |
| document.getElementById('hiddenDialog').showModal(); |
| document.getElementById('bottomDialog').showModal(); |
| document.getElementById('middleDialog').showModal(); |
| document.getElementById('topDialog').showModal(); |
| document.getElementById('hiddenDialog').close(); |
| </script> |
| </body> |
| </html> |
