third_party/WebKit/LayoutTests/dialog/top-layer-stacking-correct-order-remove-readd.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     height: 100px;
   7     width: 100px;
   8 }
   9
  10 ::backdrop {
  11     display: none;
  12 }
  13
  14 #bottomDialog {
  15     background-color: blue;
  16     top: 100px;
  17 }
  18
  19 #topDialog {
  20     background-color: green;
  21     top: 150px;
  22     left: 50px;
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer
  28 <p>The test passes if you see a green rectangle stacked on top of a blue rectangle.
  29
  30 <dialog id="topDialog"></dialog>
  31 <dialog id="bottomDialog"></dialog>
  32 <script>
  33 var topDialog = document.getElementById('topDialog');
  34 var bottomDialog = document.getElementById('bottomDialog');
  35 topDialog.showModal();
  36 bottomDialog.showModal();
  37 topDialog.offsetTop;  // force a layout
  38 topDialog.close();
  39 topDialog.showModal();
  40 </script>
  41 </body>
  42 </html>