backdrop-stacking-order-ref.html (1141B)
1 <!DOCTYPE html> 2 <style> 3 div { 4 position: absolute; 5 } 6 7 #bottom-backdrop { 8 top: 100px; 9 left: 100px; 10 height: 300px; 11 width: 300px; 12 background-color: rgb(0, 50, 0); 13 } 14 15 #bottom { 16 top: 125px; 17 left: 125px; 18 height: 250px; 19 width: 250px; 20 background-color: rgb(0, 90, 0); 21 } 22 23 #middle-backdrop { 24 top: 150px; 25 left: 150px; 26 height: 200px; 27 width: 200px; 28 background-color: rgb(0, 130, 0); 29 } 30 31 #middle { 32 top: 175px; 33 left: 175px; 34 height: 150px; 35 width: 150px; 36 background-color: rgb(0, 170, 0); 37 } 38 39 #top-backdrop { 40 top: 200px; 41 left: 200px; 42 height: 100px; 43 width: 100px; 44 background-color: rgb(0, 210, 0); 45 } 46 47 #top { 48 top: 225px; 49 left: 225px; 50 height: 50px; 51 width: 50px; 52 background-color: rgb(0, 255, 0); 53 } 54 </style> 55 <body> 56 Test for dialog::backdrop stacking order. The test passes if there are 6 57 boxes enclosed in each other, becoming increasingly smaller and brighter 58 green. 59 <div id="bottom-backdrop"></div> 60 <div id="bottom"></div> 61 <div id="middle-backdrop"></div> 62 <div id="middle"></div> 63 <div id="top-backdrop"></div> 64 <div id="top"></div> 65 </body>