modal-dialog-generated-content.html (1213B)
1 <!DOCTYPE html> 2 <link rel="match" href="modal-dialog-generated-content-ref.html"> 3 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 4 <style> 5 dialog { 6 padding: 0px; 7 border: none; 8 margin: 0px; 9 top: 100px; 10 left: 100px; 11 height: 100px; 12 width: 100px; 13 background: green; 14 outline: none; 15 } 16 17 dialog::before { 18 content: '::before'; 19 position: absolute; 20 top: 0px; 21 } 22 23 dialog::after { 24 content: '::after'; 25 position: absolute; 26 bottom: 0px; 27 } 28 29 dialog::backdrop { 30 position: absolute; 31 top: 100px; 32 left: 300px; 33 height: 100px; 34 width: 100px; 35 background: green; 36 content: 'THIS TEXT SHOULD NOT BE SEEN'; 37 } 38 39 dialog::backdrop::before { 40 content: '::backdrop::before'; 41 position: absolute; 42 top: 0px; 43 background: red; 44 } 45 dialog::backdrop::after { 46 content: '::backdrop::after'; 47 position: absolute; 48 bottom: 0px; 49 background: red; 50 } 51 </style> 52 <body> 53 Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes 54 if there are two green boxes, one with the texts "::before" and "::after" in it. 55 <dialog></dialog> 56 <script> 57 document.querySelector('dialog').showModal(); 58 </script> 59 </body>