| <!DOCTYPE html> |
| <style> |
| dialog { |
| padding: 0px; |
| border: none; |
| margin: 0px; |
| } |
| |
| #bottom::backdrop { |
| top: 100px; |
| left: 100px; |
| height: 300px; |
| width: 300px; |
| background-color: rgb(0, 50, 0); |
| z-index: 100; /* z-index has no effect. */ |
| } |
| |
| #bottom { |
| top: 125px; |
| left: 125px; |
| height: 250px; |
| width: 250px; |
| background-color: rgb(0, 90, 0); |
| } |
| |
| #middle::backdrop { |
| top: 150px; |
| left: 150px; |
| height: 200px; |
| width: 200px; |
| background-color: rgb(0, 130, 0); |
| z-index: -100; /* z-index has no effect. */ |
| } |
| |
| #middle { |
| top: 175px; |
| left: 175px; |
| height: 150px; |
| width: 150px; |
| background-color: rgb(0, 170, 0); |
| } |
| |
| #top::backdrop { |
| top: 200px; |
| left: 200px; |
| height: 100px; |
| width: 100px; |
| background-color: rgb(0, 210, 0); |
| z-index: 0; /* z-index has no effect. */ |
| } |
| |
| #top { |
| top: 225px; |
| left: 225px; |
| height: 50px; |
| width: 50px; |
| background-color: rgb(0, 255, 0); |
| z-index: -1000; /* z-index has no effect. */ |
| } |
| </style> |
| <body> |
| Test for dialog::backdrop stacking order. The test passes if there are 6 |
| boxes enclosed in each other, becoming increasingly smaller and brighter |
| green. |
| <dialog id="top"></dialog> |
| <dialog id="middle"></dialog> |
| <dialog id="bottom"></dialog> |
| <script> |
| var topDialog = document.getElementById('top'); |
| var middleDialog = document.getElementById('middle'); |
| var bottomDialog = document.getElementById('bottom'); |
| topDialog.showModal(); |
| bottomDialog.showModal(); |
| topDialog.close(); // Just to shuffle the top layer order around a little. |
| middleDialog.showModal(); |
| topDialog.showModal(); |
| </script> |
| </body> |
