third_party/WebKit/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     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 .negativeZIndex {
  19     z-index: -1;
  20 }
  21 </style>
  22 <script src="../repaint/resources/text-based-repaint.js"></script>
  23 <script>
  24 function repaintTest()
  25 {
  26     document.getElementById('item1').style.zIndex = 1;
  27     document.getElementById('item2').style.zIndex = 1;
  28 }
  29
  30 window.onload = runRepaintTest;
  31 </script>
  32 </head>
  33 <body>
  34 <div style="height: 100px">
  35     <p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
  36     <p>For this test to pass, there should be no red below.</p>
  37 </div>
  38
  39 <div class="grid">
  40     <div id="item1" class="sizedToGridArea green negativeZIndex"></div>
  41     <div class="sizedToGridArea red"></div>
  42 </div>
  43
  44 <div class="grid">
  45     <div id="item2" class="sizedToGridArea green"></div>
  46     <div class="sizedToGridArea red"></div>
  47 </div>
  48
  49 </body>
  50 </html>