third_party/WebKit/LayoutTests/dialog/top-layer-nesting.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 #bottomDialog {
  15     background-color: yellow;
  16     top: 100px;
  17     z-index: 1000;
  18 }
  19
  20 #middleDialog {
  21     background-color: blue;
  22     top: 150px;
  23     left: 50px;
  24     z-index: -500;
  25 }
  26
  27 #topDialog {
  28     background-color: green;
  29     top: 200px;
  30     left: 100px;
  31     z-index: -1000;
  32 }
  33
  34 .red {
  35     background-color: red;
  36     top: 250px;
  37     left: 0px;
  38 }
  39 </style>
  40 </head>
  41 <body>
  42 This tests that top layer elements are stacked correctly even if nested in the DOM tree.
  43 The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green.
  44
  45 <dialog id="topDialog">
  46     <dialog id="middleDialog">
  47         <dialog id="bottomDialog">
  48             <dialog id="hiddenDialog" class="red">
  49                 <dialog id="hiddenDialogChild" class="red"></dialog>
  50             </dialog>
  51         </dialog>
  52     </dialog>
  53 </dialog>
  54 <script>
  55 document.getElementById('hiddenDialogChild').showModal();
  56 document.getElementById('hiddenDialog').showModal();
  57 document.getElementById('bottomDialog').showModal();
  58 document.getElementById('middleDialog').showModal();
  59 document.getElementById('topDialog').showModal();
  60 document.getElementById('hiddenDialog').close();
  61 </script>
  62 </body>
  63 </html>