LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     -webkit-grid-template-rows: 100px;
   8     -webkit-grid-template-columns: 200px;
   9     margin-top: 10px;
  10 }
  11 .red {
  12     background-color: red;
  13 }
  14 .green {
  15     background-color: green;
  16 }
  17 .negativeZIndex {
  18     z-index: -1;
  19 }
  20 #item3 {
  21     width: 200px;
  22     height: 100px;
  23 }
  24 </style>
  25 <script>
  26 function modifyZIndexAndDisplay()
  27 {
  28     document.getElementById('item1').style.zIndex = 1;
  29     document.getElementById('item2').style.zIndex = 1;
  30
  31     document.getElementById('grid3').className = "grid";
  32 }
  33
  34 window.onload = modifyZIndexAndDisplay;
  35 </script>
  36 </head>
  37 <body>
  38 <div>
  39     <p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
  40     <p>For this test to pass, there should be no red below.</p>
  41 </div>
  42
  43 <div class="grid">
  44     <div id="item1" class="sizedToGridArea green negativeZIndex"></div>
  45     <div class="sizedToGridArea red"></div>
  46 </div>
  47
  48 <div class="grid">
  49     <div id="item2" class="sizedToGridArea green"></div>
  50     <div class="sizedToGridArea red"></div>
  51 </div>
  52
  53 <div id="grid3">
  54     <div class="sizedToGridArea green"></div>
  55     <div id="item3" class="red negativeZIndex"></div>
  56 </div>
  57
  58 </body>
  59 </html>