third_party/WebKit/LayoutTests/css3/flexbox/z-index-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container > * {
   4     position: absolute;
   5 }
   6 .large {
   7     width: 50px;
   8     height: 50px;
   9 }
  10 .small {
  11     left: 25px;
  12     height: 25px;
  13     width: 50px;
  14 }
  15 </style>
  16 <div>This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
  17 <div class="container" style="position:relative">
  18     <div class="large" style="z-index: 1; background-color: salmon;"></div>
  19     <div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div>
  20     <div class="small" style="z-index: 150; background-color: green"></div>
  21     <div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div>
  22 </div>
  23 <div class="container" style="position:relative; top: 50px">
  24     <img class="large" style="z-index: 1; background-color: salmon;"></img>
  25     <img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img>
  26     <img class="small" style="z-index: 150; background-color: green"></img>
  27     <img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img>
  28 </div>