third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-rows: 100px;
   8     grid-template-columns: 200px 200px;
   9     width: -webkit-fit-content;
  10     margin-top: 10px;
  11 }
  12 .red {
  13     background-color: red;
  14 }
  15 .green {
  16     background-color: green;
  17 }
  18 .positiveZIndex {
  19     z-index: 10;
  20 }
  21 .negativeZIndex {
  22     z-index: -5;
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <p>This test checks that grid items with 'z-index' do produce a stacking context and that we honor the property.</p>
  28 <p>For this test to pass, there should be no red below.</p>
  29
  30 <div class="grid">
  31     <div class="sizedToGridArea green positiveZIndex firstRowFirstColumn"></div>
  32     <div class="sizedToGridArea red firstRowFirstColumn"></div>
  33 </div>
  34
  35 <div class="grid">
  36     <div class="sizedToGridArea green firstRowFirstColumn"></div>
  37     <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
  38 </div>
  39
  40 <div class="grid">
  41     <div class="sizedToGridArea green firstRowBothColumn"></div>
  42     <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
  43     <div class="sizedToGridArea red negativeZIndex firstRowSecondColumn"></div>
  44 </div>
  45
  46 </body>
  47 </html>