third_party/WebKit/LayoutTests/dialog/dialogs-with-no-backdrop.html

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