dialogs-with-no-backdrop.html (1345B)
1 <!DOCTYPE html> 2 <link rel="match" href="dialogs-with-no-backdrop-ref.html"> 3 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element"> 5 <style> 6 dialog::backdrop { 7 position: absolute; 8 top: 100px; 9 left: 100px; 10 height: 100px; 11 width: 100px; 12 background: red; 13 } 14 15 #display-none-backdrop::backdrop { 16 display: none; 17 } 18 </style> 19 <body> 20 Test that ::backdrop is not shown for non-open or non-modal dialogs. 21 The test passes if there is no red shown. 22 <dialog id="never-opened-dialog"></dialog> 23 <dialog id="display-none-dialog" style="display: none"></dialog> 24 <dialog id="non-modal-dialog" style="visibility: hidden"></dialog> 25 <dialog id="display-none-backdrop" style="visibility: hidden"></dialog> 26 <dialog id="closed-dialog"></dialog> 27 <dialog id="removed-dialog"></dialog> 28 <script> 29 document.getElementById('display-none-dialog').showModal(); 30 document.getElementById('non-modal-dialog').show(); 31 document.getElementById('display-none-backdrop').showModal(); 32 33 var closedDialog = document.getElementById('closed-dialog'); 34 closedDialog.showModal(); 35 closedDialog.close(); 36 37 var removedDialog = document.getElementById('removed-dialog'); 38 removedDialog.showModal(); 39 removedDialog.parentNode.removeChild(removedDialog); 40 </script> 41 </body>