third_party/WebKit/LayoutTests/dialog/top-layer-stacking-dynamic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     height: 150px;
   7     width: 150px;
   8 }
   9
  10 ::backdrop {
  11     display: none;
  12 }
  13
  14 .red {
  15     background-color: red;
  16     top: 200px;
  17 }
  18
  19 #bottomDialog {
  20     background-color: blue;
  21     top: 50px;
  22 }
  23
  24 #topDialog {
  25     background-color: green;
  26     top: 100px;
  27     left: 50px;
  28 }
  29 </style>
  30 </head>
  31 <body>
  32 This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree.
  33 The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles.
  34
  35 <dialog id="topDialog"></dialog>
  36 <dialog id="bottomDialog"></dialog>
  37 <dialog id="removedDialog" class="red">
  38     <dialog id="removedDialogChild" class="red"></dialog>
  39 </dialog>
  40 <script>
  41 document.getElementById('topDialog').showModal();
  42 var removedDialog = document.getElementById('removedDialog');
  43 removedDialog.showModal();
  44 document.getElementById('bottomDialog').showModal();
  45 document.getElementById('removedDialogChild').showModal();
  46 removedDialog.parentNode.removeChild(removedDialog);
  47 document.getElementById('topDialog').close();
  48 document.getElementById('topDialog').showModal();
  49 </script>
  50 </body>
  51 </html>