third_party/WebKit/LayoutTests/dialog/backdrop-stacking-order.html

   1 <!DOCTYPE html>
   2 <style>
   3 dialog {
   4     padding: 0px;
   5     border: none;
   6     margin: 0px;
   7 }
   8
   9 #bottom::backdrop {
  10     top: 100px;
  11     left: 100px;
  12     height: 300px;
  13     width: 300px;
  14     background-color: rgb(0, 50, 0);
  15     z-index: 100;  /* z-index has no effect. */
  16 }
  17
  18 #bottom {
  19     top: 125px;
  20     left: 125px;
  21     height: 250px;
  22     width: 250px;
  23     background-color: rgb(0, 90, 0);
  24 }
  25
  26 #middle::backdrop {
  27     top: 150px;
  28     left: 150px;
  29     height: 200px;
  30     width: 200px;
  31     background-color: rgb(0, 130, 0);
  32     z-index: -100;  /* z-index has no effect. */
  33 }
  34
  35 #middle {
  36     top: 175px;
  37     left: 175px;
  38     height: 150px;
  39     width: 150px;
  40     background-color: rgb(0, 170, 0);
  41 }
  42
  43 #top::backdrop {
  44     top: 200px;
  45     left: 200px;
  46     height: 100px;
  47     width: 100px;
  48     background-color: rgb(0, 210, 0);
  49     z-index: 0;  /* z-index has no effect. */
  50 }
  51
  52 #top {
  53     top: 225px;
  54     left: 225px;
  55     height: 50px;
  56     width: 50px;
  57     background-color: rgb(0, 255, 0);
  58     z-index: -1000;  /* z-index has no effect. */
  59 }
  60 </style>
  61 <body>
  62 Test for dialog::backdrop stacking order. The test passes if there are 6
  63 boxes enclosed in each other, becoming increasingly smaller and brighter
  64 green.
  65 <dialog id="top"></dialog>
  66 <dialog id="middle"></dialog>
  67 <dialog id="bottom"></dialog>
  68 <script>
  69 var topDialog = document.getElementById('top');
  70 var middleDialog = document.getElementById('middle');
  71 var bottomDialog = document.getElementById('bottom');
  72 topDialog.showModal();
  73 bottomDialog.showModal();
  74 topDialog.close();  // Just to shuffle the top layer order around a little.
  75 middleDialog.showModal();
  76 topDialog.showModal();
  77 </script>
  78 </body>