modal-dialog-generated-content-ref.html (802B)
1 <!DOCTYPE html> 2 <style> 3 #dialog { 4 position: absolute; 5 top: 100px; 6 left: 100px; 7 height: 100px; 8 width: 100px; 9 background: green; 10 } 11 12 #dialog-before { 13 position: absolute; 14 top: 0px; 15 } 16 17 #dialog-after { 18 position: absolute; 19 bottom: 0px; 20 } 21 22 #dialog-backdrop { 23 position: absolute; 24 top: 100px; 25 left: 300px; 26 height: 100px; 27 width: 100px; 28 background: green; 29 } 30 </style> 31 <body> 32 Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes 33 if there are two green boxes, one with the texts "::before" and "::after" in it. 34 <div id="dialog"> 35 <div id="dialog-before">::before</div> 36 <div id="dialog-after">::after</div> 37 </div> 38 <div id="dialog-backdrop"></div> 39 <script> 40 document.querySelector('dialog').showModal(); 41 </script> 42 </body>