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

   1 <!DOCTYPE html>
   2 <!-- This tests that top layer elements are rendered above z-indexed elements
   3 and stacked in the correct order amongst themselves. Also, layer features like
   4 transforms and z-index are tested inside a top layer element subtree. -->
   5 <html>
   6 <head>
   7 <style>
   8 .box {
   9     height:150px;
  10     width:150px;
  11 }
  12
  13 ::backdrop {
  14     display: none;
  15 }
  16
  17 .container {
  18     -webkit-perspective: 500px;
  19     border: 1px solid black;
  20     background-color: magenta;
  21 }
  22 .transformed {
  23     transform: rotateY(45deg);
  24     background-color: cyan;
  25 }
  26 </style>
  27 </head>
  28 <body>
  29 <dialog id="hiddenDialog" style="display: none; color: red">This should not be displayed.</dialog>
  30 <dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;">
  31     This white box is the topmost modal dialog. It should be on top of everything.
  32 </dialog>
  33 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;">
  34     <dialog id="bottomDialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px;">
  35         This green box is also a modal dialog. It should be rendered above the red and yellow regions.
  36         <div class="container box">
  37             <div class="transformed box">A transform within the dialog's subtree.</div>
  38         </div>
  39         <div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan">
  40             This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one.
  41         </div>
  42         <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div>
  43         <div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div>
  44     </dialog>
  45 </div>
  46 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000">
  47 </div>
  48 <script>
  49 document.getElementById('bottomDialog').showModal();
  50 document.getElementById('topDialog').showModal();
  51 document.getElementById('hiddenDialog').showModal();
  52 </script>
  53 </body>
  54 </html>