| <!DOCTYPE html> |
| <style> |
| div { |
| position: absolute; |
| } |
| |
| #bottom-backdrop { |
| top: 100px; |
| left: 100px; |
| height: 300px; |
| width: 300px; |
| background-color: rgb(0, 50, 0); |
| } |
| |
| #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); |
| } |
| |
| #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); |
| } |
| |
| #top { |
| top: 225px; |
| left: 225px; |
| height: 50px; |
| width: 50px; |
| background-color: rgb(0, 255, 0); |
| } |
| </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. |
| <div id="bottom-backdrop"></div> |
| <div id="bottom"></div> |
| <div id="middle-backdrop"></div> |
| <div id="middle"></div> |
| <div id="top-backdrop"></div> |
| <div id="top"></div> |
| </body> |
